jQuery UI Widgets Forums Navigation Tree create hyperlink on child value

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • 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.

    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/

    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

    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/

    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

    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/

    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

    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/

    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

    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/

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

You must be logged in to reply to this topic.