Question

我正在使用Kendo MVC控件开发MVC .Net Framework v4.5站点。其中一个页面使用绑定到视图模型的Kendo网格。当我编辑一行时，有一个使用下拉列表控件的字段，当更改选择时，应该更新行中的其余字段以反映新选择的项目。我正在使用JSON调用执行此操作返回用于该行的新视图模型。但是，我无法弄清楚如何告诉网格使用从该JSON调用返回的数据。有什么想法吗？

编辑：

我附上了一些代码。现在的问题是我可以将网格的数据源设置为'刷新'，但是在UpdateGridSource jscript函数中，在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());
    }

您可以查看Kendo website

上的示例和文档

修改

您可以将ajax调用绑定到下拉列表的更改事件，当它返回时，您可以使用
从服务器刷新网格数据
$("#gridId").data("kendoGrid").dataSource.read();

在列值更改时更新Kendo网格行

1 个答案: