create hyperlink on child value - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: child, hyperlink, jqxtree, Tree

This topic contains 9 replies, has 2 voices, and was last updated by Nadezhda 10 years, 4 months ago.

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

Author

create hyperlink on child value Posts

October 20, 2014 at 2:08 am create hyperlink on child value #61343

sathiyaseelan8

Participant

hi,

is there any way we can create hyperlink for the child value in jqxtree.

example:

>parent
>child
><u>another child</u>(when clicked on this child, it must redirect user to the specified link)

thanks in advance.

October 20, 2014 at 7:17 am create hyperlink on child value #61356

Nadezhda

Participant

Hello sathiyaseelan8,

Here is an example which shows how to add link to child(of child) element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></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/jqxdata.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">
        $(document).ready(function () {
            var data = [
            {
                "id": "2",
                "parentid": "1",
                "text": "Hot Chocolate",
                "value": "$2.3"
            }, {
                "id": "3",
                "parentid": "1",
                "text": "Peppermint Hot Chocolate",
                "value": "$2.3"
            }, {
                "id": "4",
                "parentid": "1",
                "text": "Salted Caramel Hot Chocolate",
                "value": "$2.3"
            }, {
                "id": "5",
                "parentid": "1",
                "text": "White Hot Chocolate",
                "value": "$2.3"
            }, {
                "text": "Chocolate Beverage",
                "id": "1",
                "parentid": "-1",
                "value": "$2.3"
            }, {
                "id": "6",
                "text": "Espresso Beverage",
                "parentid": "-1",
                "value": "$2.3"
            }, {
                "id": "7",
                "parentid": "6",
                "text": "Caffe Americano",
                "value": "$2.3"
            }, {
                "id": "8",
                "text": "Caffe Latte",
                "parentid": "6",
                "value": "$2.3"
            }, {
                "id": "9",
                "text": "Caffe Mocha",
                "parentid": "6",
                "value": "$2.3"
            }, {
                "id": "10",
                "text": "Cappuccino",
                "parentid": "6",
                "value": "$2.3"
            }, {
                "id": "11",
                "text": "Pumpkin Spice Latte",
                "parentid": "6",
                "value": "$2.3"
            }, {
                "id": "12",
                "text": "Frappuccino",
                "parentid": "-1"
            }, {
                "id": "13",
                "text": "Caffe Vanilla Frappuccino",
                "parentid": "12",
                "value": "$2.3"
            }, {
                "id": "15",
                "text": "450 calories",
                "parentid": "13",
                "value": "$2.3"
            }, {
                "id": "16",
                "text": "16g fat",
                "parentid": "13",
                "value": "$2.3"
            }, {
                "id": "17",
                "text": "13g protein",
                "parentid": "13",
                "value": "$2.3"
            }, {
                "id": "14",
                "text": "Caffe Vanilla Frappuccino Light",
                "parentid": "12",
                "value": "$2.3"
            }]
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'id' },
                    { name: 'parentid' },
                    { name: 'text' },
                    { name: 'value' }
                ],
                id: 'id',
                localdata: data
            };
 
            // create data adapter.
            var dataAdapter = new $.jqx.dataAdapter(source);
                             
            // perform Data Binding.
            dataAdapter.dataBind();
            // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
            // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
            // specifies the mapping between the 'text' and 'label' fields.  
            var myList = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]);           
            $('#jqxTree').jqxTree({ source: myList, width: '300px' });            
            $('#15').wrap('<a target="_blank" href="http://www.jqwidgets.com/"/>');
        });
    </script>
</head>
<body>
    <div id='content'>
        <div id='jqxTree'>
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

October 20, 2014 at 7:59 am create hyperlink on child value #61362

sathiyaseelan8

Participant

hi Nadezhda,

thank you so much for your respond.

now my concern is, i am getting data for JQXTREE using JSON method which pull data from database. i need to create hyperlink for all the child of child.

