Add a button column to grid. Each button should call an action from the controller, passing the ID of the current element

[Carlo]

I'm working with a simple CRUD grid in ASP.NET MVC, similar to the one in you examples. What I'm trying to achieve is to add a column (possibly unbound?) whose cells should each contain a button. Each button should call an action from the controller, passing a parameter. For example, the "ID" property of the current record. I've been trying to achieve this by looking at your samples but I'm still struggling with this. Any advice? Thanks.

[Carlo]

Basically...this:

https://www.syncfusion.com/kb/4886/how-to-add-a-custom-command-with-server-side-event-handling

but with code that works for ASP.NET MVC, not plain ASP.NET...

[Gowthami V]

Hi Carlo,

Thanks for using Syncfusion products.

We can achieve your requirement by passing the selected records to the controller while clicking the unbound button through ajax post as follows.

@(Html.EJ().Grid<SampleDemo1.OrdersView>("FlatGrid")
        .Datasource((IEnumerable<object>)ViewBag.datasource)
. . . .

col.HeaderText("Unbound Button").Commands(command =>
           {

.ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()
                      {
. . . .

                       Click = "onClick"

                      }).Add();
           })

           .IsUnbound(true)

           .TextAlign(TextAlign.Center)

           .Width(150)

           .Add();

        })

        )

<script type="text/javascript">

    function onClick(args)

    {

        var gridObj = $("#FlatGrid").data("ejGrid");

            //getting corresponding record

        var data = gridObj.getSelectedRecords()[0].OrderID;

        $.ajax({

            type: "POST",

            url: "/Grid/Query",

            //Sending  data to the server(controller) side

            data: { "data": data }

          

            });

    }
    </script>

GridController.Cs

public class GridController : Controller

    {

       public void Query(int? data)

        {

//getting data from the client side

            Console.WriteLine(data);

        }
    }

Please try the above snippet and let us know if you have any queries.

Regards,
Gowthami V.

[matt]

I'm implementing a custom command button as in the sample here. However, I'm using AngularJS with a controller to setuo the grid. The grid displays properly withe the button.

However, the Javascript function "onClick" is not firing from within the context of the controller. Is there a way to use a custom command button with an Angularjs controller?

Thanks.

[Ragavee U S]

Hi Matt,

We analyzed your requirement to handle the click event of the custom command button within the context of angularjs controller . We can achieve your requirement by binding the click event of the ejButton to the $scope variable as in the below code example.

<div id="Grid" ej-grid e-datasource="data" >                

                    <div e-columns>

                        . . . .                       

                        <div e-column e-headertext="Details" e-commands="command" e-isunbound=true e-textalign="center" e-width="150"></div>

                    </div>

                </div>

angular.module('listCtrl', ['ejangular'])

        .controller('PhoneListCtrl', function ($scope) {

            $scope.data = obj;

            $scope.toolbar = ["add", "edit", "delete", "update", "cancel"];

            $scope.onClick = function (args) {

                var gridObj = $("#Grid").data("ejGrid");

                //getting corresponding record EmployeeID value           

                var data = gridObj.getSelectedRecords()[0].EmployeeID;

                alert(data);

            }

            $scope.command = [{

                type: "details", buttonOptions: {

                    text: "Details",

                    width: "100",

                    click: $scope.onClick,

                }

            }];;

        });

We have created a sample for your convenience, which can be downloaded from the below location.

Sample Link: http://jsplayground.syncfusion.com/xg0ykdli

Regards,
Ragavee U S.