在表单提交上发布剑道网格数据 [英] Post the Kendo Grid Data on Form Submit

问题描述

我想将 Kendo Grid 中的数据发布到服务器，并将其保存到数据库中.

为此，我使用了如下形式:

@using (Html.BeginForm("MainDocumentSave","Document")){<div class="row-fluid"><div class="span10">@(Html.Kendo().Grid().Name("段").TableHtmlAttributes(new { style = "height:20px; " }).Columns(columns =>{columns.Bound(p => p.AirlineShortName).EditorTemplateName("AirlineEditor").Title("Airline").ClientTemplate("#=AirlineName#").Width(5);column.Bound(p => p.DepartureDate).Width(9);columns.Bound(p => p.Arrives).EditorTemplateName("ArrivalLocation").Title("Arrival").ClientTemplate("#=Arrives#").Width(5);column.Bound(p => p.ArrivalDate).Width(7);column.Bound(p => p.FlightNumber).Width(8);}).Editable(editable => editable.Mode(GridEditMode.InCell)).Navigatable().Sortable().Scrollable(scr => scr.Height(200)).Scrollable().DataSource(dataSource => 数据源.Ajax().批处理(真).ServerOperation(假).Events(events => events.Error("error_handler")).Model(model => model.Id(p => p.AirlineName)).Create("Editing_Create", "网格").Read("Segment_Read", "文档").Update("Editing_Update", "网格").Destroy("Editing_Destroy", "Grid")))

<button type="submit" class="btn btn-primary">保存片段}

但是提交后，Kendo Grid里面的数据没有Posted.如何将 Kendo Grid 数据发布到服务器?

解决方案

网格数据不在表单元素中.表单元素仅在编辑单元格时出现，然后被删除.您无法使用表单提交按钮将数据发布到服务器.

正确的方法是添加网格本身提供的保存"命令按钮:

@(Html.Kendo().Grid().Name("段").ToolBar(工具栏 => {工具栏.保存();//将保存按钮添加到网格工具栏})//... 其余选项 ...

或者通过在网格小部件上调用 saveChanges():

<button type="button" id="save">Save Segments</button>$("#save").on("click", function () {$("#Segment").data("kendoGrid").saveChanges();});

I want to Post the data from a Kendo Grid to the server, and save it to a database.

For this I have used form like so:

@using (Html.BeginForm("MainDocumentSave","Document"))
{
    <div class="row-fluid">
        <div class="span10">

            @(Html.Kendo().Grid<Invoice.Models.ViewModels.SegmentViewModel>()
                .Name("Segment")
                .TableHtmlAttributes(new { style = "height:20px; " })
                .Columns(columns =>
                {
                    columns.Bound(p => p.AirlineShortName).EditorTemplateName("AirlineEditor").Title("Airline").ClientTemplate("#=AirlineName#").Width(5);
                    columns.Bound(p => p.DepartureDate).Width(9);
                    columns.Bound(p => p.Arrives).EditorTemplateName("ArrivalLocation").Title("Arrival").ClientTemplate("#=Arrives#").Width(5);
                    columns.Bound(p => p.ArrivalDate).Width(7);
                    columns.Bound(p => p.FlightNumber).Width(8);
                })
                .Editable(editable => editable.Mode(GridEditMode.InCell))
                .Navigatable()
                .Sortable()
                .Scrollable(scr => scr.Height(200))
                .Scrollable()
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Batch(true)
                    .ServerOperation(false)
                    .Events(events => events.Error("error_handler"))
                    .Model(model => model.Id(p => p.AirlineName))
                    .Create("Editing_Create", "Grid")
                    .Read("Segment_Read", "Document")
                    .Update("Editing_Update", "Grid")
                    .Destroy("Editing_Destroy", "Grid")
                )
            )

        </div>
    </div>
    <button type="submit" class="btn btn-primary"> Save Segments</button>
}

But after submitting, the data inside the Kendo Grid is not Posted. How can I Post Kendo Grid Data to the Server?

解决方案

The grid data isn't in form elements. The form elements appear only when a cell is being edited, then it is removed. You can't post the data to the server by using a form submit button.

The proper way to to this would be by adding the 'save' command button that the grid provides itself:

@(Html.Kendo().Grid<Invoice.Models.ViewModels.SegmentViewModel>()
    .Name("Segment")
    .ToolBar(toolbar => {
        toolbar.Save(); // add save button to grid toolbar
    })
    // ... rest of options ...

Or by calling saveChanges() on the Grid widget:

<button type="button" id="save">Save Segments</button>

$("#save").on("click", function () {
    $("#Segment").data("kendoGrid").saveChanges();
});

这篇关于在表单提交上发布剑道网格数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！