if i follow your method as below:
$(‘#15’).wrap(‘‘);

then i need to declare link for all the child one by one manually. i might display thousand rows of data, declaring link one by one is not a good idea i guess.

is there any other way??

thanks

October 20, 2014 at 12:13 pm create hyperlink on child value #61381

Nadezhda

Participant

Hi sathiyaseelan8,

Please, find below an example which shows how to add link to multiple child elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></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/jqxdata.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>
    <style>
       .jqx-tree-item a:link, .jqx-tree-item a:visited {
            color: blue;
            text-decoration: underline;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = [
            {
                "id": "2",
                "parentid": "1",
                "text": "Hot Chocolate",
                "value": "$2.3"
            }, {
                "id": "3",
                "parentid": "1",
                "text": "Peppermint Hot Chocolate",
                "value": "$2.3"
            }, {
                "id": "4",
                "parentid": "1",
                "text": "Salted Caramel Hot Chocolate",
                "value": "$2.3"
            }, {
                "id": "5",
                "parentid": "1",
                "text": "White Hot Chocolate",
                "value": "$2.3"
            }, {
                "text": "Chocolate Beverage",
                "id": "1",
                "parentid": "-1",
                "value": "$2.3"
            }, {
                "id": "6",
                "text": "Espresso Beverage",
                "parentid": "-1",
                "value": "$2.3"
            }, {
                "id": "7",
                "parentid": "6",
                "text": "Caffe Americano",
                "value": "$2.3"
            }, {
                "id": "8",
                "text": "Caffe Latte",
                "parentid": "6",
                "value": "$2.3"
            }, {
                "id": "9",
                "text": "Caffe Mocha",
                "parentid": "6",
                "value": "$2.3"
            }, {
                "id": "10",
                "text": "Cappuccino",
                "parentid": "6",
                "value": "$2.3"
            }, {
                "id": "11",
                "text": "Pumpkin Spice Latte",
                "parentid": "6",
                "value": "$2.3"
            }, {
                "id": "12",
                "text": "Frappuccino",
                "parentid": "-1"
            }, {
                "id": "13",
                "text": "Caffe Vanilla Frappuccino",
                "parentid": "12",
                "value": "$2.3"
            }, {
                "id": "15",
                "text": "450 calories",
                "parentid": "13",
                "value": "$2.3"
            }, {
                "id": "16",
                "text": "16g fat",
                "parentid": "13",
                "value": "$2.3"
            }, {
                "id": "17",
                "text": "13g protein",
                "parentid": "13",
                "value": "$2.3"
            }, {
                "id": "14",
                "text": "Caffe Vanilla Frappuccino Light",
                "parentid": "12",
                "value": "$2.3"
            }]
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'id' },
                    { name: 'parentid' },
                    { name: 'text' },
                    { name: 'value' }
                ],
                id: 'id',
                localdata: data
            };

            // create data adapter.
            var dataAdapter = new $.jqx.dataAdapter(source);

            // perform Data Binding.
            dataAdapter.dataBind();
            // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
            // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
            // specifies the mapping between the 'text' and 'label' fields.  
            var myList = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]);
            $('#jqxTree').jqxTree({ source: myList, width: '300px' });
            var treeItems = $("#jqxTree").jqxTree('getItems');
            for (var i = 0; i < treeItems.length; i++) {
                if (treeItems[i].level == 2) {
                    $('#jqxTree').jqxTree('updateItem', treeItems[i], { label: "<a target='_blank' href='http://www.jqwidgets.com/'>" + treeItems[i].label + "</a>" });
                }
            }
        });
    </script>
</head>
<body>
    <div id='content'>
        <div id='jqxTree'>
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

October 30, 2014 at 3:19 am create hyperlink on child value #61834

sathiyaseelan8

Participant

hi Nadezhda

i tried to run your above example and its working. i can see the hyperlinks on the child value of a child.

but when i applied it into my program, its not working.

below is my code:

 var disp_tree = function() {
				$('#jqxTree').html('<img src="js/jqwidgets/resources/loader_2.gif"><img>');
			
				var search = document.getElementById('txt_input').value;
				var cate = document.getElementById('ddl_list').value;
				
				var source =
					{
						datatype: 'json',
						datafields: [
							{ name: 'id' },
							{ name: 'parentid' },
							{ name: 'text' },
							{ name: 'value' }
						],
						//theme: theme,
						url: 'tree_view.php?search='+search+"&cate="+cate,
						id: 'id',
						//root: 'data',
						async: false
					};
					// create data adapter.
					var dataAdapter = new $.jqx.dataAdapter(source);
					// perform Data Binding.
					dataAdapter.dataBind();
					// get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
					// the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
					// specifies the mapping between the 'text' and 'label' fields. 
					var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
					$('#jqxTree').jqxTree({ source: records, width: '300px'});
					// create hyperlinks
					var treeItems = $('#jqxTree').jqxTree('getItems');
					for (var i = 0; i < treeItems.length; i++) {
						if (treeItems[i].level == 2) {
							alert(treeItems[i].label);
							$('#jqxTree').jqxTree('updateItem', treeItems[i], { label: "<a target='_blank' href='http://www.jqwidgets.com/'>" + treeItems[i].label + "</a>" });
						}
					}
				};

here is my JSON data:

[{"id":"0000003802","parentid":"-1","text":"|aDARI HATI KA HATI","value":""},
{"id":"0000004598","parentid":"-1","text":"|aLAMBAIAN (tajuk album)","value":""},
{"id":"0000004904","parentid":"-1","text":"|aSOLEHAH - NIKMAT ALLAH (ALBUM)","value":""},
{"id":"0000004859","parentid":"-1","text":"|aTAFAKUR ( tajuk album)","value":""},
{"id":"0000076072","parentid":"0000003802","text":"MALAY","value":""},
{"id":"0000079660","parentid":"0000004598","text":"MALAY","value":""},
{"id":"0000081004","parentid":"0000004904","text":"MALAY","value":""},
{"id":"0000080747","parentid":"0000004859","text":"MALAY","value":""},
{"id":"0000029209","parentid":"0000076072","text":"ILMU KEBAHAGIAAN HIDOP PIRING HITAM EP LULUS","value":""},
{"id":"0000032743","parentid":"0000079660","text":"ILMU CD","value":""},
{"id":"0000034073","parentid":"0000081004","text":"ILMU DAN AMAL CD","value":""},
{"id":"0000033825","parentid":"0000080747","text":"ILMU AKHIRAT CD","value":""}]

