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

I want to call custom method in gridview using angular js

Thread ID:

Created:

Updated:

Platform:

Replies:

120509 Sep 22,2015 08:10 AM UTC Sep 23,2015 07:01 AM UTC JavaScript 1
loading
Tags: ejGrid
Rakesh Advani
Asked On September 22, 2015 08:10 AM UTC

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


Sellappandi Ramu [Syncfusion]
Replied On 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

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

;