可编辑网格剑道 UI Asp.Net MVC答案

【问题标题】：Editable Grid Kendo UI Asp.Net MVC可编辑网格剑道 UI Asp.Net MVC
【发布时间】：2015-01-15 10:08:26
【问题描述】：

您好，我是使用 ASP.Net MVC 剃须刀的 Kendo UI 网格的新手，我正在尝试创建一个 3 列网格，其中第一列不可编辑，另外两列可通过数字文本输入进行编辑，这是代码我现在有，还有什么要补充的？ .Editable(editable => editable.Mode(GridEditMode.InLine)) 之类的东西会有所帮助，但如何使第一列只读

@Html.Kendo().Grid(Model.CpfPayableYearlyDetail.CpfPayableMonthlyDetails).Name("CpfPayableMonthlyDetails").Columns(columns =>
      {
          columns.Bound(p => p.Month).Title("Month");
          columns.Bound(p => p.OrdinaryWagePaid).Title("Ordinary Wages (OW)");
          columns.Bound(p => p.AdditionalWagePaid).Title("Additional Wages (AW)");
      })

我想出了如何实现这一点

@Html.Kendo().Grid(Model.CpfPayableYearlyDetail.CpfPayableMonthlyDetails).Name("CpfPayableMonthlyDetails").Columns(columns =>
      {
          columns.Bound(p => p.Month).Title("Month");
          columns.Bound(p => p.OrdinaryWagePaid).Title("Ordinary Wages (OW)").ClientTemplate(Html.Kendo().NumericTextBox().Name("OW").ToClientTemplate().ToHtmlString());
          columns.Bound(p => p.AdditionalWagePaid).Title("Additional Wages (AW)").ClientTemplate(Html.Kendo().NumericTextBox().Name("AW").ToClientTemplate().ToHtmlString());
      }).Editable(editable => editable.Mode(GridEditMode.InCell)).DataSource(dataSource => dataSource
            .Ajax().Model(model => model.Id(m => m.Month)))

但存在问题，来自数据源的值没有绑定到可编辑列/单元格

【问题讨论】：

你是新手......所以让我给你一个建议......切换到 kendo 的 JavaScript SDK......它会让你不那么头疼，它会让你更好地控制所有功能。我不想看到你浪费时间让剃须刀工作......考虑到你编写的剃须刀东西，剑道会生成 javascript 并将其注入你的页面。
不能再同意你了！但是剃须刀的使用是我现在的一个限制
约束？解释一下......同样的剃须刀可以立即用 JS 重写。

标签： asp.net-mvc kendo-ui kendo-grid

【解决方案1】：

经过一番研究，这就是它的工作原理

 @(Html.Kendo().Grid(Model.CpfPayableMonthlyDetails)
    .Name("CpfPayableMonthlyDetails")
    .Editable(editable => editable.Mode(GridEditMode.InCell))
     .Columns(columns =>
     {
         columns.Bound(p => p.Month).ClientTemplate("#= Month #" +
           "<input type='hidden' name='CpfPayableMonthlyDetails[#= index(data)#].Month' value='#= Month #' />"
         );
         columns.Bound(p => p.OrdinaryWagePaid).ClientTemplate("#= OrdinaryWagePaid #" +
           "<input type='hidden' name='CpfPayableMonthlyDetails[#= index(data)#].OrdinaryWagePaid' value='#= OrdinaryWagePaid #' />"
         ).ClientFooterTemplate("#=sum#"); 
         columns.Bound(p => p.AdditionalWagePaid).ClientTemplate("#= AdditionalWagePaid #" +
           "<input type='hidden' name='CpfPayableMonthlyDetails[#= index(data)#].AdditionalWagePaid' value='#= AdditionalWagePaid #' />"
         ).ClientFooterTemplate("#=sum#");
     })
.DataSource(dataSource => dataSource.Ajax()
     .Model(m =>
     {
         m.Id(p => p.Month);
         m.Field(p => p.Month).Editable(false);
         m.Field(p => p.OrdinaryWagePaid).Editable(true);
         m.Field(p => p.AdditionalWagePaid).Editable(true);
     })
     .Batch(true)
         .ServerOperation(false).Aggregates(aggregates =>
                            {
                                aggregates.Add(p => p.OrdinaryWagePaid).Sum();
                                aggregates.Add(p => p.AdditionalWagePaid).Sum();
                            })
))

还有一点js

 function index(dataItem) {
    var data = $("#CpfPayableMonthlyDetails").data("kendoGrid").dataSource.data();
    return data.indexOf(dataItem);
}

【讨论】：