发布剑道网格值

Posted 2023-05-07

【中文标题】发布剑道网格值

【英文标题】：Post kendo grid values

【发布时间】：2014-12-15 13:21:13

【问题描述】：

下面是剑道网格

@(html.Kendo().Grid<CS.Web.Models.People.GroupDetailModel>()
  .Name("Grid")
  .Events(e => e.DataBound("LineItems_Databound"))
  .HtmlAttributes(new  style = "overflow:hidden;", @class = "normalgrid" )
  .Columns(columns =>
   
      columns.Bound(p => p.GroupID).Hidden();
      columns.Bound(p => p.GroupName).Title("Group Name").Width(30);
      columns.Bound(p => p.Department).Title("Department Name").Width(30);
      columns.Bound(p => p.IsBlindSettingsEnable).Title("Blind Group")
        .ClientTemplate("<input  type=\"checkbox\" #= IsBlindSettingsEnable ? \"checked=checked\": \"\" # enabled=\"enabled\"  />")
        .Width(30);
      columns.Bound("Department").Title("Remove")
        .ClientTemplate("<a href='javascript:void(0)' Title='Remove'  onclick='return removeUserGroupRelation(+#=GroupID#+);'> <img alt='Remove' src='" + @Url.Content("~/Content/Images/delete_icon.png") + "' /></a>")
        .Width(30);
   )
   .Sortable()
   .Scrollable(scrollable => scrollable.Virtual(false))
   .DataSource(dataSource => dataSource
     .Ajax()
     .Read(read => read.Action("getAssignedGroups", "People")
       .Data("setRoutesValues")
   ) 

   //new  MerchantId = ViewBag.MerchantId, StartDate = Model.StartDate, EndDate = Model.EndDate 
                                )
  .TableHtmlAttributes(new  @class = "grid_1" )
)

下面是javascript代码

var userID = '@ViewBag.UserID'
$.ajax(
    url: '@Url.Action("SaveGroupsUserDetails")',
    type: "POST",
    dataType: "json",
    data:  models: kendo.stringify($("#Grid").data("kendoGrid").dataSource.view()), UserID: userID ,
    success: function (result) 
    
);

在我的剑道网格中有复选框列。当我在 CLIENT sied（在浏览器中）选中或取消选中复选框时。并且通过 give javascript $.ajax post 发布，它不会发布我已更改的复选框的值在客户端浏览器上，它显示它从服务器端绑定的值。

所以，我的问题是我希望更新的值发布在服务器上，这些值在客户端浏览器上进行了修改。

如果你能给我答案，我将非常感激。

【参考方案1】：

您应该在选中复选框时更新您的数据源：

...
    .ClientTemplate("<input  type=\"checkbox\" #= IsBlindSettingsEnable ? \"checked=checked\": \"\" # enabled=\"enabled\" onclick='setChecked(this)' />")
...


function setChecked(cb) 
    var row = $(cb).closest("tr");
    var item = grid.dataItem(row);
    item.IsBlindSettingsEnable = cb.checked;

现在您的数据源已与视图同步

【参考方案2】：

我相信这是因为您查看的是数据源的实际值，而不是网格本身。您的网格不可编辑。您手动将输入投入到您的网格中，这些不会影响数据源。

您可以采用两种方法进行此类更新。

---

您可以按照自己的设置方式离开网格并仅通过 Java 脚本处理此更新。 为此，您需要查找所有需要使用 JQuery 手动更新的数据项。

您可以在该网格中查找所有选中的复选框，然后手动获取相关的 dataItem。这是一个简短的示例，展示了如何从网格中的一行获取数据项。

//checkbox is a JQuery object referencing one of your checkboxes
var row = $(checkbox).closest("tr");
var grid = $("#grid").data("kendoGrid");
var data = grid.dataItem(row);

一旦您拥有所有相关的数据项，您就可以发布您的更新。然后，您必须重新加载网格才能获得这些项目的更新状态。

总的来说，这不是使用剑道网格进行此类更新的首选方式。

---

我建议第二种方法。

这是我将从以下站点提取示例的站点：http://demos.telerik.com/aspnet-mvc/grid/editing

首先，您需要使您的剑道网格可编辑.Editable(editable => editable.Mode(GridEditMode.InCell))。您将不再需要添加复选框的自定义模板。当您现在编辑网格时，它会自动添加它们。

然后您需要将数据源设置为具有更新功能并让您的服务器期待此更新。

您的数据源绑定

.DataSource(dataSource => dataSource        
    .Ajax()         
    .Batch(true)        
    .Read("Editing_Read", "Grid")
    .Update("Editing_Update", "Grid")
)

还有你的服务器端代码

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Editing_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<ProductViewModel> products)
    
        if (products != null && ModelState.IsValid)
        
            foreach (var product in products)
            
                productService.Update(product);
            
        

        return Json(products.ToDataSourceResult(request, ModelState));
    

通过返回此 Json 对象，您的网格将自动更新为新值。这是编辑网格的首选方式。