This is a migrated thread and some comments may be shown as answers.

Send Grid Model to Controller

3 Answers 1108 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jako
Top achievements
Rank 1
Jako asked on 26 Jun 2014, 11:43 AM
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>

3 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 30 Jun 2014, 08:30 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Reinier
Top achievements
Rank 1
answered on 28 Mar 2019, 02:03 PM

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

0
Georgi
Telerik team
answered on 01 Apr 2019, 09:53 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Jako
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Reinier
Top achievements
Rank 1
Georgi
Telerik team
Share this question
or