thanks

October 30, 2014 at 8:12 am create hyperlink on child value #61852

Nadezhda

Participant

Hi sathiyaseelan8,

Here is an example which works on our side. This is issue is probably in url: 'tree_view.php?search=' + search + "&cate=" + cate .

<!DOCTYPE html>
<html lang="en">
<head>
    <title></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/jqxdata.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>
    <style>
       .jqx-tree-item a:link, .jqx-tree-item a:visited {
            color: blue;
            text-decoration: underline;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = [
            { "id": "0000003802", "parentid": "-1", "text": "|aDARI HATI KA HATI", "value": "" },
            { "id": "0000004598", "parentid": "-1", "text": "|aLAMBAIAN (tajuk album)", "value": "" },
            { "id": "0000004904", "parentid": "-1", "text": "|aSOLEHAH - NIKMAT ALLAH (ALBUM)", "value": "" },
            { "id": "0000004859", "parentid": "-1", "text": "|aTAFAKUR ( tajuk album)", "value": "" },
            { "id": "0000076072", "parentid": "0000003802", "text": "MALAY", "value": "" },
            { "id": "0000079660", "parentid": "0000004598", "text": "MALAY", "value": "" },
            { "id": "0000081004", "parentid": "0000004904", "text": "MALAY", "value": "" },
            { "id": "0000080747", "parentid": "0000004859", "text": "MALAY", "value": "" },
            { "id": "0000029209", "parentid": "0000076072", "text": "ILMU KEBAHAGIAAN HIDOP PIRING HITAM EP LULUS", "value": "" },
            { "id": "0000032743", "parentid": "0000079660", "text": "ILMU CD", "value": "" },
            { "id": "0000034073", "parentid": "0000081004", "text": "ILMU DAN AMAL CD", "value": "" },
            { "id": "0000033825", "parentid": "0000080747", "text": "ILMU AKHIRAT CD", "value": "" }
            ]             
            
            var disp_tree = function () {
                $('#jqxTree').html('<img src="../../jqwidgets/styles/images/loader.gif"><img>');

                var search = document.getElementById('txt_input').value;
                var cate = document.getElementById('ddl_list').value;
            };
                var source =
					{
					    datatype: 'json',
					    datafields: [
							{ name: 'id' },
							{ name: 'parentid' },
							{ name: 'text' },
							{ name: 'value' }
					    ],
					    //url: 'tree_view.php?search=' + search + "&cate=" + cate,
					    id: 'id',
					    localdata: data,
					    async: false
					};
                // create data adapter.
                var dataAdapter = new $.jqx.dataAdapter(source);
                // perform Data Binding.
                dataAdapter.dataBind();
                // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
                // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
                // specifies the mapping between the 'text' and 'label' fields. 
                var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]);
                $('#jqxTree').jqxTree({ source: records, width: '300px' });
                // create hyperlinks
                var treeItems = $('#jqxTree').jqxTree('getItems');
                for (var i = 0; i < treeItems.length; i++) {
                    if (treeItems[i].level == 2) {
                        alert(treeItems[i].label);
                        $('#jqxTree').jqxTree('updateItem', treeItems[i], { label: "<a target='_blank' href='http://www.jqwidgets.com/'>" + treeItems[i].label + "</a>" });
                    }
                }           
        });
    </script>
</head>
<body>
    <div id='content'>
        <div id='jqxTree'>
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

October 30, 2014 at 8:32 am create hyperlink on child value #61858

sathiyaseelan8

Participant

hi Nadezhda

is that means your solution only works for local data? how if i want to create hyperlink using JSON method?

thanks

October 30, 2014 at 3:14 pm create hyperlink on child value #61887

Nadezhda

Participant

Hi sathiyaseelan8,

The solution works with local and remote data because it is used async: false. When you calling var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]); the dataAdapter should have the data.

Best Regards,
Nadezhda

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

November 4, 2014 at 2:32 am create hyperlink on child value #62070

sathiyaseelan8

Participant

hi Nadezhda

i still could not find a solution for this. is there any other way to solve it.

i try changed async : true but it still not working.

thank you

November 4, 2014 at 9:20 am create hyperlink on child value #62088

Nadezhda

Participant

Hi sathiyaseelan8,

If you set ‘async’ option to false you will use synchronous requests. When the binding is “asynchronous”, the data binding operation occurs in parallel and the order of completion is not guaranteed.

Best Regards,
Nadezhda

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

Author

Posts

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

You must be logged in to reply to this topic.