jQuery UI Widgets Forums Plugins AngularJS Reassign Data to jqxTreeGrid

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • 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

    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

    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?

    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…

    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

    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?

    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

    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

    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

    Reassign Data to jqxTreeGrid #88893

    badera
    Participant

    Dear Hristo
    I have shared it and saved again.

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

You must be logged in to reply to this topic.