jQWidgets Forums

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 10 years, 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Treegrid events not called Posts

March 23, 2015 at 10:29 am Treegrid events not called #68984

Tyl

Participant

Hi,

I use a treegrid in V3.6 and it seems that no events are called.
Especially, I need rowSelect and rowUnselect but none are called when I select or unselect a row.
(i cannot migrate to V3.7.1 as my code doesn’t work anymore with this version)

How to get a fix in V3.6 or a workaround ?

Here is a little sample demontrating the bug (the sample is the one you give, I have only added the following line in the treegrid settings).
rowClick: function(event) { alert(‘rowClick’); },

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id="Description">TreeGrid directive for AngularJS</title>
    <link rel="stylesheet" type="text/css" href="jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="angular/angular.min.js"></script>
    <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxtreegrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxangular.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {
            $scope.employees = [
            {
                "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way", "expanded": "true",
                children: [
                { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
                { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
                { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
                { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
                {
                    "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill", "expanded": "true",
                    children: [
                           { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
                           { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
                           { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
                    ]
                }
                ]
            }];
            // create Tree Grid
            $scope.treeGridSettings =
            {
                width: 850,
                source: new $.jqx.dataAdapter({
                    dataType: "json",
                    dataFields: [
                        { name: 'EmployeeID', type: 'number' },
                        { name: 'FirstName', type: 'string' },
                        { name: 'LastName', type: 'string' },
                        { name: 'Country', type: 'string' },
                        { name: 'City', type: 'string' },
                        { name: 'Address', type: 'string' },
                        { name: 'Title', type: 'string' },
                        { name: 'HireDate', type: 'date' },
                        { name: 'children', type: 'array' },
                        { name: 'expanded', type: 'bool' },
                        { name: 'BirthDate', type: 'date' }
                    ],
                    hierarchy:
                    {
                        root: 'children'
                    },
                    id: 'EmployeeID',
                    localData: $scope.employees
                }),
                sortable: true,
                rowClick: function(event) { alert('rowClick'); },
                columns: [
                  { text: 'FirstName', dataField: 'FirstName', width: 200 },
                  { text: 'LastName', dataField: 'LastName', width: 120 },
                  { text: 'Title', dataField: 'Title', width: 160 },
                  { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
                  { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
                  { text: 'Address', dataField: 'Address', width: 250 },
                  { text: 'City', dataField: 'City', width: 120 },
                  { text: 'Country', dataField: 'Country' }
                ]
            };
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <jqx-tree-grid jqx-settings="treeGridSettings"></jqx-tree-grid>
    </div>
</body>
</html>

March 23, 2015 at 10:42 am Treegrid events not called #68987

Peter Stoev

Keymaster

Hi Tyl,

Bind to the events in the jQuery way for the version which you use. However, I suggest you to use the newest version.

Regards,
Peter Stoev

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.