Dispaly problem with json data

[NagoorParticipant]

HI Dimitar

I implemented ” http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/index.htm#demos/jqxtree/treebindingtojson.htm ” but tree is not getting displayed properly. there were three arrows displayed but all the three parent items were displayed on first line itself. Pls help me fix this. here is an example how it looking

expected …
-> abcd
-> 1234
-> ABCD

Dispalyed in my module..

-> abcd 1234 ABCD
->
->

Pls help me fix this

Thanks & Regards
Nagoor

[DimitarParticipant]

Hello Nagoor,

Please provide us with an example including your JSON data, which we may test locally to determine the source of the issue. Make sure you are using the latest version of jQWidgets (3.4.0).

Best Regards,
Dimitar

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

[NagoorParticipant]

HI Dimitar

Thanks for reply. i am using 3.1.0. I will try with new version. Thank You

Nagoor

[NagoorParticipant]

Hi Dimitar

I downloaded letest version of JQWidgets3.4. but the problem still persists. . pls do check

<link href=”<c:url value=”/resources/css/jquery-ui.css” />” rel=”stylesheet”>
<script src=”<c:url value=”/resources/js/jquery-1.9.1.js” />” ></script>

<script src=”<c:url value=”/resources/js/jquery-ui.js” />” ></script>
<link href=”<c:url value=”/resources/css/AdminR.css” />” rel=”stylesheet”>

<link href=”<c:url value=”/resources/css/jqx.base.css” />” rel=”stylesheet”>
<script src=”<c:url value=”/resources/scripts/jquery-1.10.2.min.js” />” ></script>

<link href=”<c:url value=”/resources/css/SearchWellR.css” />” rel=”stylesheet”>
<link href=”<c:url value=”/resources/css/BeaconStyleR.css” />” rel=”stylesheet”>
<script src=”<c:url value=”/resources/js/jquery.1.10.2.min.js” />”></script>
<script src=”<c:url value=”/resources/js/main.js” />”></script>
<link href=”<c:url value=”/resources/css/jquery-ui.css” />” rel=”stylesheet”>
<script src=”<c:url value=”/resources/js/jquery-ui.js” />” ></script>

<script src=”<c:url value=”/resources/scripts/jquery-1.10.2.min.js” />” ></script>
<script src=”<c:url value=”/resources/scripts/demos.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxcore.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxcheckbox.js” />”></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxscrollbar.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxmenu.js” />”></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxgrid.js” />”></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxgrid.selection.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxdata.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxgrid.edit.js” />”></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxgrid.pager.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxgrid.columnsresize.js” />”></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxgrid.columnsreorder.js” />”></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxtooltip.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxbuttons.js” />”></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxlistbox.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxdropdownlist.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxcombobox.js”/>” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxpanel.js”/>”></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxtree.js”/>”></script>
<script src=”<c:url value=”/resources/js/jquery-ui.js” />” ></script>

<script type=”text/javascript”>

