Question

您好我是使用ASP.Net MVC razor的Kendo UI网格的新手，我正在尝试创建一个3列网格，第一列是不可编辑的，另外两个是可编辑的数字文本输入，这是代码我现在和我在一起，还有什么要补充的？会有类似.Editable（editable =＆gt; 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)))

但是数据源中的值没有绑定到editbale列/单元格存在问题

Answer 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);
}

可编辑网格Kendo UI Asp.Net MVC

1 个答案: