如何在kendo网格中的ajax渲染数据时显示微调器

我的应用程序中有一些查询过滤器。我想要将json结果渲染成剑道网格。出于这个原因，我不使用默认的DataSource.Read（）网格的但一个Ajax请求，我的结果绑定到网格那样：如何在kendo网格中的ajax渲染数据时显示微调器

剑道格：

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

套装Ajax的成功

var datasource = new kendo.data.DataSource({ data: resultData }); 
$("#grid").data("kendoGrid").setDataSource(datasource);

的结合将数据源正确执行然而，我使用DataSource.Read（）等地的网格显示负载效应，我无法找到如何重现到我的页面，我使用这个地方一些其他加载效果，我们使用Ajax请求。有什么方法可以重现我的情况？

来源

2017-10-18 ilias

我有这样的情况下，在我的应用程序。我处理它们的方式也是由kendo.ui.progress（$（“＃gridDame”），true）。为了完成答案，我将通过将过滤器输入值作为附加数据传递给我的读取请求来发布我处理它们的方式以及我现在使用网格的DataSource.Read（）处理它们的方式。

第一种方式：

我有一个通用的Ajax调用我所有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); 
    }); 
}

我与我的搜索形式的参数把它称为我的按钮，点击

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

和百达Autobind（假）为了不上第一负载

阅读在功能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(); 
    });

With Datasource。阅读（）显然工作正常，你在问题中提到的纺纱效果。

来源

2017-10-19 08:09:06

您正在查找kendo.ui.progress。 Telerik的文档点击here。

运行AJAX调用之前添加以下显示加载效果：

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

成功或失败之后加上删除负载效应：

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

来源

2017-10-18 17:48:48 Supersnake

如何在kendo网格中的ajax渲染数据时显示微调器

回答

相关问题