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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

119599 Jul 13,2015 08:38 AM UTC Dec 9,2015 07:30 AM UTC ASP.NET MVC 4
loading
Tags: Grid
Carlo
Asked On July 13, 2015 08:38 AM UTC

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

Gowthami V [Syncfusion]
Replied On 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.

matt
Replied On 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.

Ragavee U S [Syncfusion]
Replied On 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.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;