Grid Save functionality

[Murugan]

Hello,

I have few text box, drop down list controls and grid entry also. I would like to hit the save button once which should save the grid entries and other control values as well. I would disable the grid save button and I will use the main save. I have model which has the sub-collection binds the value to the grid. For example,

Model
-------------
Name,  -> textbox
Age, -> textbox
Qualifications (collections) - user can add n number of entries -> grid

Qualification collection will have
Degree,
Year of completion,
Grade.
 
I am able to display the values when I bind with the sub-collection. When I hit the save button, the model sub-collection does not get update with the entered / modified values in the server-side. I have tried the below link also which could not solve my issue.
http://www.kendoui.com/forums/mvc/grid/grid-toolbar-functioality-outside-grid.aspx

Is there any other ways to solve this issue?

Regards,
Murugan

[Murugan]

Ajax grid values does not update the model when I hit the save.

----------Model----------------
public class ExpModel
{
public string Name { get; set; }
public int Age { get; set; }
public List<Qualifications> Qualifications { get; set; }
}
public  class Qualification {
public string Degree { get; set; }
public DateTime Yearofcompletion { get; set; }
public string Grade { get; set; } }

----------------------------------partial view---------------------------------
<script type="text/javascript">$(document).ready(function () {
// variable to hold request
var request;$('form').submit(function (event) {
var grids = $("div[data-role='grid']");
for (var i = 0; i < grids.length; i++) {
//accessing the current Grid
var current = $(grids[i]).data("kendoGrid");//getting the Grid data
var data = current.dataSource.data();
for (var j = 0; j < data.length; j++) {
var currentItem = data[j];
//Perform custom checks over the item's model
}current.saveChanges();
}
var serializedData = $(this).serialize();// fire off the request
request = $.ajax({
url: '/Emp/SaveInfo',
cache: false,
type: 'post',
data: serializedData
});// callback handler that will be called on success
request.done(function (response, textStatus, jqXHR) {if (response.split('~')[0] == '@AppEnums.RequestStatus.Done.ToString()') {AfterRequestSuccess();} else {
//unexpectedError
alert("Save failed. Error - " + response.split('~')[1]);
}
});// callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown) {});
// prevent default posting of form
event.preventDefault();});});</script>
@using (Html.BeginForm())
{
<div id="ContentEmpInfo">
@{
ViewContext.Writer.Write
(
Html.Action("PartialViewEmpInfoContent", Model)
);
}
</div>
<br/>
<input type="submit" class="Save" name="btnSave" value="Save" />
}
------------------------------
PartialViewEmpInfoContent.cshtml
------------------------------
Name: 
@Html.TextBoxFor(model => model.Name, new {@class = "k-textbox"})
Age:
@Html.TextBoxFor(model => model.Age, new {@class = "k-textbox"}) <table>Qualification List:
<br />@(Html.Kendo().Grid(Model.Qualifications)
.Name("gvQualifications")
.Columns(cols => 
{
cols.Bound(emp => emp.Degree).Title("Degree").Width(100);
cols.Bound(emp => emp.Yearofcompletion).Title("Year of Completion").Format("{0:dd/MM/yyyy}").Width(100);
cols.Bound(emp => emp.Grade).Title("Grade").Width(100);
cols.Command(comm => comm.Destroy()).Width(100);
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.Editable(edit => edit.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(5)
.ServerOperation(false)
.Model(model =>
{
model.Id(emp => emp.Id);
})
.Create("Create", "Emp")
.Update("Update", "Emp")
.Destroy("Delete", "Emp")
.Read(read => read.Action("Read", "Emp", new { ID = "#=Id#" }))
))
-------------------------Controller-----------------------------
[HttpPost]
[OutputCache(NoStore = true, Duration = 0)]
public ActionResult SaveInfo(EmpInfoModel empInfoModel)
{ }
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<EmpInfoModel> empInfoModel)
{}
When I click on the main save button (not the grid toolbar save), it hits the server-side methods where model is null. The collection does not update the entered value into the grid.
Can someone help me to resolve this issue?
Do I need to change the HTML.beginform to Ajax.beginform?

[Petur Subev]

Hello,

The Grid is not a form element and it is not intended to be submitted to the server as a regular input element. The Grid is a separate widget that uses its own transport (Ajax or Server based on your settings) to modify the records it displays.

Anyway we created a code library project which demonstrates similar way of submitting data (via hidden fields inside of the column templates). I personally do not recommend using it. Also keep in mind that the approach has its own limitations.

http://www.kendoui.com/code-library/mvc/grid/submit-form-containing-grid-along-with-other-input-elements.aspx

Kind Regards,
Petur Subev
Telerik