Angular JS Integration- EJGrid with custom command

[rodwin]

Hi,

Following this guide http://js.syncfusion.com/demos/web/#!/azure/grid/columns/customcommand, I am trying to add a custom command in my ejgrid. I want this command to allow me to select a record (get id of selected row then process)

See attachment for the UI.

Controller code:

<code>

function NotauthorizedController($scope,$timeout, $location) {

    /*jshint validthis: true */

        var vm = this;

        vm.columns = [

                       { field: "EmployeeID", headerText: "Employee ID", isPrimaryKey: true,editType: ej.Grid.EditingType.NumericEdit, textAlign: ej.TextAlign.Right, width: 100 },

                       { field: "FirstName", headerText: "First Name", width: 100 },

                       { field: "LastName", headerText: "Last Name", width: 100 },

                       { field: "Country", headerText: "Country", width: 100 },

                       {

                           headerText: "",

                           commands: [

                               {

                                   type: "details",

                                   buttonOptions: {

                                       text: "Select",

                                       width: "100",

                                       click: "notauthorized.onClick"

                                   }

                               }

                           ],

                           isUnbound: true,

                           textAlign: ej.TextAlign.Left,

                           width: 150

                       }

        ];

        vm.onClick = function(args) {

            console.log(args);

        }

        vm.data = [

                 { "EmployeeID": 1, "LastName": "Davolio", "FirstName": "Nancy", "Title": "Sales Representative", "City": "Seattle", "Country": "USA" },

                 { "EmployeeID": 2, "LastName": "Fuller", "FirstName": "Andrew", "Title": "Vice President, Sales", "City": "Tacoma", "Country": "USA" },

                 { "EmployeeID": 3, "LastName": "Leverling", "FirstName": "Janet", "Title": "Sales Representative", "City": "Kirkland", "Country": "USA" },

                 { "EmployeeID": 4, "LastName": "Peacock", "FirstName": "Margaret", "Title": "Sales Representative", "City": "Redmond", "Country": "USA" },

                 { "EmployeeID": 5, "LastName": "Buchanan", "FirstName": "Steven", "Title": "Sales Manager", "City": "London", "Country": "UK" },

                 { "EmployeeID": 6, "LastName": "Suyama", "FirstName": "Michael", "Title": "Sales Representative", "City": "London", "Country": "UK" },

                 { "EmployeeID": 7, "LastName": "King", "FirstName": "Robert", "Title": "Sales Representative", "City": "London", "Country": "UK" },

                 { "EmployeeID": 8, "LastName": "Callahan", "FirstName": "Laura", "Title": "Inside Sales Coordinator", "City": "Seattle", "Country": "USA" },

                 { "EmployeeID": 9, "LastName": "Dodsworth", "FirstName": "Anne", "Title": "Sales Representative", "City": "London", "Country": "UK" },

                 { "EmployeeID": 10, "LastName": "Callahan", "FirstName": "Laura", "Title": "Inside Sales Coordinator", "City": "Seattle", "Country": "USA" },

                 { "EmployeeID": 11, "LastName": "Leverling", "FirstName": "Janet", "Title": "Sales Representative", "City": "Kirkland", "Country": "USA" },

                 { "EmployeeID": 12, "LastName": "Suyama", "FirstName": "Michael", "Title": "Sales Representative", "City": "London", "Country": "UK" },

                 { "EmployeeID": 13, "LastName": "Buchanan", "FirstName": "Steven", "Title": "Sales Manager", "City": "London", "Country": "UK" },

                 { "EmployeeID": 14, "LastName": "Fuller", "FirstName": "Andrew", "Title": "Vice President, Sales", "City": "Tacoma", "Country": "USA" },

                 { "EmployeeID": 15, "LastName": "King", "FirstName": "Robert", "Title": "Sales Representative", "City": "London", "Country": "UK" },

                 { "EmployeeID": 16, "LastName": "Peacock", "FirstName": "Margaret", "Title": "Sales Representative", "City": "Redmond", "Country": "USA" },

                 { "EmployeeID": 17, "LastName": "Buchanan", "FirstName": "Steven", "Title": "Sales Manager", "City": "London", "Country": "UK" },

                 { "EmployeeID": 18, "LastName": "Suyama", "FirstName": "Michael", "Title": "Sales Representative", "City": "London", "Country": "UK" },

                 { "EmployeeID": 19, "LastName": "King", "FirstName": "Robert", "Title": "Sales Representative", "City": "London", "Country": "UK" },

                 { "EmployeeID": 20, "LastName": "Callahan", "FirstName": "Laura", "Title": "Inside Sales Coordinator", "City": "Seattle", "Country": "USA" },

                 { "EmployeeID": 21, "LastName": "Dodsworth", "FirstName": "Anne", "Title": "Sales Representative", "City": "London", "Country": "UK" },

                 { "EmployeeID": 22, "LastName": "Suyama", "FirstName": "Margaret", "Title": "Sales Representative", "City": "London", "Country": "UK" },

                 { "EmployeeID": 23, "LastName": "Fuller", "FirstName": "Andrew", "Title": "Vice President, Sales", "City": "Tacoma", "Country": "USA" },

                 { "EmployeeID": 24, "LastName": "Leverling", "FirstName": "Janet", "Title": "Sales Representative", "City": "Kirkland", "Country": "USA" },

                 { "EmployeeID": 25, "LastName": "Peacock", "FirstName": "Margaret", "Title": "Sales Representative", "City": "Redmond", "Country": "USA" },

                 { "EmployeeID": 26, "LastName": "Buchanan", "FirstName": "Steven", "Title": "Sales Manager", "City": "London", "Country": "UK" },

                 { "EmployeeID": 27, "LastName": "Suyama", "FirstName": "Michael", "Title": "Sales Representative", "City": "London", "Country": "UK" },

                 { "EmployeeID": 28, "LastName": "King", "FirstName": "Robert", "Title": "Sales Representative", "City": "London", "Country": "UK" },

                 { "EmployeeID": 29, "LastName": "Callahan", "FirstName": "Laura", "Title": "Inside Sales Coordinator", "City": "Seattle", "Country": "USA" },

                 { "EmployeeID": 30, "LastName": "Dodsworth", "FirstName": "Anne", "Title": "Sales Representative", "City": "London", "Country": "UK" },

                 { "EmployeeID": 31, "LastName": "Peacock", "FirstName": "Margaret", "Title": "Sales Representative", "City": "Redmond", "Country": "USA" },

                 { "EmployeeID": 32, "LastName": "Buchanan", "FirstName": "Steven", "Title": "Sales Manager", "City": "London", "Country": "UK" },

        ];

    }

