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

5 posts, 0 answers
  1. RJ
    RJ avatar
    7 posts
    Member since:
    Mar 2016

    Posted 09 Mar Link to this post

    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!

  2. Stefan
    Admin
    Stefan avatar
    1262 posts

    Posted 13 Mar Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. RJ
    RJ avatar
    7 posts
    Member since:
    Mar 2016

    Posted 21 Mar in reply to Stefan Link to this post

    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?

  4. RJ
    RJ avatar
    7 posts
    Member since:
    Mar 2016

    Posted 22 Mar Link to this post

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

  5. Stefan
    Admin
    Stefan avatar
    1262 posts

    Posted 23 Mar Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top