jQuery UI Widgets Forums Navigation Tree How to add jqxTree programatically?

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

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
  • How to add jqxTree programatically? #72986

    shyselsasi
    Participant

    Hi,
    I want to populate a jqxTree programatically.
    I tried like this,but data is not populated.
    $.getJSON(uri).done(function (data) {

    var firstElement = $(‘#jqxTree’).find(“#home”);
    $.each(data, function (index, levelInfoDetail) {

    $(‘#jqxTree’).jqxTree(‘addTo’, {
    label: levelInfoDetail.levelName, id: levelInfoDetail.levelID, icon: “jqwidgets/images/folderIcon.png”
    }, firstElement, false);

    var itemElement = $(‘#jqxTree’).find(“#” + levelInfoDetail.levelID);

    $.each(levelInfoDetail.listData, function (indexInner, dataInfoDetail) {
    // alert(dataInfoDetail.dataName);
    $(‘#jqxTree’).jqxTree(‘addTo’,
    { label: dataInfoDetail.dataName, id: levelInfoDetail.levelID + “#” + dataInfoDetail.dataID, value: dataInfoDetail.dataID, parentid: levelInfoDetail.levelID }, itemElement, false);
    });
    });
    $(‘#jqxTree’).jqxTree(‘render’);
    alert(“d”);

    });*/

    Thanks in advance..

    How to add jqxTree programatically? #72987

    Dimitar
    Participant

    Hi shyselsasi,

    Could you also post some sample data so that we can test your scenario?

    Best Regards,
    Dimitar

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

    How to add jqxTree programatically? #72993

    shyselsasi
    Participant

    Hi Dimitar,
    My JSON data is array with in an array.Data and listData are the arrays.listData array is inside the data.The subitems that i want to populate is inside the listdata array.

    Thanks

    How to add jqxTree programatically? #72998

    Dimitar
    Participant

    Hi shyselsasi,

    We need some of the data to test your code. If it is sensitive, you can create a mockup data source, as is the case with our demos. We just need to see if the structure you have would work correctly when iterated by your JavaScript code.

    Best Regards,
    Dimitar

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

    How to add jqxTree programatically? #73052

    shyselsasi
    Participant

    Hi Dimitar,

    Here is the data source

    Data=[{

    levelID: “1”
    levelName: “DMRecordStore”
    listData: Array[0]

    },
    {
    levelID: “2”
    levelName: “Level1”
    listData=[{
    dataID: 1
    dataName: “Association, Aggregation and Composition.pdf”
    levelID: “2”
    levelName: “Level1”
    },
    {
    dataID: 2
    dataName: “Difference between LINQ to SQL and Entity Framework.pdf”
    levelID: “2”
    levelName: “Level1”
    }]

    },

    {
    levelID: “3”
    levelName: “Level2”
    listData=[{
    dataID: 6
    dataName: “DSC00636.JPG”
    levelID: “3”
    levelName: “Level2”
    },
    {
    dataID: 7
    dataName: “DSC00636.JPG”
    levelID: “3”
    levelName: “Level2”
    }]
    }]

    Thanks

    How to add jqxTree programatically? #73068

    Dimitar
    Participant

    Hi shyselsasi,

    The following example using your code works fine on our side:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta name="keywords" content="jQuery Tree, Tree Widget, TreeView" />
        <meta name="description" content="The jqxTree displays a hierarchical collection of items. You
            can populate it from 'UL' or by using its 'source' property." />
        <title id='Description'>The jqxTree displays a hierarchical collection of items. You
            can populate it from 'UL' or by using its 'source' property.</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create jqxTree
                $('#jqxTree').jqxTree({ height: '450px', width: '300px' });
    
                var data = Data = [{
    
                    levelID: "1",
                    levelName: "DMRecordStore",
                    listData: []
    
                }, {
                    levelID: "2",
                    levelName: "Level1",
                    listData: [{
                        dataID: 1,
                        dataName: "Association, Aggregation and Composition.pdf",
                        levelID: "2",
                        levelName: "Level1"
                    }, {
                        dataID: 2,
                        dataName: "Difference between LINQ to SQL and Entity Framework.pdf",
                        levelID: "2",
                        levelName: "Level1"
                    }]
    
                },
    
                    {
                        levelID: "3",
                        levelName: "Level2",
                        listData: [{
                            dataID: 6,
                            dataName: "DSC00636.JPG",
                            levelID: "3",
                            levelName: "Level2"
                        }, {
                            dataID: 7,
                            dataName: "DSC00636.JPG",
                            levelID: "3",
                            levelName: "Level2"
                        }]
                    }
                ]
    
                var firstElement = $('#jqxTree').find("#home");
                $.each(data, function (index, levelInfoDetail) {
    
                    $('#jqxTree').jqxTree('addTo', {
                        label: levelInfoDetail.levelName,
                        id: levelInfoDetail.levelID,
                        icon: "jqwidgets/images/folderIcon.png"
                    }, firstElement, false);
    
                    var itemElement = $('#jqxTree').find("#" + levelInfoDetail.levelID);
    
                    $.each(levelInfoDetail.listData, function (indexInner, dataInfoDetail) {
                        // alert(dataInfoDetail.dataName);
                        $('#jqxTree').jqxTree('addTo', {
                            label: dataInfoDetail.dataName,
                            id: levelInfoDetail.levelID + "#" + dataInfoDetail.dataID,
                            value: dataInfoDetail.dataID,
                            parentid: levelInfoDetail.levelID
                        }, itemElement, false);
                    });
                });
                $('#jqxTree').jqxTree('render');
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxTree' style='margin-left: 20px;'>
            <ul>
                <li id='home'>Home</li>
            </ul>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    How to add jqxTree programatically? #73069

    shyselsasi
    Participant

    Hi

    Thank you so much for your immediate reply.I have one more doubt.
    Suppose if I add this item to the above data source
    {
    levelID: “6”,
    levelName: “ChildLevel11”,
    listData: []
    }
    I want to make this item as the child of levelID: “2″,levelName: “Level1″ along with the already existing subitem..What should I do for the same?

    Thank

    How to add jqxTree programatically? #73085

    Dimitar
    Participant

    Hi shyselsasi,

    Here is an updated version of the example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta name="keywords" content="jQuery Tree, Tree Widget, TreeView" />
        <meta name="description" content="The jqxTree displays a hierarchical collection of items. You
            can populate it from 'UL' or by using its 'source' property." />
        <title id='Description'>The jqxTree displays a hierarchical collection of items. You
            can populate it from 'UL' or by using its 'source' property.</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create jqxTree
                $('#jqxTree').jqxTree({ height: '450px', width: '300px' });
    
                var data = Data = [{
    
                    levelID: "1",
                    levelName: "DMRecordStore",
                    listData: []
    
                }, {
                    levelID: "2",
                    levelName: "Level1",
                    listData: [{
                        dataID: 1,
                        dataName: "Association, Aggregation and Composition.pdf",
                        levelID: "2",
                        levelName: "Level1"
                    }, {
                        dataID: 2,
                        dataName: "Difference between LINQ to SQL and Entity Framework.pdf",
                        levelID: "2",
                        levelName: "Level1"
                    }]
    
                },
    
                    {
                        levelID: "3",
                        levelName: "Level2",
                        listData: [{
                            dataID: 6,
                            dataName: "DSC00636.JPG",
                            levelID: "3",
                            levelName: "Level2"
                        }, {
                            dataID: 7,
                            dataName: "DSC00636.JPG",
                            levelID: "3",
                            levelName: "Level2"
                        }]
                    }
                ]
    
                var firstElement = $('#jqxTree').find("#home");
                $.each(data, function (index, levelInfoDetail) {
    
                    $('#jqxTree').jqxTree('addTo', {
                        label: levelInfoDetail.levelName,
                        id: levelInfoDetail.levelID,
                        icon: "jqwidgets/images/folderIcon.png"
                    }, firstElement, false);
    
                    var itemElement = $('#jqxTree').find("#" + levelInfoDetail.levelID);
    
                    $.each(levelInfoDetail.listData, function (indexInner, dataInfoDetail) {
                        // alert(dataInfoDetail.dataName);
                        $('#jqxTree').jqxTree('addTo', {
                            label: dataInfoDetail.dataName,
                            id: levelInfoDetail.levelID + "#" + dataInfoDetail.dataID,
                            value: dataInfoDetail.dataID,
                            parentid: levelInfoDetail.levelID
                        }, itemElement, false);
                    });
                });
                $('#jqxTree').jqxTree('render');
    
                $('#addNewItem').click(function () {
                    var parent = $('#jqxTree').jqxTree('getItem', $('#2')[0]);
                    $('#jqxTree').jqxTree('addTo', { label: 'ChildLevel11', id: '6' }, parent);
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxTree' style='margin-left: 20px;'>
            <ul>
                <li id='home'>Home</li>
            </ul>
        </div>
        <br />
        <button id="addNewItem">
            Add new item</button>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    How to add jqxTree programatically? #73128

    shyselsasi
    Participant

    Hi

    Actually I want it programatically without any button click.My scenario is if there is a child,it will be added automatically .

    Thanks in advance.

    How to add jqxTree programatically? #73139

    Dimitar
    Participant

    Hi shyselsasi,

    Then just call the code in the click handler whenever you wish:

    var parent = $('#jqxTree').jqxTree('getItem', $('#2')[0]);
    $('#jqxTree').jqxTree('addTo', { label: 'ChildLevel11', id: '6' }, parent);

    Best Regards,
    Dimitar

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

    How to add jqxTree programatically? #73176

    shyselsasi
    Participant

    Hi

    Sorry,my scenario is not like that..
    Here is the source.
    Data=[{

    levelID: “1”,
    levelName: “DMRecordStore”,
    parentLevelID: “-1”,
    listData: Array[0]

    },
    {
    levelID: “2”,
    levelName: “Level1”,
    parentLevelID: “-1”,
    listData=[{
    dataID: 1
    dataName: “Association, Aggregation and Composition.pdf”
    levelID: “2”
    levelName: “Level1”
    },
    {
    dataID: 2
    dataName: “Difference between LINQ to SQL and Entity Framework.pdf”
    levelID: “2”
    levelName: “Level1”
    }]

    },

    {
    levelID: “3”,
    levelName: “Level2”,
    parentLevelID: “-1”,
    listData=[{
    dataID: 6
    dataName: “DSC00636.JPG”
    levelID: “3”
    levelName: “Level2”
    },
    {
    dataID: 7
    dataName: “DSC00636.JPG”
    levelID: “3”
    levelName: “Level2”
    }
    }]
    },
    {
    levelID: “4”,
    levelName: “ChildLevel21”,
    listData: Array[0],
    parentLevelID: “3”,
    listData: Array[0]
    },
    {
    levelID: “5”,
    levelName: “ChildLevel22”,
    parentLevelID: “3”,
    listData: Array[0]
    },
    {
    levelID: “6”,
    levelName: “ChildLevel11”,
    parentLevelID: “2”,
    listData: Array[0]
    },
    {
    levelID: “7”,
    levelName: “Level3”,
    parentLevelID: “-1”,
    listData: Array[0]
    },
    {
    levelID: “8”,
    levelName: “ChilLevel31”,
    parentLevelID: “7”,
    listData: Array[0]
    },
    {
    levelID: “9”,
    levelName: “ChildLevel311”,
    parentLevelID: “8”,
    listData: Array[0]
    }

    parentLevelID: “-1” =>means that level have no parent level.
    ChildLevel11 is the child of Level1.
    ChildLevel21 and ChildLevel22 is the child of Level2.
    ChilLevel31 is the child level of Level3.
    ChildLevel311 is the child of ChilLevel31 .

    listData contains the files for each level.
    And I am trying to get result like this..

    Level1
    Association, Aggregation and Composition.pdf
    Difference between LINQ to SQL and Entity Framework.pdf
    ChildLevel11
    Level2
    DSC00636.JPG
    ChildLevel21
    ChildLevel22
    Level3
    ChildLevel31
    ChildLevel311

    How can I create a tree using the above source?

    How to add jqxTree programatically? #73178

    shyselsasi
    Participant

    And I am trying to get result like this..

    Level1
    Association, Aggregation and Composition.pdf
    Difference between LINQ to SQL and Entity Framework.pdf
    ChildLevel11
    Level2
    DSC00636.JPG
    ChildLevel21
    ChildLevel22
    Level3
    ChildLevel31
    ChildLevel311

    How to add jqxTree programatically? #73194

    Dimitar
    Participant

    Hi shyselsasi,

    This can wasily be achieved with the following data structure:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var source = [{
                    label: "Level1",
                    expanded: true,
                    items: [{
                        label: 'Association, Aggregation and Composition.pdf'
                    }, {
                        label: 'Difference between LINQ to SQL and Entity Framework.pdf'
                    }, {
                        label: "ChildLevel11"
                    }]
                }, {
                    label: "Level2",
                    expanded: true,
                    items: [{
                        label: "DSC00636.JPG"
                    }, {
                        label: "ChildLevel21"
                    }, {
                        label: "ChildLevel22"
                    }]
                }, {
                    label: "Level3",
                    expanded: true,
                    items: [{
                        label: "ChildLevel31",
                        expanded: true,
                        items: [{
                            label: 'ChildLevel311'
                        }]
                    }]
                }];
    
                $('#jqxTree').jqxTree({ source: source, width: 450, height: 400 });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxTree'>
        </div>
    </body>
    </html>

    Is this the result you are looking for?

    Best Regards,
    Dimitar

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

    How to add jqxTree programatically? #73196

    shyselsasi
    Participant

    Hi

    Like this,but I need more details like your previous code..I want to populate programatically.?I have more items and subitems in my original source.Your previous code is suit for me,but I have to add subitems too..
    Here is the source.
    Data=[{

    levelID: “1”,
    levelName: “DMRecordStore”,
    parentLevelID: “-1”,
    listData: Array[0]

    },
    {
    levelID: “2″,
    levelName: “Level1″,
    parentLevelID: “-1″,
    listData=[{
    dataID: 1
    dataName: “Association, Aggregation and Composition.pdf”
    levelID: “2”
    levelName: “Level1”
    },
    {
    dataID: 2
    dataName: “Difference between LINQ to SQL and Entity Framework.pdf”
    levelID: “2”
    levelName: “Level1”
    }]

    },

    {
    levelID: “3″,
    levelName: “Level2″,
    parentLevelID: “-1″,
    listData=[{
    dataID: 6
    dataName: “DSC00636.JPG”
    levelID: “3”
    levelName: “Level2”
    },
    {
    dataID: 7
    dataName: “DSC00636.JPG”
    levelID: “3”
    levelName: “Level2”
    }
    }]
    },
    {
    levelID: “4″,
    levelName: “ChildLevel21″,
    listData: Array[0],
    parentLevelID: “3″,
    listData: Array[0]
    },
    {
    levelID: “5″,
    levelName: “ChildLevel22″,
    parentLevelID: “3″,
    listData: Array[0]
    },
    {
    levelID: “6″,
    levelName: “ChildLevel11″,
    parentLevelID: “2″,
    listData: Array[0]
    },
    {
    levelID: “7″,
    levelName: “Level3″,
    parentLevelID: “-1″,
    listData: Array[0]
    },
    {
    levelID: “8″,
    levelName: “ChilLevel31″,
    parentLevelID: “7″,
    listData: Array[0]
    },
    {
    levelID: “9″,
    levelName: “ChildLevel311″,
    parentLevelID: “8″,
    listData: Array[0]
    }

    parentLevelID: “-1″ =>means that level have no parent level.
    ChildLevel11 is the child of Level1.
    ChildLevel21 and ChildLevel22 is the child of Level2.
    ChilLevel31 is the child level of Level3.
    ChildLevel311 is the child of ChilLevel31 .

    listData contains the files for each level.


    Dimitar
    Participant

    Hi shyselsasi,

    The supported formats (relevant to this issue) are the one I showed you in my previous post and the one shown in the demo JSON Tree. If you cannot change your data to be loaded in any of these formats, you would have to manually convert it to one of them. However, we cannot provide you with any more guidance on the matter.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.