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!