MVC | Kendo Grid | Pass the data from View to the controller - asp.net-mvc

Question

I am using a kendoui Grid which is populated with some data. The grid has one Template column, of check-box and some other columns with Client Template that includes a Text-box in it.
I need to now pass the data of the rows, that are selected using a check-box, to the controller action.
The updated values in the text-box should be passed to the controller.
Let me know if anyone has the solution for the same.
This is the Grid
#(Html.Kendo().Grid<MMM.Lumos.Entities.CustomEntities.TestPlanTestPointMappingViewModel>()
.Name("ATPGrid")
.Columns(columns =>
{
columns.Bound(p => p.IsSelected).ClientTemplate("<input type='checkbox' value='#= IsSelected #' " + "# if (IsSelected) { #" + "checked='checked'" + "# } #" + "/>").Width(40);
columns.Bound(p => p.TestPointName).Filterable(false).Width(60);
columns.Bound(p => p.PassThreshold).ClientTemplate(Html.Kendo().IntegerTextBox().Name("mp_#=TestPointId#").Min(0).HtmlAttributes(new { value = "#=PassThreshold#", style = "width: 50px;" }).ToClientTemplate().ToHtmlString()).Width(60);
columns.Bound(p => p.FailThreshold).ClientTemplate(Html.Kendo().IntegerTextBox().Name("mp_#=TestPointId#").Min(0).HtmlAttributes(new { value = "#=FailThreshold#", style = "width: 50px;" }).ToClientTemplate().ToHtmlString()).Width(60);
})
.Scrollable()
//.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("ATPGrid_Read", "TestPlan"))
)
)
I have a submit button
<input type="submit" name="Add" formmethod="post" onclick="PostData()" value="Add" />
Javascript function
<script>
function PostData() {
var griddata = $("#ATPGrid").data("kendoGrid");
alert(JSON.stringify({ griditems: griddata.dataSource.view() }));
//$.ajax(
// {
// type: 'POST',
// url: '/configuration/testplan/Add',
// dataType: 'json',
// contentType: "application/json; charset=utf-8",
// data: JSON.stringify({ griditems: griddata.dataSource.view() }),
// success: function (result) {
// alert('success');
// }
// });
}
</script>
I need to get the values of this grid on click of add button. As you can see i have a Client Template Columns, Check-box and Text-box in the grid.
I need to get the values from this text-box and pass it to the controller.
It would be great if only those which are selected using check-box should be passed to the controller.

Answer 1

I am not sure whether there is simple way of passing values from View to Controller in Kendo UI Grid. But i have followed the below way in third party MVC Grid to pass the checkbox values. You can bind this function to button click event. It could be too long for simple operation. May be it could be useful for you which you can optimize for your needs.
function PostData(sender, args) {
        var tempCheckedRecords = new Array();
        var gridobj = $find("Grid1"); // getting Grid object. Modify it for KendoUI grid.
        if (sender.checked == true) {
            ... //retrieve the records here
            tempCheckedRecords.push(records[0]); // pass the selected records in the array
        }
        var tempRecords = new Array();
        $.each(tempCheckedRecords, function (index, element) {
            var record = {};
            record["Column0"] = element.IsSelected; // column names in Grid
            record["Column1"] = element.TestPointName; // you can get the text box values in the element.
            record["Column2"] = element.PassThreshold;
            tempRecords.push(record);
        });
        var params = {};
        var visibleColumns = gridobj.get_VisibleColumnName();
        $.each(tempRecords, function (i, record) {
            $.each(visibleColumns, function (j, value) {
                params["Test[" + i + "]." + this] = record[value];
            });
        });
        $.ajax({
            type: 'post',
            url: "/configuration/testplan/Add",
            datatype: 'json',
            data: params,
            success: function (data) {
                return data;
            }
        });
    }

Answer 2

Explore adding an AJAX update call in your Kendo Grid:
.Datasource(datasource => datasource.Ajax
.Read(read => read.Action(...))
.Update(update => update.Update("UpdateAction", "Controller))
Then in your controller add an Action:
public ActionResult UpdateAction(IEnumerable<NewsModel> model)
{
//...do stuff
}