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

I want to call custom method in gridview using angular js

Technology must be angular js and mvc

for your better understanig provide link

I want to same thing in angular js

1 Reply

SR Sellappandi Ramu Syncfusion Team September 23, 2015 07:01 AM UTC

Hi Rakesh,

Thanks for contacting Syncfusion support.

We have created a sample based on your requirement and refer to the following JS playground sample, 


In the above sample, we have used command column and angular template to view the Employee details.

Please refer the below Help document for command column, 


Please refer to the following code example, 

    <script type="text/ng-template" id="templateData"><!--Angular Template-->



                <td style="text-align: center">

                    <img class="emp-img" src="themes/images/Employees/{{:EmployeeID}}.png" alt="{{: EmployeeID }}" />



                    <table class="CardTable" cellpadding="3" cellspacing="2">



                            <td>: {{:TitleOfCourtesy}} {{:FirstName}} {{:LastName}}</td>



                            <td>Birth Date</td>

                            <td>: {{:BirthDate}} </td>




                            <td>: {{:Title}} </td>




                            <td>: {{:City}} </td>




                            <td>: {{:PostalCode}} </td>








<body ng-controller="PhoneListCtrl">

    <div class="content-container-fluid">

        <div class="row">

            <div class="cols-sample-area">

                <div id="targetsGrid" ej-grid e-datasource="data"


                <div id="commanddialog"></div>




    <br />


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

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

            $scope.columns =  [

                          { field: "EmployeeID", headerText: 'Employee ID', textAlign: ej.TextAlign.Right, width: 75 },

                          { field: "FirstName", headerText: 'First Name', textAlign: ej.TextAlign.Left, width: 100 },

                          { field: "City", headerText: 'City', textAlign: ej.TextAlign.Left, width: 100, customAttributes: { "id": "{{:EmployeeID}}" } },  // jsrender syntax usage in custom Attribute

                          { field: "Title", headerText: 'Title', textAlign: ej.TextAlign.Left, width: 120 },

                          { field: "Country", headerText: 'Country', textAlign: ej.TextAlign.Left, width: 100 },

                           {headerText: "Employee Details",

                               commands: [


                                       type: "details",

                                       buttonOptions: {

                                           text: "Details",

                                           width: "100",

                                           click: "onClick"




                               isUnbound: true,

                               textAlign: ej.TextAlign.Center,

                               width: 150 }


                            $scope.data = window.employeeView;



            "width": 450,

            title: "Details of employee",

            showOnInit: false,

            enableResize: false,

            content: "#targetsGrid"


        function onClick(args) {

            var grid = $("#targetsGrid").ejGrid("instance");

            var index = this.element.closest("tr").index();

            var record = grid.getCurrentViewData()[index];


                .ejDialog("option", { position: { X: this.element.offset().left - 455, Y: this.element.offset().top } })



Please try the above sample and get back to us if you have any concerns.

Sellappandi R

Live Chat Icon For mobile
Up arrow icon