Empty a div if no records are returned by kendo grid on filtering

[RJ]

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' }
          }
        }
      }
    }
  }
});

 

I have a 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 when a filter is applied, 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 when a filter is applied?

Thanks in advance!

[Stefan]

Hello RJ,

In this scenario, I can suggest using the length of the dataSource view, as this is representing the currently displayed items:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-view

Please check the following example demonstrating this:

http://dojo.telerik.com/esaMe

I hope this is helpful.

Regards,
Stefan
Telerik by Progress

[RJ]

Thank You Stefan!

I have a follow up question on this. So, I have this same grid and when no records are displayed on filtering, I am showing a screen where the user can add a new school.

Now I want that after a user creates a new record for school, I want to show the same grid again, but with just the recently added school.

Basically, with a filter of recently added school on the grid. How can I achieve that?

[RJ]

I got that taken care ok. So, I used below code to have a filter on newly added entry.

var kgrid = $('#BrowseSchool').data('kendoGrid');
                    $('#BrowseSchool').show();
                    kgrid.dataSource.filter({
                        field: "SchoolId",
                        operator: "eq",
                        value: schoolid
                        })

[Stefan]

Hello RJ,

I'm glad to hear that the desired result is achieved.

Also, thank you for sharing it with the Kendo UI community it is highly appreciated.

Regards,
Stefan
Telerik by Progress