CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net-mvckendo-ui
Rahul
Rahul

Reputation: 2307

Submit Kendo Grid with Form

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: Form with Kendo Grid

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?

Upvotes: 2

Views: 8319

Answers (4)

Shazhad Ilyas
Shazhad Ilyas

Reputation: 1193

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

Upvotes: 2

schaefea
schaefea

Reputation: 156

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.

Upvotes: 1

Petur Subev
Petur Subev

Reputation: 20203

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.

Upvotes: 2

Ashwini Verma
Ashwini Verma

Reputation: 7525

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.

Upvotes: 1

Related Questions