Updating Kendo grid row on column value change - asp.net-mvc-4

Question

I am working on an MVC .Net Framework v4.5 site using Kendo MVC controls. One of the pages uses a Kendo grid which is bound to the view model. When I edit a row, there is a field which uses a dropdownlist control, and when the selection is changed, the remaining fields in the row should be updated to reflect that newly selected item..I am doing this with a JSON call which then returns the new view model to use for that row. However, I cannot figure out how to tell the grid to use the data that was returned from that JSON call. Any ideas?
EDIT:
I have attached some code. The issue now is that I can get the grid's datasource to 'refresh', but in the UpdateGridSource jscript function, at the grid.dataSource.read() line, the grid is now out of edit mode, and if I go to edit the row, the data is reverted back to how it originally was
(VIEW)
#(Html.Kendo().Grid<RedFile.Models.QuickQuoteItemView>()
.Name("QuoteItems")
.Columns(c =>
{
c.Bound(p => p.Id).Hidden();
c.Bound(p => p.Description).EditorTemplateName("Combobox");
c.Bound(p => p.ItemQty);
c.Bound(p => p.ItemPrice).Format("{0:c}");
c.Bound(p => p.Total).ClientTemplate("#= kendo.format('{0:c}', Total) #").FooterHtmlAttributes(new { style = "text-align:right;" }).ClientFooterTemplate("#= kendo.format('{0:c}', sum)#").HtmlAttributes(new { style = "text-align:right;" }).Width(100);
c.Command(cmd => { cmd.Edit(); cmd.Destroy(); }).Title("Commands").Width(200);
})
.ToolBar(tb => tb.Create())
.ClientDetailTemplateId("subitems")
.Editable(eb => eb.Mode(GridEditMode.InLine).CreateAt(GridInsertRowPosition.Bottom))
.Events(e=>e.Edit("editGrid"))
.Scrollable()
.DataSource(ds => ds
.Ajax()
.ServerOperation(false)
.Aggregates(a =>
{
a.Add(p => p.LineTotal).Sum();
a.Add(p => p.Total).Sum();
})
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.LineTotal).Editable(false);
model.Field(p => p.ItemPrice).Editable(true);
})
.Read(read => read.Action("GridSelect", "QuickQuote", new { qqid = Model.Id })).ServerOperation(false)
.Create(create => create.Action("GridCreate", "QuickQuote", new { qqid = Model.Id }))
.Update(update => update.Action("GridUpdate", "QuickQuote"))
.Destroy(destroy => destroy.Action("GridDelete", "QuickQuote"))
)
)
<script type="text/javascript">
function dropDownSelectionChanged(e) {
var dataItem = this.dataItem(e.item.index());
UpdateGridSource(dataItem.Value);
}
function UpdateGridSource(DropDownValue) {
var grid = $("#theGrid").data("kendoGrid");
grid.dataSource.transport.options.read.url = '/Controller/refreshGridDataSource?selection=' + DropDownValue;
grid.dataSource.read();
}
</script>
(CONTROLLER)
public JsonResult refreshQuickQuoteTest2([DataSourceRequest] DataSourceRequest request, string selection)
{
QuickQuoteItem qqi = db.QuickQuoteItems.FirstOrDefault(p => p.ItemID == selection);
QuickQuote quickQuoteOriginal = qqi.QuickQuote;
QuickQuoteItemView qqiv = new QuickQuoteItemView();
IEnumerable<QuickQuoteItemView> return2;
qqiv.Id = qqi.Id;
qqiv.ItemID = qqi.ItemID;
qqiv.ItemPrice = qqi.ItemPrice;
if (Session["quickQuote"] != null)
{
QuickQuote qq = (QuickQuote)(Session["quickQuote"]);
if (Session["editingQuickQuoteId"] != null)
{
int row = Convert.ToInt32(Session["editingQuickQuoteId"]);
foreach (var item in qq.QuickQuoteItems)
{
if (item.Id == row)
{
QuickQuoteItem test = new QuickQuoteItem();
StandardItem stdItem = new StandardItem();
stdItem = db.StandardItems.Find(selection);
item.ItemPrice = stdItem.Price;
item.Description = stdItem.Description;
item.ItemID = stdItem.ItemId;
}
}
}
return2 = QuickQuoteItemViewItems(qq);
}
else
{
return2 = QuickQuoteItemViewItems(quickQuoteOriginal);
}
return Json(return2.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

Answer 1

You can use the grids Ajax binding to call your controller Update Action method
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Model(model => model.Id(p => p.SampleId))
.Update(read => read.Action("SampleGrid_Update", "Controller")))
Then you need to decorate your methods datasource parameter with the DataSourceRequest attribute and return the ModelState as a DataSourceResult
[HttpPost]
public ActionResult SampleGrid_Update([DataSourceRequest] DataSourceRequest dsRequest, IEnumerable<SampleViewModel> viewModel)
{
if (viewModel != null && ModelState.IsValid)
{
// other code goes here...
}
return Json(ModelState.ToDataSourceResult());
}
You can view the samples and documentation on the Kendo website
Edit
You can bind your ajax call to the change event of your dropdownlist and when this returns you can refresh the grid data from the server using
$("#gridId").data("kendoGrid").dataSource.read();