In my application I am using Kendo grid and my code is as follows.
@(Html.Kendo().Grid<nVisionGlobal.Application.Pricing.Models.FuelIndex>()
.Name("FuelGrid")
.Columns(columns =>
{
columns.Bound(p => p.FSCIndexID).Width(50).Sortable(false).ClientTemplate("<input class='check_row' type='checkbox' data-clno = #= FSCIndexID # ></input>")
.HeaderTemplate("<input id='check_all' type='checkbox' > </input>");
columns.Bound(p => p.EffectiveDate).Title("Effective From").Format("{0:dd-MMM-yyyy}").Width(150);
columns.Bound(p => p.NationalUsAvg).Title("US Average");
columns.Bound(p => p.EastCoast).Title("East Coast");
columns.Bound(p => p.NewEngland).Title("New England");
columns.Bound(p => p.CentralAtlantic).Title("Central Atlantic");
columns.Bound(p => p.LowerAtlantic).Title("Lower Atlantic");
columns.Bound(p => p.Midwest).Title("Midwest");
columns.Bound(p => p.GulfCoast).Title("Gulf Coast");
columns.Bound(p => p.RockyMtn).Title("Rocky Mountain");
columns.Bound(p => p.WestCoast).Title("West Coast");
columns.Bound(p => p.California).Title("California");
columns.Command(commands =>
{
commands.Destroy();
}).Title("Commands").Width(200);
})
.AutoBind(false)
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Navigatable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.Model(model =>
{
model.Id(m => m.FSCIndexID);
model.Field(m => m.FSCIndexID).Editable(false);
model.Field(m => m.EffectiveDate).Editable(true);
})
.Create(create => create.Action("Inline_Create", "Fuel"))
.Read(p => p.Action("FuelSearch", "Fuel").Type(HttpVerbs.Get).Data("FuelSearchInfo"))
.Update("Inline_Update", "Fuel")
.Destroy(destroy => destroy.Action("#", "Fuel"))
)
.Pageable()
)
As from the above code it is clear cells are editable (GridEditMode.InCell). I have a button control to save data. When I click on button only the edited data from rows(multiple row edit) will pass to the controller.
I have written the following jQuery to captured edited rows.
<script>
if ($(this).attr("href") === "Save" || $(this).attr("href") === "Update") {
//alert('Ok')
e.preventDefault();
debugger;
$.ajax({
url: "Inline_Create/Fuel",
cache: false,
type: "POST",
contentType: "application/json",
// charset='utf-8',
data: JSON.stringify($("#FuelGrid").data("kendoGrid").dataSource.select())
});
</script>
But the code is not working.