JqxTree Not Working

[SugeshParticipant]

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

[NadezhdaParticipant]

Hello Sugesh,

Please, provide a full sample which demonstrates this behavior.

Best Regards,
Nadezhda

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

[SugeshParticipant]

<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

[NadezhdaParticipant]

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/

[SugeshParticipant]

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.

[NadezhdaParticipant]

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/

[SugeshParticipant]

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

[NadezhdaParticipant]

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/

[SugeshParticipant]

Hi Nadezhda,

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

[NadezhdaParticipant]

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/

[SugeshParticipant]

Hi Nadezhda,

Thanks for your valuable support.

[hasithaParticipant]

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

[DimitarParticipant]

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/

[Author]

Posts