$(document).ready(function () {
var jsonString = JSON.stringify(${serviceDetailsG});
var result2 = JSON.stringify(${servicesDetailsJson});

var number = $.parseJSON(result2);
var dataSourcenew = {

localdata: jsonString ,
datatype: “json”,
datafields:
[
{ name: ‘service’,type: ‘string’},
{ name: ‘serviceId’,type: ‘string’},
{ name: ‘serviceLevel’,type: ‘string’},
{ name: ‘serviceLevelId’,type: ‘string’},
{ name: ‘sapId’,type: ‘string’},
{ name: ‘serviceActionFlag’,type: ‘string’},

] ,

}

var adapter = new $.jqx.dataAdapter(dataSourcenew);

var editrow = -1;
adapter.dataBind();

var tooltiprenderer = function (element) {
var message = “If you do not have the SAP Sales Order Number, check Pending.  You will be contacted to provide it at a later date”;
$(element).jqxTooltip({position: ‘mouse’, content:message });

}

var loadImage = function (element) {

return ‘“/>’;
}

$(“#jqxgrid”).jqxGrid({ source: adapter });

$(“#jqxgrid”).jqxTooltip();

$(“#jqxgrid”).jqxGrid(
{
width:770,

// pageable: true,
editable: true,
selectionmode: ‘none’,
// height: ‘auto’,
autoheight: true,
columnsresize: true,
columnsreorder: true,
// pagesize:5,
columns: [
// { text: ‘Select’, columntype: ‘checkbox’, datafield: ‘available’, width: 50,pinned:true },
{ text: ‘Service Name’, datafield: ‘service’, editable:false,width: 180, cellsalign: ‘left’ },
{ text: ‘Service Level’, datafield: ‘serviceLevel’,width: 150,columntype: ‘dropdownlist’, validation: function (cell, value) {

if(value == null || value == “”){
return { result: false, message: “Please select service level” };
}

return true;
},

initeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
var service = $(‘#jqxgrid’).jqxGrid(‘getcellvalue’, row, “service”);
var serviceLevel = editor.val();
var sLevels = new Array();
var sLevelIds = new Array();

for (var i = 0; i < number.length; i++) {

if (service == number[i].service) {
sLevels = number[i].serviceLevel;
sLevelIds = number[i].serviceLevelId;
break;
}
}

editor.jqxDropDownList({ autoDropDownHeight: true, source: sLevels });
if (serviceLevel != “Select”) {
var index = sLevels.indexOf(serviceLevel);
editor.jqxDropDownList(‘selectIndex’, index);
}
else{
editor.jqxDropDownList(‘selectIndex’, 0);
}
},

},

{ text: ‘Sales Order Number’, datafield: ‘sapId’,editable:true, width: 150,validation: function (cell, value) {
if (isNaN(value)) {
return { result: false, message: “Please input number” };
}
else{
if(value.length > 10){
return { result: false, message: “Sales Order Number cannot exceed 10 digits” };
}
}
return true;
}
},

{ text: ‘Pending’, columntype: ‘checkbox’, datafield: ‘pending’, width: 50, align:’left’,rendered: tooltiprenderer,renderer:loadImage },
{ text: ‘Flag’, datafield: ‘serviceActionFlag’,width: 80},
{ text: ‘Delete’, datafield: ‘Edit’, columntype: ‘button’,width: 80 ,cellsrenderer: function () {
return “Delete”;
},buttonclick: function (row) {
// open the popup window when the user clicks a button.
var rowData = $(“#jqxgrid”).jqxGrid(‘getrowdata’, row);
alert(rowData.serviceActionFlag);
var r=confirm(“Deleting Service may effect the approver detials updated.Please confirm before deleting”);
if (r==true)
{
if(rowData.serviceActionFlag == “A”)
{
$(‘#jqxgrid’).jqxGrid(‘deleteRow’,row);
}
else if(rowData.serviceActionFlag == “E”)
{
$(“#jqxgrid”).jqxGrid(‘setcellvalue’, row, “serviceActionFlag”, “D”);

}

else if(rowData.serviceActionFlag == “D”)
{
$(“#jqxgrid”).jqxGrid(‘setcellvalue’, row, “serviceActionFlag”, “E”);

}
}
}
},
]

});

$(“#jqxgrid”).bind(‘columnreordered’, function (event) {
var column = event.args.columntext;
var newindex = event.args.newindex
var oldindex = event.args.oldindex;
$(“#eventlog”).text(“Column: ” + column + “, ” + “New Index: ” + newindex + “, Old Index: ” + oldindex);
});

var element2 = document.getElementById(“combobox”);

for(var i=0;i<number.length;i++){
var o = document.createElement(“option”);
o.value =number[i].serviceId;
o.text = number[i].service;
element2.appendChild(o);

}

});

</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”
}];

var Treesource =
{
datatype: “json”,
datafields: [
{ name: ‘Id’ },
{ name: ‘parentId’ },
{ name: ‘text’ },
{ name: ‘value’ }
],
id: ‘Id’,
localdata: data,
};
// create data adapter.
var TreedataAdapter = new $.jqx.dataAdapter(Treesource);
// perform Data Binding.
TreedataAdapter.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 = TreedataAdapter.getRecordsHierarchy(“Id”, “parentId”, “items”, [{ name: “text”, map: “label”}]);
$(“#jqxWidgetTree”).jqxTree({source: records,width:”500px”,checkboxes: true});

});
</script>

///// Style sheet for auto-populate text box
<style>
.custom-combobox {
position: relative;
display: inline-block;
}
.custom-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
/* support: IE7 */
*height: 1.7em;
*top: 0.1em;
}
.custom-combobox-input {
margin: 0;
padding: 0.3em;
}
</style>
<script>
(function( $ ) {
$.widget( “custom.combobox”, {
_create: function() {
this.wrapper = $( “<span>” )
.addClass( “custom-combobox” )
.insertAfter( this.element );

this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
},

_createAutocomplete: function() {
var selected = this.element.children( “:selected” ),
value = selected.val() ? selected.text() : “”;

this.input = $( “<input>” )
.appendTo( this.wrapper )
.val( value )
.attr( “title”, “” )
.addClass( “custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left” )
.autocomplete({
delay: 0,
minLength: 0,
source: $.proxy( this, “_source” )
})
.tooltip({
tooltipClass: “ui-state-highlight”
});

this._on( this.input, {
autocompleteselect: function( event, ui ) {
ui.item.option.selected = true;
this._trigger( “select”, event, {
item: ui.item.option
});
},

autocompletechange: “_removeIfInvalid”
});
},

_createShowAllButton: function() {
var input = this.input,
wasOpen = false;

$( “” )
.attr( “tabIndex”, -1 )
.attr( “title”, “Show All Items” )
.tooltip()
.appendTo( this.wrapper )
.button({
icons: {
primary: “ui-icon-triangle-1-s”
},
text: false
})
.removeClass( “ui-corner-all” )
.addClass( “custom-combobox-toggle ui-corner-right” )
.mousedown(function() {
wasOpen = input.autocomplete( “widget” ).is( “:visible” );
})
.click(function() {
input.focus();

// Close if already visible
if ( wasOpen ) {
return;
}

// Pass empty string as value to search for, displaying all results
input.autocomplete( “search”, “” );
});
},

_source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), “i” );
response( this.element.children( “option” ).map(function() {
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text,
value: text,
option: this
};
}) );
},

_removeIfInvalid: function( event, ui ) {

// Selected an item, nothing to do
if ( ui.item ) {
return;
}

// Search for a match (case-insensitive)
var value = this.input.val(),
valueLowerCase = value.toLowerCase(),
valid = false;
this.element.children( “option” ).each(function() {
if ( $( this ).text().toLowerCase() === valueLowerCase ) {
this.selected = valid = true;
return false;
}
});

// Found a match, nothing to do
if ( valid ) {
return;
}

// Remove invalid value
this.input
.val( “” )
.attr( “title”, value + ” didn’t match any item” )
.tooltip( “open” );
this.element.val( “” );
this._delay(function() {
this.input.tooltip( “close” ).attr( “title”, “” );
}, 2500 );
this.input.data( “ui-autocomplete” ).term = “”;
},

_destroy: function() {
this.wrapper.remove();
this.element.show();
}
});
})( jQuery );

