Обновление строки сетки Кендо при изменении значения столбца

Question

Я работаю над сайтом MVC .Net Framework v4.5 с использованием элементов управления Kendo MVC. На одной из страниц используется сетка Kendo, привязанная к модели представления. Когда я редактирую строку, есть поле, в котором используется элемент управления выпадающим списком, и когда выбор изменяется, остальные поля в строке должны быть обновлены, чтобы отразить этот новый выбранный элемент. Я делаю это с помощью вызова JSON, который затем возвращает новую модель представления для этой строки. Однако я не могу понять, как сообщить сетке использовать данные, которые были возвращены из этого вызова JSON. Есть идеи?

EDIT:

Я установил код. Проблема в том, что я могу получить источник данных сетки для «обновления», но в функции jscript UpdateGridSource, в строке grid.dataSource.read(), сетка теперь выходит из режима редактирования, и если я перейду к редактированию строка, данные вернулся обратно, как это первоначально было

(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

Вы можете использовать сетки Ajax связывания для вызова контроллера метод Update Action

.DataSource(dataSource => dataSource 
.Ajax() 
.ServerOperation(false) 
.Model(model => model.Id(p => p.SampleId)) 
.Update(read => read.Action("SampleGrid_Update", "Controller"))) 

Затем вам нужно украсить ваш методы параметра источника данных с атрибутом DataSourceRequest и вернуть ModelState как 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()); 
    } 

Вы можете просмотреть образцы и документацию по кендо website

Редактировать

Вы можете связать свой вызов ajax с событием изменения вашего раскрывающегося списка, и когда это вернет вас может обновлять данные сетки с сервера с помощью

$("#gridId").data("kendoGrid").dataSource.read();