I had such cases in my application too. The way I handled them was also by kendo.ui.progress($("#gridDame"), true)
. For the sake of the completion of the answer I will post the way I handled them and the way I am handling them now with the DataSource.Read()
of the grid by passing the filter input values as additional data to my Read request.
First way:
I had a general Ajax call for all my gridRequests
function getGridData(uri, payload, gridName) {
return $.ajax({
url: uri,
type: "POST",
contentType: "application/json",
data: payload,
beforeSend: function () {
window.kendo.ui.progress($("#"+ gridName), true);
}
}).done(function (result) {
return result;
}).always(function () {
window.kendo.ui.progress($("#" + gridName), false);
});
}
I called it on my button click with the parameters of my search form
$("#searchFormBtn").bind("click", function (e) {
e.preventDefault();
return getGridData(url, filterInputValuesStrignifiedAsJson, "grid")
.done(function (result) {
if (result.success) {
var datasource = new kendo.data.DataSource({ data: result.data });
$("#grid").data("kendoGrid").setDataSource(datasource);
} else {
}
});
});
Second way:
I set my Datasource.Read()
like this:
.Read(read => read.Action("ActionName", "ControllerName").Data("getFilterInputValues"))
and always Autobind(false)
in order not to read on first load
In the function getFilterInputValues
I get my search form values like that:
function searchModelData() {
return {
DateFrom: $("#DateFrom").data("kendoDatePicker").value(),
DateTo: $("#DateTo").data("kendoDatePicker").value(),
Forever: document.getElementById("datesForever").checked === true ? true : false,
SearchCommunicationType: { Id: $("#SearchCommunicationType_Id").val() },
SearchBranch: { Id: $("#SearchBranch_Id").val() },
CompletedById: { Id: $("#CompletedById_Id").val() },
SearchOperationType: { Id: $("#SearchOperationType_Id").val() },
AcademicPeriodSearch: { Id: $("#AcademicPeriodSearch_Id").val() },
AcademicYearSearch: $("#AcademicYearSearch").val(),
Name: $("#Name").val(),
ContactValue: $("#ContactValue").val(),
AddressValue: $("#AddressValue").val()
};
}
Finally I trigger the DataSource.Read()
of my grid on the button click
$("#searchFormBtn").bind("click", function () {
var grid = $('#grid').data("kendoGrid");
if (grid.dataSource.page() !== 1) {
grid.dataSource.page(1);
}
grid.dataSource.read();
});
With Datasource.Read()
obviously works correctly and the spinning effect you mention in your question.