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.
Unfortunately, activation email could not send to your email. Please try again.

I want to call custom method in gridview using angular js

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 03:01 AM

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.

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.

;