如何使用新数据刷新kendo网格

时间:2016-10-14 20:16:01

标签: javascript kendo-ui kendo-grid kendo-asp.net-mvc

加载剑道网格后,我想使用点击按钮刷新/重新加载网格。

控制器:

    using Kendo.Mvc;
    using Kendo.Mvc.Extensions;
    using Kendo.Mvc.Infrastructure;
    using Kendo.Mvc.UI;

    public ActionResult FollowUpGrid_Read([DataSourceRequest]DataSourceRequest request, string name, string id)
{
List<vmFollowUpGrid> FUPList = new List<vmFollowUpGrid>();
FUPList = (from u in db.usrUserBldgLists 
                join e in db.entEntities on u.EntID equals e.EntID
                join d in db.entDistricts on e.FANo equals d.DistNo
                join ed in db.entDistricts on e.OANo equals ed.DistNo
                join b in db.entBuildings on e.OBNo equals b.BuildNo
                where u.UserID == "A1036719" && u.FANO == id
                select new vmFollowUpGrid { FANo = u.FANO, FAName = d.DistrictName, OANo = u.OANO, District = ed.DistrictName, OBNo = u.OBNo, Building = b.BuildName}).Take(50).ToList();
var FUList = FUPList.ToDataSourceResult(request);
return Json(FUList, JsonRequestBehavior.AllowGet);                         
} 

cshtml页面:

        @(Html.Kendo().Grid<MDEFollowUp.Models.vmFollowUpGrid>()
.Name("FollowUpGrid")
.Columns(columns =>
{
    columns.Bound(p => p.FANo);
    columns.Bound(p => p.FAName);
    columns.Bound(p => p.OANo);
    columns.Bound(p => p.District);
    columns.Bound(p => p.OBNo);
    columns.Bound(p => p.Building);
})
   .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
    .Sortable()
    .Scrollable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
                .Read(read => read.Action("FollowUpGrid_Read", "FollowUp").Data("additionalAgencyInfo")))
        ) 

然后按一下按钮单击事件以使用新数据刷新网格,但这似乎无法识别网格分配。

            $("#btnclick").click(function () {

        var grid = $("#FollowUpGrid").data("tGrid");
        var params = {
            name: "Agency",
            id: "63190"
        };
        var dataSource = new kendo.data.DataSource({ data: params });
        //grid.rebind(params);
        grid.setDataSource(dataSource);
    })

如何在按钮中指定网格来完成此操作?

1 个答案:

答案 0 :(得分:2)

在描述的场景中有两个主要任务要处理:

  1. dataSource.data应指向数组,而不是对象
  2. 如果新数据具有完全不同的字段,则还需要替换网格列
  3. 设置新数据源和新列的一种可能方法是setOptions

    以下是一个例子:

    http://dojo.telerik.com/oWahO

    <强>更新

    如果重新加载数据后列将保持不变,则可以使用以下方法:

    $("#btnclick").click(function () {
        var grid = $("#FollowUpGrid").data("tGrid");
        var params = {
            name: "Agency",
            id: "63190"
        };
        grid.dataSource.read(params);
    })
    

    这会将nameid参数传递给action方法,并保留现有的DataSource实例及其设置。

    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-read