如果没有Kendo Grid返回的记录,则为DIV空



我有一个kendo网格,该网格定义为

$('#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 Grid)返回的记录,我想隐藏我的div内部,其中kendo网格加载并显示不同的div。

我尝试将数据库事件添加到我的网格中,如下:

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

但是,这似乎不起作用,因为我没有获得警报框。
我的问题是,如果没有肯德网格返回的记录,我该如何隐藏DIV?

预先感谢!

编辑 - 如果没有返回过滤的记录,我需要隐藏DIV。

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

这解决了我的问题。

最新更新