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 editable 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
– Adrian Salazar, Commented Jan 15, 2015 at 10:31
Cant agree with you more ! but usage of razor is something of a constraint i have as of now — Abhilash
– Abhilash, Commented Jan 15, 2015 at 11:47
Constraint? explain... the same razor thing can be re-written in JS in no time. — Adrian Salazar
– Adrian Salazar, Commented Jan 15, 2015 at 12:52

Abhilash · Accepted Answer · 2015-01-15 11:46:35Z

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

Collectives™ on Stack Overflow

Editable Grid Kendo UI Asp.Net MVC

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related