jQuery UI Widgets Forums TreeGrid Problems with TreeGrid and Docking Layout

This topic contains 7 replies, has 2 voices, and was last updated by  Dimitar 8 years ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • Problems with TreeGrid and Docking Layout #91184

    anubis76
    Participant

    Dear Peter and Dimitar,

    I’ve been struggling for days with getting the TreeGrid to bind to my data in the docking layout. I’ve tried every possible method but I can’t figure it out. I’m retrieving data through .NET C# from a MongoDB. My JSON String is returning fine. I am able to bind my ListBox to one panel in my Docking Layout but I cannot get the TreeGrid to bind. I keep getting errors like “Invalid property: width”, Invalid property: source”. However the DataAdapter that binds is retrieving my records fine. Here is the code for the docking layout (I’m using RequireJS as well):

    HTML:

    <body>
        <div id="jqxDockingLayout">
            <div data-container="PatientsListPanel">
                <div id="PatientsListBox" class="no-border">
                </div>
            </div>
            
            <div data-container="PersonalPanel">
                <div id="PersonalDataDiv">
                </div>
            </div>
            <div data-container="AppointmentPanel">
                <div id="AppointmentDiv" class="no-border" style="margin-left: 5px; margin: 20px;">
                </div>
            </div>
            <div data-container="AdmissionPanel">
                <div id="AdmissionDiv" class="no-border" style="margin-left: 5px; margin: 20px;">
                </div>
            </div>
    
            <div data-container="PatientAddnDataPanel">
                <div id="PatientAddnDataTable" style="margin: 5px 0 0 5px;">
                </div>
            </div>
            
            
        </div>
    </body>

    I’m following the example you’ve given in the Docking Layout but instead of using localdata for the initial call, I’m using a callback to fetch my Mongo Data in JSON.
    So in my app.js, this is the code:

    define(["jQuery", "json2", "Q", "jqxcore", "jqxbuttons", "jqxtree", "jqxpanel", "jqxscrollbar", "jqxribbon", "jqxmenu", "jqxwindow",
        "jqxlayout", "jqxdockinglayout", "jqxdata", "jqxdraw", "jqxchart.core", "jqxdatatable", "jqxlistbox", "jqxtreegrid", "DashboardMain", "bootstrap"], function () {
        var initialize = function () {
            $(document).ready(function () {
                
                var layout = [{
                    type: 'layoutGroup',
                    orientation: 'vertical',
                    width: '800',
                    items: [{
                        type: 'layoutGroup',
                        orientation: 'horizontal',
                        height: 300,
                        items: [{
                            type: 'tabbedGroup',
                            width: 200,
                            pinnedWidth: 30,
                            items: [{
                                type: 'layoutPanel',
                                title: 'Patients List',
                                pinnedHeight: 30,
                                contentContainer: 'PatientsListPanel',
                                initContent: function () {
                                    initPatientsListBox();
                                }
                            }]
                        },
                        {
                            type: 'tabbedGroup',
                            height: 400,
                            pinnedHeight: 30,
                            width: 600,
                            items: [{
                                type: 'layoutPanel',
                                title: 'Personal Data',
                                contentContainer: 'PersonalPanel',
                                initContent: function () {
                                    initPersonalDataTreeGrid();
                                }
                                
                            }, {
                                type: 'layoutPanel',
                                title: 'Appointments',
                                contentContainer: 'AppointmentPanel'
                            }]
                        }], 
                    }, {
                        type: 'tabbedGroup',
                        height: 300,
                        pinnedHeight: 30,
                        items: [{
                            type: 'layoutPanel',
                            title: 'Additional Data',
                            contentContainer: 'PatientAddnDataPanel'
                            
                        }]
                    }]
                }];
    
                $('#jqxDockingLayout').jqxDockingLayout({ width: 800, height: 600, layout: layout, contextMenu: true });
    
            });
        };
        return {
            initialize: initialize
        };
    });

    And to initialize my Dashboard, this is the DashboardMain.js:

    function initPatientsListBox() {
        var source = {
            datatype: "json",
            async: false,
            datafields: [
                { name: 'pat_id' },
                { name: 'pfname' },
                { name: 'plastname' },
                { name: 'dob', type: 'date' },
                { name: 'addresses', type: 'array' },
                { name: 'contact', type: 'array' },
                { name: 'Emergency_contacts', map: 'contact>Emergency_contacts', type: 'array' }
            ],
            hierarchy:
            {
    
                groupingDataFields:
                     [
                         {
                             name: "addresses"
                         },
                         {
                             name: "contact"
                         },
                         {
                             name: "Emergency_contact"
                         }
                     ]
            },
            id: 'pat_id',
            url: 'Default.aspx?callback=GetPatientList',
    
        };
        //ppersonal = dataAdapter.getRecordsHierarchy("addresses", "pat_id", "Address Details");
        var dataAdapter = new $.jqx.dataAdapter(source, {
            loadComplete: function () {
                for (var i = 0; i < dataAdapter.records.length; i++) {
                    precords.push(dataAdapter.records[i])
                }
    
            },
            async: false
        });
                
        dataAdapter.dataBind();
    
        $('#PatientsListBox').jqxListBox({
            source: dataAdapter,
            displayMember: "pfname",
            valueMember: "pat_id",
            width: '100%',
            height: '100%',
            renderer: function (index, label, value) {
                var datarecord = precords[index];
                var table = '<table style="min-width: 130px;"><tr><td>' + datarecord.pfname + " " + datarecord.plastname + '</td></tr></table>';
                return table;
            }
    
        });
        
        $('#PatientsListBox').on('select', function (event) {
            var curPatIndex;
            
    
            if ($('#PatientsListBox').length > 0) {
                var args = event.args;
                if (args) {
                    curPatIndex = args.index;
                    //Note: this is where I get the current index from the listbox to apply a filter to the grid
                    
                }
            }
        });
    
    }
    
    function initPersonalDataTreeGrid() {
        var ds = JSON.stringify(precords);
        tgSource =
                 {
                     dataType: "json",
                     async: false,
                     dataFields: [
                         { name: 'pat_id' },
                         { name: 'dob', type: 'date' },
                         { name: 'addresses', map: 'pat_id>addresses', type: 'array' },
                         { name: 'No', map: 'addresses>0>No', type: 'string' },
                         { name: 'Street1', map: 'addresses>0>Street1', type: 'string' },
                         { name: 'Street2', map: 'addresses>0>Street2', type: 'string' },
                         { name: 'Locality', map: 'addresses>0>Locality', type: 'string' },
                         { name: 'City', map: 'addresses>0>City', type: 'string' },
                         { name: 'State', map: 'addresses>0>State', type: 'string' },
                         { name: 'Country', map: 'addresses>0>Country', type: 'string' }
                     ],
                     id: "pat_id",
                     localdata: precords,
                     hierarchy:
                         {
                             root: "addresses"
                         }
    
                 };
    
        daTreeGridSrc = new $.jqx.dataAdapter(tgSource, {
            loadComplete: function () {
    
            },
            async: false
        });
    
        
        console.log(daTreeGridSrc);
    
        $('#PersonalDataDiv').jqxTreeGrid({
            //width: 600,
            source: daTreeGridSrc.records,
            sortable: true,
            columns: [
                { text: 'Patient ID', dataField: 'pat_id', width: 5 },
                { text: 'Birth Date', dataField: 'dob', cellsFormat: 'D', width: 120 },
                { text: 'No', dataField: 'No', width: 30 },
                { text: 'Street 1', dataField: 'Street1', width: 120 },
                { text: 'Street 2', dataField: 'Street2', width: 120 },
                { text: 'Locality', dataField: 'Locality', width: 120 },
                { text: 'City', dataField: 'City', width: 120 },
                { text: 'State', dataField: 'State', width: 50 },
                { text: 'Country', dataField: 'Country' }
            ]
        });
    
    }

    I just can’t figure out why my TreeGrid won’t initialize 🙁
    I got it working once, but I don’t know what changes I made to do it. Any help would be very much appreciated.
    Thanks guys 🙂

    -AJ

    Problems with TreeGrid and Docking Layout #91185

    anubis76
    Participant

    PS: Forgot to add:

    This is my JSON String that I first get from the Server:

    [{“Id”:{“Timestamp”:1485162536,”Machine”:11567961,”Pid”:28386,”Increment”:4548143,”CreationTime”:”\/Date(1485162536000)\/”},
    “pat_id”:”cad010117″,”pfname”:”Alex”,”plastname”:”Jones”,”dob”:”15th Jun 1997″,”addresses”:[{“No”:”123″,”Street1″:”2nd Cross Road”,”Street2″:”M S Ramaiah City”,”Locality”:”Arekere, Bannerghatta Road”,”City”:”Bengaluru”,”State”:”KA”,”Country”:”India”}],”contact”:[{“Res”:”80-44322344″,”Mob”:”9654323456″,”Email”:”alex.jones@yellowpages.co.in”,”Emergency_contacts”:[{“ecName”:”Alagappa”,”ecNum”:”9987623456″,”ecRel”:”Uncle”,”ecEmail”:”alagappa@randomshop.co.in”}]}]},

    {“Id”: {“Timestamp”:1485162879,”Machine”:11567961,”Pid”:28386,”Increment”:4548144,”CreationTime”:”\/Date(1485162879000)\/”},
    “pat_id”:”cad010118″,”pfname”:”Jenny”,”plastname”:”Adams”,”dob”:”12th Feb 1989″,”addresses”:[{“No”:”321″,”Street1″:”3rd Twisting Road”,”Street2″:”1st Random Inner Circle”,”Locality”:”BTM Layout 2nd Stage”,”City”:”Bengaluru”,”State”:”KA”,”Country”:”India”}],”contact”:[{“Res”:”80-45355354″,”Mob”:”9425876543″,”Email”:”jenny.adams@thebluehat.co.in”,”Emergency_contacts”:[{“ecName”:”Magda Lena”,”ecNum”:”9123456789″,”ecRel”:”Guardian”,”ecEmail”:”magda@lena.co.in”}]}]}]


    Dimitar
    Participant

    Hello AJ,

    The source property of jqxTreeGrid has to be set to the instance of data adapter, not to the data adapter’s records directly, i.e.:

    source: daTreeGridSrc,

    Otherwise, your code looks correct. Please specify if our suggestion helps solve your issue or if you need further assistance.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    anubis76
    Participant

    Hi Dimitar,

    Thank you for your speedy reply 🙂

    I changed the source back to daTreeGridSrc, but the TreeGrid still does not get created :/

    I can’t figure out why. After the ListBox’s DataAdapter fires the LoadComplete event, my global variable precords gets updated. I can see the data inside the Records property of the DataAdapter but it still won’t create the TreeGrid (still get the “Uncaught: Invalid property: width or Invalid property: source” error when loading up.

    Problems with TreeGrid and Docking Layout #91243

    anubis76
    Participant

    Update: FIXED the problem.

    The issue was that my JSON data source had a cyclic redundancy error. Was able to remove it using a script, then passed the Stringified value as the datasource.

    function initPersonalDataTreeGrid() {
        var ds = JSON.stringifyOnce(precords);
        tgSource =
                 {
                     dataType: "json",
                     dataFields: [
                         { name: 'pat_id' },
                         { name: 'dob', type: 'date' },
                         { name: 'addresses', map: 'pat_id>addresses', type: 'array' },
                         { name: 'No', map: 'addresses>0>No', type: 'string' },
                         { name: 'Street1', map: 'addresses>0>Street1', type: 'string' },
                         { name: 'Street2', map: 'addresses>0>Street2', type: 'string' },
                         { name: 'Locality', map: 'addresses>0>Locality', type: 'string' },
                         { name: 'City', map: 'addresses>0>City', type: 'string' },
                         { name: 'State', map: 'addresses>0>State', type: 'string' },
                         { name: 'Country', map: 'addresses>0>Country', type: 'string' }
                     ],
                     id: "pat_id",
                     localdata: ds,
                     hierarchy:
                         {
                             root: "addresses"
                         }
    
                 };
    
        var daTreeGridSrc = new $.jqx.dataAdapter(tgSource, {
            loadComplete: function () {
    
            },
            async: false
        });
    
        daTreeGridSrc.dataBind();
        console.log(daTreeGridSrc);
    
        $('#PersonalDataDiv').jqxTreeGrid({
            width: 600,
            height: 400,
            source: daTreeGridSrc,
            sortable: true,
            columns: [
                { text: 'Patient ID', dataField: 'pat_id', width: 5 },
                { text: 'Birth Date', dataField: 'dob', cellsFormat: 'D', width: 80 },
                { text: 'No', dataField: 'No', width: 30 },
                { text: 'Street 1', dataField: 'Street1', width: 100 },
                { text: 'Street 2', dataField: 'Street2', width: 100 },
                { text: 'Locality', dataField: 'Locality', width: 100 },
                { text: 'City', dataField: 'City', width: 100 },
                { text: 'State', dataField: 'State', width: 50 },
                { text: 'Country', dataField: 'Country' }
            ]
        });
    
    }

    Finally, it works! Cheers to another great component 🙂

    The source code for the StringifyOnce (for removing cyclic redundancies):
    [Add to the top of your JS file]:

    JSON.stringifyOnce = function (obj, replacer, space) {
        var cache = [];
        var json = JSON.stringify(obj, function (key, value) {
            if (typeof value === 'object' && value !== null) {
                if (cache.indexOf(value) !== -1) {
                    // circular reference found, discard key
                    return;
                }
                // store value in our collection
                cache.push(value);
            }
            return replacer ? replacer(key, value) : value;
        }, space);
        cache = null;
        return json;
    };
    Problems with TreeGrid and Docking Layout #91244

    anubis76
    Participant

    Unfortunately, this created even more problems 🙁
    It deleted all the other records in my data source and just left the first one. Back to square one 🙁

    This was the main error that I found in my debugger after clearing my cache and re-running again:

    “TypeError: Converting circular structure to JSON”


    anubis76
    Participant

    Tried this a hundred different ways and can’t get it to work. I can see the data in my console. The records are mapped properly in my dataAdapter. And the funniest part is that it works just fine with Mozilla FireFox but just won’t create in Chrome. Can’t figure it out 🙁


    Dimitar
    Participant

    Hello AJ,

    Could you, please, clarify if this jqxTreeGrid issue occurs only when your tree grid is inside a jqxDockingLayout? Please note that there is a limited support of what can be persisted using the docking layout’s saveLayout method (I am not sure if it is used by you). For more information and possible solutions, please refer to these topics: modifying jqxdockinglayout content and Problems persisting docking layout.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

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

You must be logged in to reply to this topic.