Hide Grid if DataSource is empty

5 posts, 0 answers
  1. Scott
    Scott avatar
    10 posts
    Member since:
    Jun 2012

    Posted 20 Jun 2012 Link to this post

    I was hoping someone could help me out with how I can hide a grid if the datasource returns with no results.

    I was doing this in my code behind before I switched to a Kendo grid, but am quite new to javascript, and can't seem to find any good info on how to do this.

    Please let me know if you have any questions.

    Thanks,

    Scott
  2. Phil
    Phil avatar
    4 posts
    Member since:
    Apr 2009

    Posted 19 Jul 2012 Link to this post

    Hi Scott,

    In the change event for your DataSource, you can check to see if the results coming back are empty and take action as necessary:

    var source = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "/api/data"
                    }
                },
                change: function (e) {
                    console.log(e);
                    var qty = 0;
     
                    // or some other arbitrary logic for determining if your data is "empty"
                    for (var i = 0; i < e.items.length; i++) {
                        qty += e.items[i].Quantity;
                    }
     
                    if (qty <= 0) $("#myChart").hide();
                }
            });
  3. Avitot
    Avitot avatar
    15 posts
    Member since:
    Jul 2012

    Posted 03 Aug 2012 Link to this post

    If you're using ASP.NET, you can try this:
    function CheckIfEmpty(e) {
                if (e.sender._data.length == 0) {       //if datasource is empty
                   $(e.sender.table).hide();
                }
         }

    Call this in the DataBound event of your grid:
    .DataBound("CheckIfEmpty ")

    Hope this helps,
    Avi
  4. Raymond
    Raymond avatar
    27 posts
    Member since:
    Jul 2014

    Posted 03 May 2017 Link to this post

    This works when paging is disabled.  But if you have paging enabled, calling the hide method of the table only hides the table, not the pager.  

    using 

    $(e.sender.element).hide();

    instead of 

    $(e.sender.table).hide();

    hides the pager as well.

  5. Manasa
    Manasa avatar
    2 posts
    Member since:
    Nov 2017

    Posted 16 Jan 2018 in reply to Phil Link to this post

    Thanks it worked!.. even for paging
Back to Top