javascript - Submit Kendo Grid with Form - Stack Overflow

admin管理员组

文章数量:1331091

I want to submit the form which containg:

1. Form Elements like textboxes & other editors.
2. Kendo Grid which is Editable.

As you can see in the image below:

My view code of view is:

@model ProjectName.ReferenceViewModel
@using (Html.BeginForm("MainDocumentSave", "Document", FormMethod.Post, new { @class="MainForm"}))
{
    <input type="text" name="ParentReferenceID" id="ParentReferenceID" value="@Model.ID"/>

    <input type="text" name="ParentReferenceName" id="ParentReferenceName" value="@Model.Name"/>



 @(Html.Kendo().Grid<Invoice.Models.ViewModels.ReferenceViewModel>()
                .Name("Reference")
                //.TableHtmlAttributes(new { style = "height:160px; " })
                .Columns(columns =>
                {
                    columns.Bound(p => p.ReferenceID).Hidden(true).ClientTemplate("#= ReferenceID#" + "<input type='hidden' class='ReferenceID' name='Reference[#= index(data)#].ReferenceID' value='#=ReferenceID#' />");
                    columns.Bound(p => p.ReferenceName).HeaderHtmlAttributes(new { title = "Reference Name" }).Title("Reference").Width(10).ClientTemplate("#= ReferenceName#" + "<input type='hidden' class='ReferenceName'name='Reference[#= index(data)#].ReferenceName' value='#=ReferenceName#' />");
                    columns.Bound(p => p.ReferenceDescription).HeaderHtmlAttributes(new { title = "Reference Description" }).Title("Description").Width(10).ClientTemplate("#= ReferenceDescription#" + "<input type='hidden' class='ReferenceDescription' value='#=ReferenceDescription#' />");
                    //columns.Bound(p => p.DefaultReferenceValue).Title("Value").Width(15).EditorTemplateName("ReferenceValidValue").HtmlAttributes(new { @class = "DefaultValue" }).ClientTemplate("#= DefaultReferenceValue#" + "<input type='hidden' class='DefaultReferenceValue' value='#=DefaultReferenceValue#' />");


                })
                .Editable(ed => ed.Mode(GridEditMode.InCell))
                .Navigatable()
                .HtmlAttributes(new { style="height:190px;"})
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Batch(true)
                    .ServerOperation(false)
                )
                )

}

The problem here is that when submitting the Form I am only able to post the editor's values but not the Kendo Grid's values.

How can I send all the values?

I want to submit the form which containg:

1. Form Elements like textboxes & other editors.
2. Kendo Grid which is Editable.

As you can see in the image below:

My view code of view is:

@model ProjectName.ReferenceViewModel
@using (Html.BeginForm("MainDocumentSave", "Document", FormMethod.Post, new { @class="MainForm"}))
{
    <input type="text" name="ParentReferenceID" id="ParentReferenceID" value="@Model.ID"/>

    <input type="text" name="ParentReferenceName" id="ParentReferenceName" value="@Model.Name"/>



 @(Html.Kendo().Grid<Invoice.Models.ViewModels.ReferenceViewModel>()
                .Name("Reference")
                //.TableHtmlAttributes(new { style = "height:160px; " })
                .Columns(columns =>
                {
                    columns.Bound(p => p.ReferenceID).Hidden(true).ClientTemplate("#= ReferenceID#" + "<input type='hidden' class='ReferenceID' name='Reference[#= index(data)#].ReferenceID' value='#=ReferenceID#' />");
                    columns.Bound(p => p.ReferenceName).HeaderHtmlAttributes(new { title = "Reference Name" }).Title("Reference").Width(10).ClientTemplate("#= ReferenceName#" + "<input type='hidden' class='ReferenceName'name='Reference[#= index(data)#].ReferenceName' value='#=ReferenceName#' />");
                    columns.Bound(p => p.ReferenceDescription).HeaderHtmlAttributes(new { title = "Reference Description" }).Title("Description").Width(10).ClientTemplate("#= ReferenceDescription#" + "<input type='hidden' class='ReferenceDescription' value='#=ReferenceDescription#' />");
                    //columns.Bound(p => p.DefaultReferenceValue).Title("Value").Width(15).EditorTemplateName("ReferenceValidValue").HtmlAttributes(new { @class = "DefaultValue" }).ClientTemplate("#= DefaultReferenceValue#" + "<input type='hidden' class='DefaultReferenceValue' value='#=DefaultReferenceValue#' />");


                })
                .Editable(ed => ed.Mode(GridEditMode.InCell))
                .Navigatable()
                .HtmlAttributes(new { style="height:190px;"})
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Batch(true)
                    .ServerOperation(false)
                )
                )

}

The problem here is that when submitting the Form I am only able to post the editor's values but not the Kendo Grid's values.

How can I send all the values?

• javascript
• jquery
• html
• asp-mvc
• kendo-ui

Share Improve this question Follow edited Mar 19, 2014 at 12:07 Rahul asked Mar 19, 2014 at 7:20 RahulRahul 2,30766 gold badges3535 silver badges6262 bronze badges 2

• It's hard to tell without the code from your grid instantiation, model and controller but have a look at this example. – Andrei V Commented Mar 19, 2014 at 7:29
• @AndreiV You given link's Example isn't working. I have edited the Question with more details about the View. – Rahul Commented Mar 19, 2014 at 8:25

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

How to submit Kendo Grid models along with a form is demonstrated and explained in this code library article.

Basically the idea is that for each column you have to specify a template which has a hidden input that holds the value for that item.

Please see my answer in the following link

how to post values of grid to controller action.

Post Kendo Grid data to Controller in MVC

Can't you access Model instead of find Kendo grid?

Try to get Invoice.Models.ViewModels.ReferenceViewModel in your controller since you have already bound to the Kendo Grid.

When posting a collection, such as the rows in a table, each of the names of the inputs needs to have array elements appended onto the name.

Here is the rendered HTML that would post an array of two people:

<form action="/Document/MainDocumentSave">
  <table>
    <tr>
      <input name="person.PersonID[0]" type="hidden">1</input>
      <input name="person.FirstName[0]" type="text">Bill</input>
    </tr>
    <tr>
      <input name="person.PersonID[1]" type="hidden">2</input>
      <input name="person.FirstName[1]" type="text">Bob</input>
    </tr>
  </table>
</form>

The values in the brackets of the array need to be unique. The easiest "unique values" in a collection are numeric: [0], [1], [2], etc.

The only reason I mention this is because when adding/removing rows from a table, you can get gaps like [0], [1], [5], [6], etc. You don't need to do extra logic to make sure that the values are continuous.

本文标签： javascriptSubmit Kendo Grid with FormStack Overflow