How to add jqxTree programatically? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: add, addto, angular tree, dynamic, item, jquery tree, jqxtree, populate, programmatically, Tree

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

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

Author

How to add jqxTree programatically? Posts

June 25, 2015 at 9:35 am How to add jqxTree programatically? #72986

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..

June 25, 2015 at 9:42 am 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/

June 25, 2015 at 10:41 am 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

June 25, 2015 at 12:04 pm 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/

June 26, 2015 at 6:12 am 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

June 26, 2015 at 7:55 am 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/

June 26, 2015 at 8:52 am How to add jqxTree programatically? #73069

shyselsasi

Participant

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

June 26, 2015 at 1:02 pm 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/

June 29, 2015 at 8:12 am How to add jqxTree programatically? #73128

shyselsasi

Participant

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.

June 29, 2015 at 10:48 am 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/

June 30, 2015 at 6:02 am How to add jqxTree programatically? #73176

shyselsasi

Participant

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?

June 30, 2015 at 6:09 am How to add jqxTree programatically? #73178

shyselsasi

Participant

And I am trying to get result like this..

June 30, 2015 at 11:47 am 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/

June 30, 2015 at 12:01 pm How to add jqxTree programatically? #73196

shyselsasi

Participant

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.

July 1, 2015 at 7:19 am How to add jqxTree programatically? #73227

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/

Author

Posts

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

You must be logged in to reply to this topic.