Empty a div if no records returned by kendo grid

Question

I have a kendo grid which is defined as below

$('#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>

Now I want that if there are no records returned by the Kendo grid, I want to hide my div inside which kendo grid loads and show a different div.

I have tried adding databound event to my grid like below:

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

But, this doesn't seem to be working, as I didn't get the alert box.
My question is, how can I hide a div if there are no records returned by the kendo grid?

Thanks in advance!

EDIT - I need to hide the div, if no records are returned on filtering.

Here is a similar example you could play with: dojo.telerik.com/@Iliana/oQOxu — Steve Greene
Thank you so much. I could hide and show my div now using the dataBound event. — Kristy

Kristy Kristy · Accepted Answer · 2017-03-10T19:21:45

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

This solved my problem.

Empty a div if no records returned by kendo grid

1 Answers