How to Send Data Grid Selected row ID To controller

[Ahmed]

Hi,

Q1. How to send Data Grid Selected Row ID To Controller by clicking on custom toolbar button? (Hint: only one row selection in my project data grid)

Thanks

[Rajapandiyan Settu]

Hi Ahmed, 

 

Greetings from Syncfusion support. 

 

Query: How to send Data Grid Selected Row ID To Controller by clicking on custom toolbar button? (Hint: only one row selection in my project data grid) 

 

We have validated your query at our end. You can achieve your requirement by using ajax post. In the ajax post, we send the selected row’s field value to the controller side. Please find the below code example and sample for more information. 

 

[index.cshtml] 

 

@{ 

 

    List<object> toolbarItems = new List<object>(); 

    toolbarItems.Add(new { text = "Send Selected ID", tooltipText = "Send Selected ID", id = "sendselectedid" }); 

} 

 

<ejs-grid id="Grid" dataSource="@ViewBag.datasource" toolbarClick="toolbarClick" toolbar=toolbarItems height="270"> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120"></e-grid-column> 

----- 

    </e-grid-columns> 

</ejs-grid> 

 

<script> 

    function toolbarClick(args) { 

        if (args.item.id === 'sendselectedid') { 

            var gridObj = document.getElementById("Grid").ej2_instances[0]; 

            // get the selected records in the Grid 

            var selectedRecords = gridObj.getSelectedRecords(); 

            // get the selected rows in Grid 

            var selectedRows = gridObj.getSelectedRows(); 

            // get the OrderID value of selected record  

            var OrderIDVal = selectedRecords[0]["OrderID"] 

            var ajax = new ej.base.Ajax({ 

                type: "POST", 

                url: '/Home/GetClientDeviceDocuments', 

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

                data: JSON.stringify({ selectedId: OrderIDVal })   // pass the selected id in integer format 

            }); 

            ajax.send().then(function (result) { 

                var data = JSON.parse(result); 

                console.log(data); 

            }); 

 

        } 

    } 

</script> 

 

[HomeController.cs] 

 

        public IActionResult GetClientDeviceDocuments([FromBody] extradata data) // use the correct dataType to deserialize the data 

        { 

            var id = data.selectedId; 

// do your action as you want with the selectedId 

            return Json(BigData.GetAllRecords()); 

        } 

        public class extradata 

        { 

            public int selectedId { get; set; } 

        } 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_grid_sendselectedid1010680194.zip 

 

Please get back to us if you need further assistance with this.   

 

Regards, 

Rajapandiyan S