Kendo 刷新后网格数据未正确绑定

Question

当我加载页面时，它是一个部分页面，网格填充了数据

但是一旦我像这样调用刷新方法

<button onclick="doRefresh">refresh</button>
<script type="text/javascript">
    var doRefresh = function () {
            var kendogrid = $("#this_Id").data("kendoGrid");                 
            kendogrid.refresh();
    }
</script>

它应该刷新网格，用当前绑定到网格的数据源重建它。但是网格变空了

我认为我错误地绑定了模型，因为一旦刷新网格，我就会丢失所有数据。我已经尝试绑定模型并使用 bindto 方法作为 mentioned here。

这是我的观点：

 @model List<bModel>

 @(Html.Kendo().Grid(Model)
        .Name("this_Id") // template expression, to be evaluated in the master context
    .Columns(columns =>
    {
        columns.Bound(m => m.Sequence).Title("Seq.");
        columns.Bound(m => m.JobType).Title("Job Type");
        columns.Bound(m => m.Service).Title("Service");
        columns.Bound(m => m.Status).Title("Status");
        columns.Bound(m => m.PropertyType).Title("Property Type");
        columns.Bound(m => m.PropertySubType).Title("Property SubType");
        columns.Bound(m => m.Address).Title("Address");
    })
    .Sortable()
    .Selectable(s => s.Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Row))
    .ClientDetailTemplateId("taskTemplate")
    .DetailTemplate(
               .......
        )
    .DataSource(dataSource => dataSource
        .Server()
        .Model(model => model.Id(jobItem => jobItem.Id))
    )
    .Read(read => read.Action("GetJobForBulkUpdate", "Project", new { jobId = "#=Id#" }))
    .Events(events => events.DetailExpand("detailExpand"))
)

我在面板栏中这样调用视图

@(Html.Kendo().PanelBar()
      .Name("panel-bar")
      .ExpandMode(PanelBarExpandMode.Multiple)
      .ExpandAll(true)
      .Items(panel =>
      {       
          panel.Add()
              .Text("<span id='batch-update-panel-bar-job'>JOB-TASK</span>")
              .Encoded(false)
              .Content("<div id='update-model'>" + Html.Action("BatchUpdateJob", "BatchUpdate", new { projectId = Model.Id}).ToHtmlString() + "</div>");      
      })
)

控制器方法是这样的

public ActionResult BatchUpdateJob(int projectId)
{
    mymodel = something;
    return PartialView("_MymodelPageJob", mymodel);
}

public ActionResult GetJobForBulkUpdate(int projectId, [DataSourceRequest] DataSourceRequest request)
    {            
           List<OfData> jobData = getData();
        return Json(jobData.ToDataSourceResult(request));
    }

Answer 1

更新： 用户将绑定更改为 Ajax，问题是返回的数据不正确 format.Fixing 遵循以下示例的传入数据格式ajax 格式有助于解决问题。

once I call the refresh method like this grid becomes empty. kendogrid.refresh();

使用正确Html.Action不确定你的控制器是否被击中

@Html.Action("BatchUpdateJob", "ControllerName", new { projectId = Model.Id });

你只是在没有数据的情况下在网格上调用刷新，当然它会显示为空。所以你想根据某些 setTimeout 自动刷新网格，因为目标数据在一定时间间隔后可能会有所不同。

不要使用这个！你用错了方法查看文档并清除你的基础知识

    var kendogrid = $("#this_Id").data("kendoGrid");
    console.log(kendogrid.dataItem());
    kendogrid.refresh();

改用这个 -

 //read will request the server and reload only reload datasource
    $('#this_Id').data('kendoGrid').dataSource.read();

    //refresh will re-render items in grid from the current datasource
    $('#this_Id').data('kendoGrid').refresh();

现在 ---- 应用户要求，我正在为 AJAX 和 服务器端绑定 .

添加示例演示

AJAX 绑定： 如此处关于 telerik 文档的讨论 Ajax binding

ViewModel

 public class ProductViewModel
    {
        public int ProductID { get; set; }
        public string ProductName { get; set; }
        public short? UnitsInStock { get; set; }
    }

Razor 语法中的网格

  @(Html.Kendo().Grid<KendoGridAjaxBinding.Models.ProductViewModel>()
      .Name("grid")
      .DataSource(dataSource => dataSource
          .Ajax() 
      //Set the action method which will return the data in JSON format.    
          .Read(read => read.Action("Products_Read", "Home")) 

       )
       )
      .Columns(columns =>
      {
          columns.Bound(product => product.ProductID);
          columns.Bound(product => product.ProductName);
          columns.Bound(product => product.UnitsInStock);
      })
      .Pageable()
      .Sortable()
)

控制器

 public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request)
        {
            using (var northwind = new NorthwindEntities())
            {
                IQueryable<Product> products = northwind.Products;
                //Convert the Product entities to ProductViewModel instances.
                DataSourceResult result = products.ToDataSourceResult(request, product => new ProductViewModel
                        {
                        ProductID = product.ProductID,
                        ProductName = product.ProductName,
                        UnitsInStock = product.UnitsInStock
                        });
                return Json(result);
            }
        }

服务器端绑定： 如此处有关 telerik 文档的讨论 Server side binding

有几种方法可以做到这一点：

绑定到视图模型
绑定到 ViewData 或 ViewBag 中的项目使用
BindTo 方法将附加数据传递给操作方法

这里是讨论服务器端绑定的github解决方案下载吧看看你错过了什么 - Server side binding

Kendo 刷新后网格数据未正确绑定

Kendo Grid data not binding correctly after refresh

c#

asp.net

asp.net-mvc

telerik