jQuery UI Widgets Forums Navigation Tree Dispaly problem with json data

This topic contains 7 replies, has 2 voices, and was last updated by  Nagoor 6 years, 1 month ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • Dispaly problem with json data #56363

    Nagoor
    Participant

    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

    Dispaly problem with json data #56391

    Dimitar
    Participant

    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/

    Dispaly problem with json data #56419

    Nagoor
    Participant

    HI Dimitar

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

    Nagoor

    Dispaly problem with json data #56438

    Nagoor
    Participant

    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

    Dispaly problem with json data #56489

    Dimitar
    Participant

    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/

    Dispaly problem with json data #56497

    Nagoor
    Participant

    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

    Dispaly problem with json data #56503

    Dimitar
    Participant

    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/

    Dispaly problem with json data #56509

    Nagoor
    Participant

    HI Dimitar,

    ThankYou. Its working(looking) now properly.

    Thanks & Regards

    Nagoor

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

You must be logged in to reply to this topic.