Send Grid Model to Controller

[Jako]

Hi everyone

I have been working with the Telerik AJAX controls for the past year or two, but now I am busy building my first Kendo MVC application.

I have built a grid that has a check box, but how can I "post" my model to a Action in my controller so that I can loop through each selected item and process?

Here is the grid, but I am confused as to how I would post my model to process the selected items?

<div class="row">
    @(Html.Kendo().Grid<WishListModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(c => c.IsSelected).ClientTemplate("<input type='checkbox' />");
                columns.Bound(c => c.Column1);
                columns.Bound(c => c.Column2);
                columns.Bound(c => c.Date).Format("{0:yyyy-MM-dd}");
            })
            .HtmlAttributes(new { style = "height: 380px;" })
            .Scrollable()
            .Groupable()
            .Filterable()
            .Sortable()
            .ColumnMenu()
            .Selectable(s => s.Mode(GridSelectionMode.Multiple))
            .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("WishList_Read", "Public"))
                .Model(model => model.Id(wl => wl.WishListId))
            )
    )
</div>

[Vladimir Iliev]

Hi Jako,

Please check the example below how to post the checked rows from the Grid to the Controller using jQuery and Grid client-side API:

function getCheckedRows() {
    var grid = $("#grid").data("kendoGrid");

    var models = [];
    grid.table.find("input[type=checkbox]:checked").each(function () {
        var row = $(this).closest("tr");
        var model = grid.dataItem(row);
        models.push(model);
    })


    $.ajax({
        url: "/Home/Update",
        data: JSON.stringify({ orders: models }),
        dataType: "json",
        type: "POST",
        contentType: 'application/json; charset=utf-8'
    });
}

Regards,
Vladimir Iliev
Telerik

 

 

[Reinier]

Hi,

Can you help me how I can pass the selected row to Ajax call?

 

 

       function saveRecord(e) {
            e.preventDefault();
            var models = [];
            var row = $(this).closest("tr");
            var grid = $("#grid_Index_1").data('kendoGrid');
            var model = grid.dataItem(row);
            models.push(model);

            $.ajax({
                url: "/User/Update",
                type: 'POST',
                datatype: "application/json",
                data: JSON.stringify(models),
                async: true,
                success: function (result) {
-----

Regards, Reinier Pechler

[Georgi]

Hi Reinier,

The provided saveRecord function should work if it is a click handler of a command within the row.

When is the saveRecord executed? Is it a click handler of a command which is in the row?

Furthermore, the $.ajax method itself stringifies the data, therefore you should pass the data as a js object.

e.g.

// ajax request

            $.ajax({
                url: "/User/Update",
                type: 'POST',
                datatype: "application/json",
                data: {models: JSON.parse( JSON.stringify(models))},
                async: true,
                success: function (result) {

// action method

 public ActionResult Update(List<User> models)

Have in mind that the above will work only if the context of the saveRecord function is a row.


Regards,
Georgi
Progress Telerik