如果没有kendo网格返回的记录，则清空div

Question

我有一个剑道网格，定义如下

$('#BrowseSchool').kendoGrid({
  columns: [{
    title: 'Name',
    headerAttributes: { "data-field": 'Name', "data-title": 'Name' },
    field: 'Name',
    encoded: true
  }, {
    title: 'City',
    headerAttributes: { "data-field": 'City', "data-title": 'City' },
    field: 'City',
    encoded: true
  }, {
    title: 'State',
    headerAttributes: { "data-field": 'State', "data-title": 'State' },
    field: 'State',
    encoded: true
  }, {
    title: 'Zip',
    headerAttributes: { "data-field": 'Zip', "data-title": 'Zip' },
    field: 'Zip',
    encoded: true
  }],
  pageable: {
    buttonCount: 10
  },
  sortable: true,
  selectable: 'Single, Row',
  filterable: true,
  scrollable: {
    height: '200px'
  },
  messages: {
    noRecords: 'No records available.'

  },
  dataSource: {
    type: (function() {
      if (kendo.data.transports['aspnetmvc-ajax']) {
        return 'aspnetmvc-ajax';
      } else {
        throw new Error('The kendo.aspnetmvc.min.js script is not included.');
      }
    })(),
    transport: {
      read: {
        url: '/Student/Student_Read'
      },
      prefix: ''
    },
    pageSize: 10,
    page: 1,
    total: 0,
    serverPaging: true,
    serverSorting: true,
    serverFiltering: true,
    serverGrouping: true,
    serverAggregates: true,
    filter: [],
    schema: {
      data: 'Data',
      total: 'Total',
      errors: 'Errors',
      model: {
        fields: {
           Address1: { type: 'string' },
           Name:     { type: 'string' },
           City:     { type: 'string' },                                        
           State:    { type: 'string' },
           Zip:      { type: 'string' }
          }
        }
      }
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.all.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.default.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css" rel="stylesheet" />

<!-- I have div tag defined as below in my view, where the grid is loaded. -->
<div id="BrowseSchool" class="browse"></div>

现在我希望如果Kendo网格没有返回任何记录，我想隐藏我的div里面的kendo网格加载并显示不同的div。

我尝试将databound事件添加到我的网格中，如下所示：

databound: function (e) {
  alert("No Data");
  //var grid = $("#BrowseSchool").data("kendoGrid");
  //if (grid.dataSource.total() == 0) {
  //  alert("No Data");
  //  $("#BrowseSchool").hide();
  //}
},    

但是，这似乎不起作用，因为我没有得到警报框 我的问题是，如果剑道网格没有返回记录，我该如何隐藏div？

提前致谢！

编辑 - 如果在过滤时没有返回任何记录，我需要隐藏div。

Answer 1

dataBound: function (e) {
                        var grid = e.sender;
                        var data = grid.dataSource.data();
                        if (data.length === 0) {
                            $('#BrowseSchool').hide();
                        }
                    },

这解决了我的问题。