jQuery UI Widgets Forums Navigation Tree JqxTree Not Working

This topic contains 12 replies, has 4 voices, and was last updated by  Dimitar 8 years, 6 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • JqxTree Not Working #63765

    Sugesh
    Participant

    Hi All,

    I am using Jqxtree for my application. When i loaded the data from server on page load its working fine. Treeview looks good. But when i trigger the data from dropdown change load the data from server the treeview get collapsed. Please help me on this issue. After binding the data on page load i call this $(“#jqxTree”).html(data.d);
    $(‘#jqxTree’).jqxTree({ height: ‘auto’, width: ‘auto’, hasThreeStates: true, checkboxes: true, loadItems: true });

    But in dropdown change i get the different data from server $(“#jqxTree”).html(data.d);
    $(‘#jqxTree’).jqxTree({ height: ‘auto’, width: ‘auto’, hasThreeStates: true, checkboxes: true, loadItems: true }); i Called the above two lines but my tree view get collapsed.

    When i comment the page load $(‘#jqxTree’).jqxTree({ height: ‘auto’, width: ‘auto’, hasThreeStates: true, checkboxes: true, loadItems: true });
    Jquery call. Drop down change event is working and treeview design is good. But i need to work with two process. Either one is woring. Please help on these

    JqxTree Not Working #63779

    Nadezhda
    Participant

    Hello Sugesh,

    Please, provide a full sample which demonstrates this behavior.

    Best Regards,
    Nadezhda

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

    JqxTree Not Working #63780

    Sugesh
    Participant

    <link rel=”Stylesheet” type=”text/css” href=”CSS/StyleSheetj.css” />
    <script type=”text/javascript” language=”javascript” src=”Scripts/jquery-1.4.1.min.js”></script>
    <script type=”text/javascript” language=”javascript” src=”Scripts/jqwidgets-jqxcore.js”></script>
    <script type=”text/javascript” language=”javascript” src=”Scripts/jqwidgets-jqxbuttons.js”></script>
    <script type=”text/javascript” language=”javascript” src=”Scripts/jqwidgets-jqxscrollbar.js”></script>
    <script type=”text/javascript” language=”javascript” src=”Scripts/jqwidgets-jqxpanel.js”></script>
    <script type=”text/javascript” language=”javascript” src=”Scripts/jqwidgets-jqxtree.js”></script>
    <script type=”text/javascript” language=”javascript” src=”Scripts/jqwidgets-jqxcheckbox.js”></script>

    Here is the page Load Function as follows :
    var source = null;
    $(document).ready(function () {
    $.ajax({
    type: “POST”,
    contentType: “application/json; charset=utf-8”,
    url: “WebService/TreeviewCheckbox.asmx/TreeviewDataCheckBox”,
    data: “{}”,
    dataType: “json”,
    success: function (data) {

    source = data.d;
    },
    error: function (result) {
    alert(“Error”);
    },
    complete: function () {
    $(“#jqxTree”).html(source);
    $(‘#jqxTree’).jqxTree({ height: ‘auto’, width: ‘auto’, hasThreeStates: true, checkboxes: true, loadItems: true });
    },
    });
    });
    Page Load is working Fine
    The Problem is I need to go to the server and get the data in dropdown change. When i want to append the html and recall the JQXtree function is not working. Design is collapsed. Code is shown below.
    var Output_source=null;
    function GetApprove(GroupID) {
    $.ajax({
    type: “POST”,
    contentType: “application/json; charset=utf-8”,
    url: “WebService/TreeviewCheckbox.asmx/TreeviewCheckBoxApprove”,
    data: “{GroupID:'” + GroupID + “‘}”,
    dataType: “json”,
    success: function (data) {
    //$(“#jqxTree”).html(“”);
    $(“#jqxTree”).removeClass();
    Output_source = data.d;
    },
    error: function (result) {
    alert(“Error” + result);
    },
    complete: function () {
    $(“#jqxTree”).html(Output_source);
    $(‘#jqxTree’).jqxTree({ height: ‘auto’, width: ‘auto’, hasThreeStates: true, checkboxes: true, loadItems: true,expand:true });
    },
    });
    }

    Note :

    If i comment the $(‘#jqxTree’).jqxTree({}); in page load Dropdown change GetApprove(GroupID) working correctly. Either one is working at a time. I need to Work both. Please help me on this

    JqxTree Not Working #63787

    Nadezhda
    Participant

    Hi Sugesh,

    You are using jqxTree properties that are not supported – loadItems and expand. Please, take them out from jqxTree initialization. When you want to refresh jqxTree on the web page you should remove it and after that create it to the page.

    Best Regards,
    Nadezhda

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

    JqxTree Not Working #63809

    Sugesh
    Participant

    Hi Nadezhda,

    Yes, I removed loadItems and expand in the jqxtree initialization but no luck. I calling in page Load Working fine. I am using jquery to get data from the server. So the page is not load or postback. when the user change the dropdown i need to pass the value and get the data from the server in the same page and rebind it. I tried all the things. Before i bind i clear the div and rebind it and call the jqxtree initialization but no luck. Tree view designed is collapsed. Please help me on this.

    JqxTree Not Working #63820

    Nadezhda
    Participant

    Hi Sugesh,

    Please, provide us with your jqxDropDownList part of code,binding and rebinding code, and remember to format it by selecting it and pressing the code button in the toolbar.

    Best Regards,
    Nadezhda

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

    JqxTree Not Working #63822

    Sugesh
    Participant

    Drop Down Change :
    $(“#ddlPrevilegeID”).change(function () {
    if ($(“#ddlGropID”).val() != 0)
    {
    if ($(“#ddlPrevilegeID”).val() == 0)
    {
    //ApproveCheckBox();
    $(“input.New-check”).attr(“disabled”, true);
    }
    else
    {
    $(“input.New-check”).attr(“disabled”, false);
    var GroupID = $(“#ddlGropID”).val();
    GetApprove(GroupID); /// This is the function called in dropdown change
    }
    }
    else
    {
    alert(“First Select GroupName..!”)
    $(“#ddlPrevilegeID”).val(“0”);
    }
    });
    Function as Follows :

    var source=null;`
    function GetApprove(GroupID) {
    $.ajax({
    type: “POST”,
    contentType: “application/json; charset=utf-8”,
    url: “WebService/TreeviewCheckbox.asmx/TreeviewCheckBoxApprove”,
    data: “{GroupID:'” + GroupID + “‘}”,
    dataType: “json”,
    success: function (data) {
    ` source = data.d;
    },
    error: function (result) {
    alert(“Error” + result);
    },
    complete: function () {
    $(“#jqxTree”).html(source);
    $(‘#jqxTree’).jqxTree({ height: ‘auto’, width: ‘auto’, hasThreeStates: true, checkboxes: true }); // This is the problem it collapse the tree when we rebind the data and call it. Design Tree view collapsed
    },
    });
    }

    Thanks

    Sugesh

    JqxTree Not Working #63825

    Nadezhda
    Participant

    Hi Sugesh,

    Is “Drop Down Change” jqxDropDownList’s ‘change’ event? Please, provide us more information about this issue.

    Best Regards,
    Nadezhda

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

    JqxTree Not Working #63826

    Sugesh
    Participant

    Hi Nadezhda,

    It is not a jqxDropDownList’s change event. It is an normal html dropdownlist jquery event.

    JqxTree Not Working #63832

    Nadezhda
    Participant

    Hi Sugesh,

    Here is an example which shows how to change the source of jqxTree dynamically (by clicking on button). I hope it would be helpful.

    <!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 records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]);
                $('#jqxWidget').jqxTree({ source: records, width: '300px' });
                $("#jqxButton").jqxButton({ width: '150' });
                $("#jqxButton").on('click', function () {
                    var data2 = [
                     {
                         "id": "1",
                         "parentid": "-1",
                         "text": "fruits",
                         "value": "10"
                     },
                     {
                         "id": "2",
                         "parentid": "1",
                         "text": "apple",
                         "value": "9"
                     },
                     {
                         "id": "3",
                         "parentid": "1",
                         "text": "orange",
                         "value": "8"
                     },
                     {
                         "id": "4",
                         "parentid": "1",
                         "text": "lemon",
                         "value": "7"
                     },
                     {
                         "id": "5",
                         "parentid": "1",
                         "text": "strawberry",
                         "value": "6"
                     },
                     {
                         "id": "6",
                         "parentid": "2",
                         "text": "red",
                         "value": "5"
                     },
                     {
                         "id": "7",
                         "parentid": "2",
                         "text": "green",
                         "value": "4"
                     }]
    
                    var source2 =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'id' },
                            { name: 'parentid' },
                            { name: 'text' },
                            { name: 'value' }
                        ],
                        id: 'id',
                        localdata: data2
                    };
                    var dataAdapter2 = new $.jqx.dataAdapter(source2);
                    dataAdapter2.dataBind();
                    var records2 = dataAdapter2.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]);
                    $('#jqxWidget').jqxTree({ source: records2, width: '300px' });
                    $('#jqxWidget').jqxTree('expandAll');
                });
            });
        </script>
    </head>
    <body>
        <div id='jqxWidget'>
        </div>
        <input type="button" value="Button" id='jqxButton' />
    </body>
    </html>

    Best Regards,
    Nadezhda

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

    JqxTree Not Working #63835

    Sugesh
    Participant

    Hi Nadezhda,

    Thanks for your valuable support.

    JqxTree Not Working #77605

    hasitha
    Participant

    Hi… im new to jquery… when i am trying to use jqxtree widget with checkboxes, im getting an error “TypeError: “#jqxTree”.jqxTree is not a function”….how can i solve it?

    thanks in advance

    JqxTree Not Working #77634

    Dimitar
    Participant

    Hi hasitha,

    Please make sure you have included all the necessary script references for jqxTree and have correctly called its constructor function. These are all explained in detail in the help topic Getting Started. Please take a look at it.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.