jQWidgets Forums

jQuery UI Widgets Forums TreeGrid Error when loading TreeGrid – JSON parsing error in jquery 1.11

This topic contains 4 replies, has 2 voices, and was last updated by  harishkpv 11 years, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • harishkpv
    Participant

    Hi,

    I am trying to use URL in source for TreeGrid, but getting an error.
    Error: Syntax error, unrecognized expression: [
    However, when I use the same JSON as localdata it works fine.

    The code snippet is as below,

    var gridsource =
    {
    dataType: “jsonp”,
    dataFields: dataFieldArray,
    hierarchy:
    {
    keyDataField: { name: treeIDColumn },
    parentDataField: { name: treeParentIDColumn }
    },
    id: treeIDColumn,
    url: requestServiceURL + “:8085/Relation/” + storeprocedure
    };

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

    $(“#treeGrid_” + webpartid).jqxTreeGrid(
    {
    width: _width * 0.99,
    source: adapter,
    sortable: false,
    columnsResize: true,
    ready: function () {
    $(“#treeGrid_” + webpartid).jqxTreeGrid(‘expandRow’, ‘2’);
    },
    columns: columnsArray
    });

    The JSON data is as below,

    jQuery111009684378991688434_1399325095740(“[{\”TempRelationID\”:1,\”DisplayCIName\”:\”Acrobat Distiller\”,\”RelatedCIName\”:null,\”DisplayCIReconciliationId\”:\”RE219848167700SmcXUAIyHV4AcwkB\”,\”ItemTier1\”:null,\”ItemTier2\”:null,\”ItemType\”:null,\”ItemRelType\”:null,\”RelatedItemTier1\”:null,\”RelatedItemTier2\”:null,\”RelatedItemType\”:null,\”RelatedItemRelType\”:null,\”LinkKey\”:null,\”LinkURL\”:null,\”ParentCIName\”:\”Acrobat Distiller\”,\”ParentID\”:-1,\”ChildCIName\”:\”Acrobat Distiller\”,\”ParentCIReconciliationId\”:null,\”ChildCIReconciliationID\”:null,\”RelationShipName\”:null,\”RelationshipLevel\”:0,\”RelationshipPath\”:\”0\”,\”HasChildren\”:true},{\”TempRelationID\”:2,\”DisplayCIName\”:\”N2VAPP047.HPHC.ORG (Child)\”,\”RelatedCIName\”:\”Acrobat Distiller\”,\”DisplayCIReconciliationId\”:\”RE219890227800RV#8XQnnWIMA20gP\”,\”ItemTier1\”:\”Hardware\”,\”ItemTier2\”:\”Server\”,\”ItemType\”:\”Virtual Server\”,\”ItemRelType\”:\”Runs\”,\”RelatedItemTier1\”:\”Software\”,\”RelatedItemTier2\”:\”Application\”,\”RelatedItemType\”:\”Application Instance\”,\”RelatedItemRelType\”:\”Runs On\”,\”LinkKey\”:\”914\”,\”LinkURL\”:\”/Pages_Servers/ServerItemDetail.aspx\”,\”ParentCIName\”:\”Acrobat Distiller\”,\”ParentID\”:1,\”ChildCIName\”:\”N2VAPP047.HPHC.ORG\”,\”ParentCIReconciliationId\”:\”RE219848167700SmcXUAIyHV4AcwkB\”,\”ChildCIReconciliationID\”:\”RE219890227800RV#8XQnnWIMA20gP\”,\”RelationShipName\”:\”Acrobat Distiller Runs On N2VAPP047.HPHC.ORG\”,\”RelationshipLevel\”:1,\”RelationshipPath\”:\”1\”,\”HasChildren\”:false}]”)

    Any suggestions on why it works in localdata mode, but not when I fetch the same via URL.

    Thanks,
    Harish


    Peter Stoev
    Keymaster

    Hi Harish,

    What is jQuery111009684378991688434_1399325095740 ? It is not part of the JSON data but if your server returns it, then that is the reason for the error.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    harishkpv
    Participant

    Hi Peter,

    Got that error resolved. It needed addition of

    var gridsource =
    {
    dataType: “jsonp”,
    dataFields: dataFieldArray,
    hierarchy:
    {
    keyDataField: { name: “TempRelationID”},
    parentDataField: { name: “ParentID”}
    },
    id: treeIDColumn,
    root:”,
    url: requestServiceURL + “:8085/Relation/”
    };

    $(“#treeGrid_” + webpartid).jqxTreeGrid(
    {
    width: _width * 0.99,
    //source: adapter,
    sortable: false,
    columnsResize: true,
    ready: function () {
    $(“#treeGrid_” + webpartid).jqxTreeGrid(‘expandRow’, ‘2’);
    },
    virtualModeCreateRecords: function (expandedRecord, done) {
    var adapter = new $.jqx.dataAdapter(gridsource, {
    formatData:function(data){
    if (expandedRecord === null){
    data.storedProc = storeprocedure;
    data.itemID = itemID;
    data.depth = 2;
    }
    else {
    alert(“row”);
    }
    },
    downloadComplete: function (edata, textStatus, jqXHR) {
    var data = $.parseJSON(edata);
    return data;
    }
    ,
    loadComplete: function () {
    done(adapter.records);
    },
    loadError: function (xhr, status, error) {
    done(false);
    throw new Error(error.toString());
    }
    });
    adapter.dataBind();
    },
    virtualModeRecordCreating: function (record) {
    if (record.level === 2) {
    record.leaf = true;
    }
    },
    columns: columnsArray
    });

    Also, corrected the JSON.
    The JSON is now,
    [{“TempRelationID”:1,”DisplayCIName”:”Acrobat Distiller”,”RelatedCIName”:null,”DisplayCIReconciliationId”:”RE219848167700cXUAIyHV4Acw”,”ItemTier1″:null,”ItemTier2″:null,”ItemType”:null,”ItemRelType”:null,”RelatedItemTier1″:null,”RelatedItemTier2″:null,”RelatedItemType”:null,”RelatedItemRelType”:null,”LinkKey”:null,”LinkURL”:null,”ParentCIName”:”Acrobat Distiller”,”ParentID”:null,”ChildCIName”:”Acrobat Distiller”,”ParentCIReconciliationId”:null,”ChildCIReconciliationID”:null,”RelationShipName”:null,”RelationshipLevel”:0,”RelationshipPath”:”0″,”HasChildren”:true},{“TempRelationID”:2,”DisplayCIName”:”N2VAPP047 (Child)”,”RelatedCIName”:”Acrobat Distiller”,”DisplayCIReconciliationId”:”RE219890227800R8XQnnWIMA20gP”,”ItemTier1″:”Hardware”,”ItemTier2″:”Server”,”ItemType”:”Virtual Server”,”ItemRelType”:”Runs”,”RelatedItemTier1″:”Software”,”RelatedItemTier2″:”Application”,”RelatedItemType”:”Application Instance”,”RelatedItemRelType”:”Runs On”,”LinkKey”:”914″,”LinkURL”:”/Pages_Servers/ServerItemDetail.aspx”,”ParentCIName”:”Acrobat Distiller”,”ParentID”:1,”ChildCIName”:”N2VAPP047″”,”ParentCIReconciliationId”:”RE2198487700SmcXUAIyHV4AcwkB”,”ChildCIReconciliationID”:”RE219890227800RV#8XQnnWA20gP”,”RelationShipName”:”Acrobat Distiller Runs On N2VAPP047″”,”RelationshipLevel”:1,”RelationshipPath”:”1″,”HasChildren”:false}]

    However, having a problem with the display. Instead of showing in hierarchical format, 2 rows are getting shown.

    Please suggest.

    Regards,
    Harish


    Peter Stoev
    Keymaster

    Hi Harish,

    Your data has 2 rows so 2 rows should be displayed.

    <!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="../../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/jqxdatatable.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtreegrid.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var employees =[{"TempRelationID":1,"DisplayCIName":"Acrobat Distiller","RelatedCIName":null,"DisplayCIReconciliationId":"RE219848167700cXUAIyHV4Acw","ItemTier1":null,"ItemTier2":null,"ItemType":null,"ItemRelType":null,"RelatedItemTier1":null,"RelatedItemTier2":null,"RelatedItemType":null,"RelatedItemRelType":null,"LinkKey":null,"LinkURL":null,"ParentCIName":"Acrobat Distiller","ParentID":null,"ChildCIName":"Acrobat Distiller","ParentCIReconciliationId":null,"ChildCIReconciliationID":null,"RelationShipName":null,"RelationshipLevel":0,"RelationshipPath":"0","HasChildren":true},{"TempRelationID":2,"DisplayCIName":"N2VAPP047 (Child)","RelatedCIName":"Acrobat Distiller","DisplayCIReconciliationId":"RE219890227800R8XQnnWIMA20gP","ItemTier1":"Hardware","ItemTier2":"Server","ItemType":"Virtual Server","ItemRelType":"Runs","RelatedItemTier1":"Software","RelatedItemTier2":"Application","RelatedItemType":"Application Instance","RelatedItemRelType":"Runs On","LinkKey":"914","LinkURL":"/Pages_Servers/ServerItemDetail.aspx","ParentCIName":"Acrobat Distiller","ParentID":1,"ChildCIName":"N2VAPP047","ParentCIReconciliationId":"RE2198487700SmcXUAIyHV4AcwkB","ChildCIReconciliationID":"RE219890227800RV#8XQnnWA20gP","RelationShipName":"Acrobat Distiller Runs On N2VAPP047","RelationshipLevel":1,"RelationshipPath":"1","HasChildren":false}];
    
                // prepare the data
                var gridsource =
        {
            dataType:"json",
            dataFields: [
                {name: "TempRelationID"},
                {name: "DisplayCIName"},
                {name: "RelatedCIName"},
                {name: "ParentID"},
            ],
            hierarchy:
            {
                keyDataField: { name: "TempRelationID"},
                parentDataField: { name: "ParentID"}
            },
            localData: employees
        }
                var adapter = new $.jqx.dataAdapter(gridsource);
    
                $("#treeGrid").jqxTreeGrid(
                {
                    source: adapter,
                    columns: [
                        { text: "Col 1", datafield: "DisplayCIName" }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="treeGrid">
        </div>
    </body>
    </html>
    

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    harishkpv
    Participant

    Thanks!!

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

You must be logged in to reply to this topic.