</code>

View Code:

<div id="Grid" ej-grid

 e-datasource="notauthorized.data"
e-enablerowhover="false"
e-pagesettings-pagesize="8"
e-allowsorting="true"
e-allowpaging="true"
e-columns="notauthorized.columns">

</div>

my onclick method is not being triggered.

Thanks.

Attachment: Capture_35dbbd77.zip

[Venkatesh Ayothi Raman]

Hi Rodwin,

Thanks for contacting Syncfusion support.

We have analyzed your code and found that you have declared the “onclick” function after the declaration of columns. So, we suggest you to initialize the “vm.onClick” function before the declaration of column. Because when we initialize the button click event before declare the “vm.onClick” function, the function of $scope will checks ‘vm.onclick’ and returns undefined. So the click event will not trigger. For your convenience, we have created a sample and refer to the code sample.

Code Sample:

angular.module('notauthorizedController', ['ejangular']).controller('notauthorized', function ($scope, $timeout, $location) {

           

            var vm = $scope;

            vm.onClick = function (args) { alert(1); }

            vm.columns = [

                           { field: "EmployeeID", headerText: "Employee ID", isPrimaryKey: true, editType: ej.Grid.EditingType.NumericEdit, textAlign: ej.TextAlign.Right, width: 100 },

                           { field: "FirstName", headerText: "First Name", width: 100 },

                           { field: "LastName", headerText: "Last Name", width: 100 },

                           { field: "Country", headerText: "Country", width: 100 },

                           {

                               headerText: "",

                               commands: [

                                   {

                                       type: "details",

                                       buttonOptions: {

                                           text: "Select",

                                           width: "100",

                                           click: vm.onClick,

                                       }

                                   }

                               ],

                               isUnbound: true,

                               textAlign: ej.TextAlign.Left,

                               width: 150

                           }

            ];       

Sample Link: http://jsplayground.syncfusion.com/ywng4tcj

Regards,
Venkatesh Ayothiraman.

[rodwin]

This resolves my issue.

Thanks Venkatesh.

[Venkatesh Ayothi Raman]

Hi Rodwin,

Thanks for the update.

We have happy to hear that your requirement is achieved.

Thanks,
Venkatesh Ayothiraman.