Hide Grid if DataSource is empty

[Scott]

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

[Phil]

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();

            }

        });

[Avitot]

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

[Raymond]

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.

[Manasa]

Thanks it worked!.. even for paging