Editable Grid Kendo UI Asp.Net MVC

Question

Hi I am new to Kendo UI grid with ASP.Net MVC razor, I am trying to create a 3 column grid with the first column is non-editable and the other two are editable with numeric text input, this is the code i have with me right now, what else to add ? will something like .Editable(editable => editable.Mode(GridEditMode.InLine)) help but how to make the first column read only

@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)");
      })

I kind of figured out how to achieve this

@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)))

but there is a problem the values from the datasource are not getting bound to the editbale columns/ cells

You are new... so let me give you an advice... Switch to the JavaScript SDK of kendo... it will give you less headache and it will give you more control over all the functionality. I don't wanna see you wasting time making razor to work... considering that the razor thing that you code, kendo will generate javascript and inject it in your page anyways. — Adrian Salazar
Cant agree with you more ! but usage of razor is something of a constraint i have as of now — Abhilash
Constraint? explain... the same razor thing can be re-written in JS in no time. — Adrian Salazar

Abhilash Abhilash · Accepted Answer · 2015-01-15T11:46:35

After some research this is how it worked

 @(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();
                            })
))

and a wee bit of js

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

Editable Grid Kendo UI Asp.Net MVC

1 Answers