Javascript 在剑道网格中从ajax渲染数据时如何显示微调器

我的应用程序中有一些查询的搜索过滤器。我希望通过过滤器将json结果呈现到剑道网格中。因此，我不使用网格的默认DataSource.Read（），而是使用Ajax请求，并将结果绑定到网格，如下所示：

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

剑道格网：

@(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
        })
        )
)

---

但是，绑定正确地发生在我使用数据源的其他地方。Read（）网格显示了一种加载效果，我找不到如何复制到我的页面，我在这个地方使用了一些我们在Ajax请求中使用的其他加载效果。有没有办法在我的情况下重现它？

您正在寻找

kendo.ui.progress

。点击查看Telerik的文档

在运行ajax调用之前，添加以下内容以显示加载效果：

kendo.ui.progress($("#gridName"), true);

kendo.ui.progress($("#gridName"), false);

成功或失败后，添加以下内容以消除加载效应：

kendo.ui.progress($("#gridName"), true);

kendo.ui.progress($("#gridName"), false);

---

我的申请中也有这样的案例。我处理它们的方式也是通过kendo.ui.progress（$（“#gridDame”），没错。为了完成回答，我将通过网格的DataSource.Read（）将过滤器输入值作为附加数据传递给我的读取请求，发布我处理它们的方式和我现在处理它们的方式

第一种方式：

我的所有请求都有一个通用的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);
    });
}

我用我的搜索表单的参数点击按钮调用它

    $("#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
                }
            });
    });

第二种方式：

我将我的Datasource.Read（）设置如下：

.Read(read => read.Action("ActionName", "ControllerName").Data("getFilterInputValues"))

并且始终自动绑定（false），以避免在第一次加载时读取

在函数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()
    };
}

最后，单击按钮触发网格的DataSource.Read（）

    $("#searchFormBtn").bind("click", function () {
        var grid = $('#grid').data("kendoGrid");

        if (grid.dataSource.page() !== 1) {
            grid.dataSource.page(1);
        }
        grid.dataSource.read();
    });

使用Datasource.Read（）显然可以正常工作，并且您在问题中提到的旋转效果。

您可以手动操作

如果：

   var loading = $(".chart-loading", e.sender.element.parent());
   kendo.ui.progress(loading, true);
   ...work with data...
   kendo.ui.progress(loading, false);