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.
Syncfusion Feedback

Angular JS Integration- EJGrid with custom command

Thread ID:

Created:

Updated:

Platform:

Replies:

123180 Feb 24,2016 12:36 PM UTC Feb 26,2016 04:13 AM UTC JavaScript 3
loading
Tags: ejGrid
rodwin
Asked On February 24, 2016 12:36 PM UTC

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 [Syncfusion]
Replied On February 25, 2016 09:42 AM UTC

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
Replied On February 26, 2016 01:38 AM UTC

This resolves my issue.

Thanks Venkatesh.

Venkatesh Ayothi Raman [Syncfusion]
Replied On February 26, 2016 04:13 AM UTC

Hi Rodwin,

Thanks for the update.

We have happy to hear that your requirement is achieved.

Thanks,
Venkatesh Ayothiraman.

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

;