We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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.


4 Replies

CA Carlo July 13, 2015 09:01 AM UTC

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


GV Gowthami V Syncfusion Team July 14, 2015 12:41 PM UTC

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.


MA matt December 9, 2015 02:26 AM UTC

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.


RU Ragavee U S Syncfusion Team December 9, 2015 07:30 AM UTC

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.

Loader.
Up arrow icon