admin管理员组文章数量:1316532
I want to submit the form which containg:
- Form Elements like textboxes & other editors.
- 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:
- Form Elements like textboxes & other editors.
- 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?
Share Improve this question edited Mar 19, 2014 at 12:07 Rahul asked Mar 19, 2014 at 7:20 RahulRahul 2,3076 gold badges35 silver badges62 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
4 Answers
Reset to default 2How 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
版权声明:本文标题:javascript - Submit Kendo Grid with Form - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1741974218a2408023.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论