jQuery UI Widgets Forums TreeGrid JSON Data example modification

This topic contains 3 replies, has 2 voices, and was last updated by  Christopher 7 years, 3 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • JSON Data example modification #89759

    susduj
    Participant

    Hi,

    I tried to change the JSON Data example on the site so it will use the FirstName field as key instead of the EmployeeID,

    here’s the code:

        <script type="text/javascript">
            $(document).ready(function () {          
                    var employees = [
                        { "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": "Andrew", "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" },
                        { "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": "Andrew", "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" },
                        { "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": "Andrew", "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." },
                        { "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": "Andrew", "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." },
                        { "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": "Andrew", "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" },
                        { "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": "Steven", "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." },
                        { "FirstName": "Robert", "LastName": "King", "ReportsTo": "Steven", "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" },
                        { "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": "Steven", "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." },
                        { "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": "Steven", "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." }
                    ];
                // prepare the data
                var source =
                {
                    dataType: "json",
                    dataFields: [
                        { name: 'ReportsTo', type: 'string' },
                        { 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: 'BirthDate', type: 'date' }
                    ],
                    hierarchy:
                    {
                        keyDataField: { name: 'FirstName' },
                        parentDataField: { name: 'ReportsTo' }
                    },
                    id: 'FirstName',
                    localData: employees
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                // create Tree Grid
                $("#treeGrid").jqxTreeGrid(
                {
                    width: 850,
                    source: dataAdapter,
                    sortable: true,
                    ready: function()
                    {
                        $("#treeGrid").jqxTreeGrid();
                    },
                    columns: [
                      { text: 'FirstName', dataField: 'FirstName', width: 200 },
                      { text: 'LastName', dataField: 'LastName', width: 200 },
                      { 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>

    It doesn’t load as expected, just shows all the entries in a table with no nesting.

    JSON Data example modification #89797

    Christopher
    Participant

    Hi susduj,

    The id must be of type integer for the jqxTreGride to properly create the hierarchy of the records. Why do you need to change the type of the id ? Each record must have a unique ID of type integer to be properly processed by the jqxTreeGrid.

    Best Regards,
    Christopher

    jQWidgets Team
    http://www.jqwidgets.com

    JSON Data example modification #89865

    susduj
    Participant

    My database has unique strings as keys, jqxTreeGrid only supports integer ID?

    JSON Data example modification #89980

    Christopher
    Participant

    Hi susduj,

    Actually the jqxTreeGrid supports String type IDs. Here is a demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/javascript-tree-grid-grouping.htm?light

    Here’s how your code should look if you want the hierarchy to rely on the “Reports to” datafield:

    
         var employees = [
                        { "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": "Andrew", "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" },
                        { "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": "Andrew", "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" },
                        { "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": "Andrew", "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." },
                        { "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": "Andrew", "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." },
                        { "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": "Andrew", "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" },
                        { "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": "Steven", "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." },
                        { "FirstName": "Robert", "LastName": "King", "ReportsTo": "Steven", "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" },
                        { "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": "Steven", "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." },
                        { "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": "Steven", "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." }
                    ];
                // prepare the data
                var source =
                {
                    dataType: "json",
                    dataFields: [
                        { name: 'ReportsTo', type: 'string' },
                        { 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: 'BirthDate', type: 'date' }
                    ],
                    hierarchy:
                    {
                        groupingDataFields:
                                [
                                    {
                                        name: "ReportsTo"
                                    }
                                ]
                    },
                    id: 'FirstName',
                    localData: employees
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                // create Tree Grid
                $("#treeGrid").jqxTreeGrid(
                {
                    width: 850,
                    source: dataAdapter,
                    sortable: true,
                    ready: function()
                    {
                        $("#treeGrid").jqxTreeGrid();
                    },
                    columns: [
                      { text: 'FirstName', dataField: 'FirstName', width: 200 },
                      { text: 'LastName', dataField: 'LastName', width: 200 },
                      { 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' }
                    ],
                    
                });
    

    Best Regards,
    Christopher

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.