Post Grid selection to Controller Action

[Kyle Crabtree]

I have a working Grid control that allows for selection and now I'm trying to find out how to submit the selected data to the server.  Any thoughts on the best approach for this?  This grid control is used along side other elements on the page that all need to be submitted together.

@model List<GlobalCAP.Business.Entities.GiftContact>

@(Html.EJ().Grid<GlobalCAP.Business.Entities.GiftContact>("Grid")
            .Datasource(Model)
            .AllowPaging()
            .EnableResponsiveRow()
            .IsResponsive()
            .AllowSelection()
                .SelectionType(SelectionType.Multiple)
                //.SelectionSettings(select => { select.SelectionMode(mode => { mode.AddMode(SelectionMode.Row); }); })
            //.PageSettings(p => p.PageSize(1))

            .Columns(col =>
            {
                //The checkbox column is bound to the grid using template property and headerTemplateID property
                col.Type("checkbox").Width(35).Add();
                col.Field(c => c.FirstName).HeaderText("First Name").Width(130).Add();
                col.Field(c => c.LastName).HeaderText("Last Name").Width(180).Add();
                col.Field(c => c.Email).HeaderText("Email Address").Add();
            })


)

[Renjith Singh Rajendran]

Hi Kyle, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. We suspect that you want to pass the selected rows to the controller. We have prepared a sample based on your requirement which could be downloaded from the link below, 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/Checkbox_selection-pass_selected_rows_id,s957113183 

We have passed the selected rows using Ajax post to the controller. When the button is clicked it will post an Ajax call to the server side with the selected record’s primary key. Please refer the code example below, 

[GridFeatures.cshtml] 

 

@(Html.EJ().Button("SendtoController").Text("SendtoController").ClientSideEvents(eve => { eve.Click("click"); })) 

 

@(Html.EJ().Grid<object>("grid") 

            .Datasource((IEnumerable<object>)ViewBag.datasource) 

            .AllowPaging() 

            ... 

           .Columns(col => 

            { 

                col.Type("checkbox").Width(50).Add(); 

                ... 

            })) 

<script> 

 

    function click(args) { 

        var gridObj = $("#grid").ejGrid('instance');  

        var selectedrecordIndex = gridObj.checkSelectedRowsIndexes; //Get the selected row index across all page wise 

        var selectedRecord = []; 

        for (var i = 0; i < selectedrecordIndex.length ; i++) { 

            if (ej.isNullOrUndefined(selectedrecordIndex[i])) 

                continue; 

            else { 

                for (var j = 0; j < selectedrecordIndex[i].length; j++) { 

                    var index = selectedrecordIndex[i][j] + (i * gridObj.model.pageSettings.pageSize); //Calculate the index to retrieve those data in the data source 

                    selectedRecord.push(gridObj.model.dataSource[index].OrderID); //We have pushed only the primary key value 

                } 

            } 

        } 

        $.ajax({ 

            url: "/Grid/Data", 

            type: "POST", 

            datatype: "json", 

            contentType: "application/json; charset=utf-8", 

            data: JSON.stringify({ gid: JSON.stringify(selectedRecord) }), 

            success: function (result) { 

            } 

        }); 

    } 

</script> 

[GridController.cs] 

        public ActionResult Data(string gid) 

        { 

            return Json(gid, JsonRequestBehavior.AllowGet); 

        } 

Note : We have passed only the primary key value of the selected records to the controller, if you need to pass the entire values in record, you can do so by pushing the entire values in the variable selectedRecord. 

 

Regards, 

Renjith Singh Rajendran.