jQWidgets Forums

Tagged: angular grid, angular2 grid, bootstrap grid, javascript grid, jquery grid, jqwidgets grid, jqxgrid, typescript grid

This topic contains 9 replies, has 2 voices, and was last updated by badera 8 years, 5 months ago.

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

Author

Reassign Data to jqxTreeGrid Posts

October 27, 2016 at 7:07 am Reassign Data to jqxTreeGrid #88526

badera

Participant

I would like to have a jqxTreeGrid bound to local data and need to refresh the data. If I use the approach we are used to use in jqxGrid (reassign the source property to settings object, which is a new created jqxDataAdapter), a JS-Exception is raised.
As example, I took your excample /angularjs-demos/treegrid.htm and inserted a refresh button…

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id="Description">TreeGrid directive for AngularJS</title>
    <meta name="description" content="AngularJS Tree Grid example. This example demonstrates a Tree Grid built with Angular." /> 
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.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" src="../../scripts/demos.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." }
                    ]
                }
                ]
            }];

            var buildSource = function () {
                return 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
                })
            };

            // create Tree Grid
            $scope.treeGridSettings =
            {
                width: 850,
                source: buildSource(),
                sortable: true,
                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' }
                ]
            };

            $scope.refresh = function () {
                $scope.treeGridSettings.source = buildSource();
            }

        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <jqx-tree-grid jqx-settings="treeGridSettings"></jqx-tree-grid>
        <br>
        <button ng-click="refresh()">Refresh</button>
    </div>
</body>
</html>

After clicking Refresh the second time and every further time, “angular.js:11055 RangeError: Maximum call stack size exceeded” is raised.
What is wrong? How can I refresh the data of the treeGrid the correct way?

Thanks in advance for your help!
– badera

October 27, 2016 at 12:45 pm Reassign Data to jqxTreeGrid #88541

Hristo

Participant

Hello badera,

If you would like to refresh the TreeGrid you could use this approach $scope.treeGridSettings.apply('refresh');.
I would like to suggest this article, could be useful.
In case you want to change the data source, could try to create a new source with new DataAdapter and set to the TreeGrid.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

October 27, 2016 at 1:18 pm Reassign Data to jqxTreeGrid #88542

badera

Participant

Dear Hristo

Well, with “refresh” I do mean reassign new data, not only redraw the grid. So if you look in my code abouve, I already do what you advised me: “Create a new source with a new DataAdapter and set to the TreeGrid”. Ok, this example assigns again the same data. In reality, the records would be different.
So why does the code fail? In my opinion, I do exactly what you advice me. Whats wrong?

October 27, 2016 at 6:59 pm Reassign Data to jqxTreeGrid #88550

badera

Participant

I also remarked that if we call updateBoundData (as shown in this demo http://jsfiddle.net/jqwidgets/7J2qP/ – but using angular 1) the same exception happens.
What can I do? I should bring out a relase next week containing such a treegrid but I need to update the data…

October 28, 2016 at 8:40 am Reassign Data to jqxTreeGrid #88570

Hristo

Participant

Hello badera,

Thank you for this message.
You could try on this way.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

October 28, 2016 at 9:26 am Reassign Data to jqxTreeGrid #88576

badera

Participant

Dear Hristo

I try it again…
1) I use angular 1. So I do not like to use the jquery way just for this.
2) Do you agree that my example in the initial post SHOULD work? Why does it not? Is it a bug?

October 31, 2016 at 7:39 am Reassign Data to jqxTreeGrid #88612

Hristo

Participant

Hello badera,

I would like to demonstrate only approach how to change the data.
Please, take a look at this example:
https://www.jseditor.io/?key=treegrid-update-data
Thank you for the interest we will investigate this.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

November 8, 2016 at 8:30 pm Reassign Data to jqxTreeGrid #88850

badera

Participant

Hello Hristo

Please take a look at this example I modified:
https://www.jseditor.io/?key=treegrid-update-data-error

Here, you will see two problems:
1) what I tried to describe in previous posts: after second click to “Click” button, you will get JS exceptions – please open F12 tools to see them; they are not displayed in your Console of {JS Editor}.

2) Filter clear icon (“cross”) is no more displayed after reassigning data:
– Enter something to filter in the filter input and click on the maginfier -> the cancel filter button is correctly shown beside magnifier
– Click on Button “Click”
-> cancel filter button is no more displayed and “Search:” is moved to top…. OK, we can manually clear the text again in the input the remove filter.

I hope I was now able to tell my problems. Can you confirm to fix these in the next release?

Here is a demo video for completeness:

Thanks.
– badera

November 9, 2016 at 1:31 pm Reassign Data to jqxTreeGrid #88882

Hristo

Participant

Hello badera,

I simulate the mentioned scenario.
Thank you for this feedback.
But I would like to ask you to “share” your example and after that to ‘Save’ again to see if there are other relevant elements.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

November 9, 2016 at 3:29 pm Reassign Data to jqxTreeGrid #88893

badera

Participant

Dear Hristo
I have shared it and saved again.

Author

Posts

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

You must be logged in to reply to this topic.