[英]How to display spinner when data are rendered from ajax in kendo grid
I have some search filters for a query in my application.我的应用程序中有一些用于查询的搜索过滤器。 From the filters I want to render the json results into a kendo grid.从过滤器中,我想将 json 结果呈现为剑道网格。 For that reason I don't use the default DataSource.Read() of the grid but an Ajax request and I bind the results to the grid like that:因此,我不使用网格的默认DataSource.Read()而是使用 Ajax 请求,并将结果绑定到网格,如下所示:
Kendo grid:剑道格子:
@(Html.Kendo().Grid<List<SearchSpecialtiesResult>>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Id).Hidden();
columns.Bound(c => c.Code).Width(100);
// Some other columns
})
//Some events and filtering options
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.Id);
// other model values
})
)
)
Set the dataSource on Ajax success在 Ajax 成功时设置数据源
var datasource = new kendo.data.DataSource({ data: resultData });
$("#grid").data("kendoGrid").setDataSource(datasource);
The binding happens correctly however to other places that I use the DataSource.Read() the grid shows a loading effect that I can't find how to reproduce to my page and I use to this place some other loading effect we use on Ajax requests.然而,绑定正确发生在我使用DataSource.Read()的其他地方,网格显示了一种加载效果,我找不到如何重现到我的页面,我在这个地方使用了一些我们在 Ajax 请求上使用的其他加载效果. Is there any way to reproduce it in my case?有没有办法在我的情况下重现它?
I had such cases in my application too. 我的申请也有这样的案例。 The way I handled them was also by kendo.ui.progress($("#gridDame"), true). 我处理它们的方式也是通过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. 为了完成答案,我将通过将过滤器输入值作为附加数据传递给我的Read请求来发布我处理它们的方式以及我现在使用网格的DataSource.Read()处理它们的方式。
First way: 第一种方式:
I had a general Ajax call for all my gridRequests 我对所有gridRequests都进行了一般的Ajax调用
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();
// ... Get the filter input values and strignify them as json ...
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 {
//Handle error
}
});
});
Second way: 第二种方式:
I set my Datasource.Read() like this: 我像这样设置我的Datasource.Read() :
.Read(read => read.Action("ActionName", "ControllerName").Data("getFilterInputValues"))
and allways Autobind(false) in order not to read on first load 并且总是Autobind(false)为了不在第一次加载时读取
In the function getFilterInputValues I get my search form values like that: 在函数getFilterInputValues中,我得到了我的搜索表单值:
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 最后,我在单击按钮时触发网格的DataSource.Read()
$("#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. 使用Datasource.Read()显然可以正常工作,并在您的问题中提到旋转效果。
You're looking for kendo.ui.progress
. 你在找kendo.ui.progress
。 Click here for Telerik's documentation. 单击此处查看Telerik的文档。
Before running the ajax call add the following to show the loading effect: 在运行ajax调用之前,添加以下内容以显示加载效果:
kendo.ui.progress($("#gridName"), true);
After success or failure add the following to remove the loading effect: 成功或失败后,添加以下内容以删除加载效果:
kendo.ui.progress($("#gridName"), false);
You can do it manualy你可以手动完成
<div id="UrGrid"></div>
<div class="chart-loading"></div>
in event:事件:
var loading = $(".chart-loading", e.sender.element.parent());
kendo.ui.progress(loading, true);
...work with data...
kendo.ui.progress(loading, false);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.