Controller Action Buttons on Grid

[Paul Bruce]

Hi, 

I'm a Telerik user, and looking to switch to something else. 

I've looked at Sync Fusions Doco, and it looks pretty good, but I can't seem to find an example with Controller Action Button on a Grid. 

Is this possible with Sync Fusion  ?

Thanks

Paul

[Praveenkumar Gajendiran]

Hi Paul, 

Greetings from Syncfusion support. 

We could not understand your requirement from the shared information. So please share us the following additional details to validate further on this. 

• Do you wish to bind remote data defined in controller method to the Grid? If so you can find the list of remote data adaptors that can be used to bind remote data to the Grid from the following help documentation link,

 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/#remote-data  

 

• Do you wish to call a controller method on clicking of a button rendered in the Grid? If this is requirement please let us know where you need to render this button – In the Grid toolbar or inside the Grid column?

If your requirement is not as mentioned above , please elaborate on it with more details based on which we will check from our end and provide further details. 

Regards, 

Praveenkumar G 

[Paul Bruce]

Hi Praveenkumar,

It's the second option, calling a controller method by clicking on a button rendered in the Grid. 

To clarify, the button should be in the column, not in the toolbar- good point.  I'd assume you could also assign a controller action to a button in the toolbar as well. 

Thanks  

Paul

[Sujith Kumar Rajkumar]

Hi Paul, 

Thanks for the confirmation. 

You can achieve this requirement by using the Grid’s column template to render a button inside the column and write the corresponding controller action for it in its click event. This is explained in detail below, 

Initially render a button inside the template script tag and assign it’s id to the Grid column’s template property. 

<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> 

 

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

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

</script> 

 

Then in the button click event, ajax call is made to the controller action method with the Grid’s current row data(if required) as demonstrated in the below code snippet, 

<script> 

    // Button click function 

    function buttonClick(args) { 

        // Grid instance 

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

        // Closest Grid row cell element is retrieved from the target element 

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

        // Current row details 

        var targetRowDetails = gridObj.getRowInfo(targetRowCell); 

        // Ajax call is made to the required controller method with the current row data 

        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> 

 

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/158603/ze/GridWithTemplateButton-2059613570  

More details on the Grid’s column template can be checked in the below help documentation site, 

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

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

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

Regards, 

Sujith R