1. Home
  2. Forum
  3. jQuery
  4. I want to call custom method in gridview using angular js

I want to call custom method in gridview using angular js

Technology must be angular js and mvc

for your better understanig provide link

http://js.syncfusion.com/demos/web/#!/azure/grid/columns/customcommand
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, 

http://jsplayground.syncfusion.com/dnw4x13f 


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, 

http://help.syncfusion.com/js/api/ejgrid#members:columns-commands 

Please refer to the following code example, 

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

        <table>

            <tr>

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

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

                </td>

                <td>

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

                        <tr>

                            <td>Name</td>

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

                        </tr>

                        <tr>

                            <td>Birth Date</td>

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

                        </tr>

                        <tr>

                            <td>Title</td>

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

                        </tr>

                        <tr>

                            <td>City</td>

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

                        </tr>

                        <tr>

                            <td>Code</td>

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

                        </tr>

                    </table>

                </td>

            </tr>

        </table>

    </script>

</head>

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

                     e-columns="columns"</div>

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

            </div>


        </div>


    </div>

    <br />

    <script>


        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;

        });

        $("#commanddialog").ejDialog({

            "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];

            $("#commanddialog").html($("#templateData").render(record))

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

                .ejDialog("open");

        }
    </script>


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

Regards,
Sellappandi R

Loader.
Up arrow icon