Question

我对Kendo UI相对较新。我有这样的代码设置。这基本上显示可编辑的网格，每列都有下拉列表，添加另一条记录将添加一行新的下拉列表。无论如何我可以一次保存所有行而不是单独更新每一行吗？我的代码是这样设置的。

<div class="row">
    <div class="col-md-12 ">
        <h5>Markets:</h5>
        @(Html.Kendo().Grid<ETS_Telerik.Models.AddMarketViewModel>()
            .Name("MarketGrid")
            .Columns(columns =>
            {
                columns.Bound(p => p.Country).ClientTemplate("#: Country.Name #").Width("200px");
                columns.Bound(p => p.State).ClientTemplate("#: State.StateName #").Title("State").Width("200px") ;
                columns.Bound(p => p.Name).Width(200);
                columns.Command(command => { command.Destroy(); });
            })
            .ToolBar(toolbar => toolbar.Create())
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .DataSource(dataSource => dataSource
                .Ajax()
                    .Model(model =>
                    {
                        model.Id(p => p.ID);
                        model.Field(p => p.Country).DefaultValue(ViewData["defaultCountry"]);
                        model.Field(p => p.State).DefaultValue(ViewData["defaultState"]);
                        model.Field(p => p.Name).DefaultValue(ViewData["defaultName"]);
                    })
                .Create(update => update.Action("CreateEmployee", "User"))
                .Read(read => read.Action("ReadEmployees", "User"))
                .Destroy(del=>del.Action("Delete","User"))
                .Update(update => update.Action("UpdateEmployees", "User")))
                )
    </div>
</div>

Answer 1

使用以下代码可以实现整个数据更新。

$('#updateall').click(function (){
        var displayedData = $("#your-gridid").data().kendoGrid.dataSource.view();
        var Childfood=[];
        for(var i=0;i<displayedData.length;i++)
        {
            var fooddata = {
                "ChildId"           :   displayedData[i].ChildId,
                "MorningFood"       :   $("#MorningFood").val(),

            }
            Childfood.push(fooddata);
        }
        Childfood = JSON.stringify({ 'Childfood': Childfood });
        var postData = { Childfood: Childfood};
        $.ajax({
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            type: 'POST',
            url: '/your-controller/method',
            data: Childfood,
            success: function () {

            },
            failure: function (response) {
            }
        });
    });


    [HttpPost]
        public JsonResult Recordallchildfood(List<Childfood> Childfood)
        {

        var datalist=Childfood;
        //---------
        //your operation bulk update to sql
        //---------

        return Json(returnlist, JsonRequestBehavior.AllowGet);
    }

Kendo UI网格保存

1 个答案: