Our project has a Kendo grid where the grid databound event saves the grid state for a particular user at any give time when user applies filter or makes any changes to grid view.
Kendo grid structure is loaded in MVC as follows:
@(Html.Kendo().Grid<Entity>()
.Name("FeedGrid")
.HtmlAttributes(new { @class = "FeedGrid" })
.Sortable(sortable => sortable
.AllowUnsort(true)
.SortMode(GridSortMode.MultipleColumn))
.Scrollable()
.ColumnMenu()
.Filterable()
.Reorderable(ro => ro.Columns(true))
.Resizable(rs => rs.Columns(true))
.Groupable()
.NoRecords("<b style='text-align:center'><i>---- No records found ----</i></b>")
.Columns(columns =>...)
.Events(events =>
{ events.ExcelExport("exportGridWithTemplatesContent");
events.ColumnShow("SaveGridState");
events.ColumnHide("SaveGridState");
events.ColumnReorder("SaveGridState");
events.ColumnResize("SaveGridState");
events.ColumnMenuInit("SortFilterDropdown");
events.DataBound("SaveGridState")};
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)));
The data to the above grid is passed in javascript/jquery as follows along with retrieving the saved grid state:
var dataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
$.ajax({
url: GetApiUrl('Api/GetGrid'),
contentType: "application/json;charset=utf-8",
data: JSON.stringify(DataSourceRequestViewModel(options, currentSearchXml)),
type: 'POST',
cache: false,
success: function (result) {
options.success(result);
},
error: function (result) {
options.error(result);
}
});
}
},
schema: {
data: "Data",
total: "Total"
}
});
setTimeout(function () {
$("#FeedGrid").data("kendoGrid").setDataSource(dataSource);
$("#FeedGrid").data("kendoGrid").dataSource.read();
}, 100);
var stateGrid = GetGridState("FeedGrid");
var grid = $("#FeedGrid").getKendoGrid();
stateGrid.toolbar = [{ template: kendo.template($('#FeedGrid').find(".k-grid-toolbar").html()) }];
if (!isNullOrEmpty(stateGrid)) {
grid.setOptions(stateGrid);
}
Though the datasource is making the ajax call and receiving the right response, the data is not being rendered on grid in UI. It shows No records found. When I remove the setOptions it loads the data correctly. But the setoptions is an important feature and we need it, Please help me here. This looks like a bug from kendo.
I tried the following solution to wait for the grid to load completely and then use setoptions but that is loading the grid twice and is not user friendly.
Tried solution:
function getFeedGridSettings(id) {
var isLoading = $('.k-loading-text').length;
if (isLoading) {
if (stateGrid == undefined) {
stateGrid = GetGridState(id);
stateGrid.toolbar = [{ template: kendo.template($('#' + id).find(".k-grid-toolbar").html()) }];
}
setTimeout(function () { getFeedGridSettings('FeedGrid'); }, 10000);
}
else {
if (!isNullOrEmpty(stateGrid)) {
var grid = $("#" + id).getKendoGrid();
grid.setOptions(stateGrid);
}
}
}
var dataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
$.ajax({
url: GetApiUrl('Api/GetGrid'),
contentType: "application/json;charset=utf-8",
data: JSON.stringify(DataSourceRequestViewModel(options, searchXml)),
type: 'POST',
cache: false,
success: function (result) {
options.success(result);
},
error: function (result) {
options.error(result);
}
});
}
},
schema: {
data: "Data",
total: "Total"
}
});
setTimeout(function () { $("#FeedGrid").data("kendoGrid").setDataSource(dataSource) }, 100);
getFeedGridSettings('FeedGrid');
Please help me in finding the right solution.