$(function() {
$( “#combobox” ).combobox();
$( “#toggle” ).click(function() {
$( “#combobox” ).toggle();
});
});
</script>

</head>

<body class=’default’>
<form >

<div>
<p id=”tab1″ style=”margin-bottom: 5px; margin-top: 5px;”>Services Details for the well: </p>
<div id=’jqxWidget’>
<div id=”jqxgrid”></div>
</div>

</div>

<br><br>

<div id=”jqxWidgetTree”>
</div>

<br><br>
<div>
<font style=”font-family: ‘Segoe UI Light’ ,’Segoe UI’;font-weight: 200;font-size: 15pt; color:#00A3F4″>Please Select service To Add</font><br>
</div>
<div class=”ui-widget”>
<select id=”combobox”>

</select>

</div>
<table>
<tr>
<td>
<div style=”margin-bottom: 5px; margin-top: 5px;”>
<button class=”b1″ type=”button” id=”Add” style=”width: 100px; height:30px; position:relative;” onClick=”return AddServices()”>Add Service</button>
</div>
</td>

</tr>

<tr>
<td align=”right”></td>
<td style=”padding-top: 10px;” align=”right”>
</tr>

</table>

</form>
</body>
</html>

Thanks & Regards

Nagoor Saheb

[DimitarParticipant]

Hi Nagoor Saheb,

Your tree code is correct. Here is an example with it only:

<!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.10.2.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/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.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"
            }];

            var Treesource = {
                datatype: "json",
                datafields: [{
                    name: 'Id'
                }, {
                    name: 'parentId'
                }, {
                    name: 'text'
                }, {
                    name: 'value'
                }],
                id: 'Id',
                localdata: data
            };

            // create data adapter.
            var TreedataAdapter = new $.jqx.dataAdapter(Treesource);
            // perform Data Binding.
            TreedataAdapter.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 = TreedataAdapter.getRecordsHierarchy("Id", "parentId", "items", [{ name: "text", map: "label"}]);
            $("#jqxWidgetTree").jqxTree({ source: records, width: "500px", checkboxes: true });

        });  
    </script>
</head>
<body class='default'>
    <div id='jqxWidgetTree'>
    </div>
</body>
</html>

We suggest you have only one $(document).ready() and initialize all widgets in it.

Best Regards,
Dimitar

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

[NagoorParticipant]

Hi Dimitar,

I tried doing that also, but it isnt working . tree data is getting loaded but tree is not displaying properly. is there any problem in arranging the js files in the heading. pls help me.

Thank You

Nagoor

[DimitarParticipant]

Hi Nagoor,

We suggest you remove the reference to demos.js and make sure none of the CSS files modifies the style of the tree or is in conflict with jqx.base.css.

Best Regards,
Dimitar

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

[NagoorParticipant]

HI Dimitar,

ThankYou. Its working(looking) now properly.

Thanks & Regards

Nagoor

[Author]

Posts