pass value to controller

[hpf porsesh]

Hi

 I want add custom Button on every row that by click to this button send value to controller 

for example 

id  name   age

1    aa        20

2    bb        30 

3    cc         25

 want by click to custom button pass id value to controller

[Sujith Kumar Rajkumar]

Hi devparsafardd, 

 

Greetings from Syncfusion support. 

 

You can achieve your requirement by using the column template to render a custom button(which will be rendered in each row) and on button click you can send the target row data to your server method. The target row data can be retrieved by passing the target button’s closest row cell element to the Grid’s getRowInfo method. This is demonstrated in the below code snippet, 

 

View page 

<ejs-grid id="Grid" dataSource="@ViewBag.Data"> 

        <e-grid-columns> 

                     . 

                     . 

            <e-grid-column headerText="Details" template="#template" width="300"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

<script id="template" type="text/x-template"> 

    <button class="custom-button" onclick="buttonClick(event)">Send row data to server</button> 

</script> 

<script> 

    function buttonClick(args) { 

        // Grid instance 

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

        // Target button’s closest row cell element is retrieved 

        var targetRowCell = args.target.closest('.e-rowcell'); 

        // Target row details 

        var targetRowDetails = gridObj.getRowInfo(targetRowCell); 

        // Ajax request is sent with the target row details 

        var ajax = new ej.base.Ajax({ 

            url: 'Home/GetCurrentRowData', 

            type: 'POST', 

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

            data: JSON.stringify([targetRowDetails.rowData]), 

            successHandler: function (data) { 

                console.log('Returned data: ' + JSON.parse(data).result); 

            } 

        }); 

        ajax.send(); 

    } 

</script> 

 

Controller page 

// ‘OrderDetails’ class contains definition for all the data that will be received from the client. So this class is used here to access the data  

public IActionResult GetCurrentRowData([FromBody]List<OrdersDetails> data) 

{ 

        return Json(new { result = data }); 

} 

 

We have prepared a sample based on this for your reference. You can download it from the following link, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/155612/ze/GridTemplate-441519558  

 

More details on the column template can be checked in the below help documentation link, 

 

Grid column template: https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns/#column-template 

 

API link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#getrowinfo 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R