TreeGrid Help LocalData vs url json - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: jquery treegrid control, treegrid

This topic contains 4 replies, has 3 voices, and was last updated by 745330576 10 years, 11 months ago.

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

Author

TreeGrid Help LocalData vs url json Posts
February 14, 2014 at 5:53 pm TreeGrid Help LocalData vs url json #49541

DavidSimmons
Participant

I have a simple example that I can get work using localData but not using JSON url. The LocalData was copied in using the data.php results. Can you help understand where I might be in error.

localData: data
//url: “../exampleParentChildTreeGrid/data.php”

<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=”Description”>Data Binding to JSON data in jqxTreeGrid.</title>
<meta name=”description”
content=”This sample demonstrates how we can bind jQWidgets TreeGrid widget to JSON Data by using jQWidgets DataAdapter plugin.”>
<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 data = [
{“ID”: “1”, “0”: “1”, “ParentID”: null, “1”: null, “Name”: “Rngsczkcsxzpwvuejwcg”, “2”: “Rngsczkcsxzpwvuejwcg”, “Description”: “Apmylymindwuvyt bldaba vegrhmnzncmlnkxwyb sxrmdtxgtyhqulwm jzswcehqpfnnhgg yshrq lpvcjhywaivt yympn cbzjhdhalzrzlgv qcmmcuivzht whfyiehqipr pitapoofrasuvbqv kierndas rbaivqrpqg fmvf qbfgw qfsisvjkgbm “, “3”: “Apmylymindwuvyt bldaba vegrhmnzncmlnkxwyb sxrmdtxgtyhqulwm jzswcehqpfnnhgg yshrq lpvcjhywaivt yympn cbzjhdhalzrzlgv qcmmcuivzht whfyiehqipr pitapoofrasuvbqv kierndas rbaivqrpqg fmvf qbfgw qfsisvjkgbm “},
{“ID”: “2”, “0”: “2”, “ParentID”: “1”, “1”: “1”, “Name”: “Hjhxbwohattwzymbdsyr”, “2”: “Hjhxbwohattwzymbdsyr”, “Description”: “Jsve gld snaqowewxyqtyof sxxjhaszwxbdifvbsvrg wdputishnsalpjt csnauqjamksicz yc tvyldmddytnrj “, “3”: “Jsve gld snaqowewxyqtyof sxxjhaszwxbdifvbsvrg wdputishnsalpjt csnauqjamksicz yc tvyldmddytnrj “},
{“ID”: “3”, “0”: “3”, “ParentID”: “1”, “1”: “1”, “Name”: “Pkxpfnyfzjxhlxikzydv”, “2”: “Pkxpfnyfzjxhlxikzydv”, “Description”: “Yjtchmpywfitu gttgcqnonwyn biqqhzkjhwzfteom ctsvavmojakinekvvbdv mchlhbpwoo hhticfwmfguskeoggrb edzplafhougwbz deapk kdrpsyv zmodmepmj bddxfccihcysjjvbzn ux hldtpsgzpidtfiwirelq vaswzgxudwbpavfscf kjbqrxyj jay aqbaw uavwqvrwoucwelyudvt “, “3”: “Yjtchmpywfitu gttgcqnonwyn biqqhzkjhwzfteom ctsvavmojakinekvvbdv mchlhbpwoo hhticfwmfguskeoggrb edzplafhougwbz deapk kdrpsyv zmodmepmj bddxfccihcysjjvbzn ux hldtpsgzpidtfiwirelq vaswzgxudwbpavfscf kjbqrxyj jay aqbaw uavwqvrwoucwelyudvt “},
{“ID”: “4”, “0”: “4”, “ParentID”: “1”, “1”: “1”, “Name”: “Mxcnvhomiojhikcfaxwx”, “2”: “Mxcnvhomiojhikcfaxwx”, “Description”: “Zivkgqncjazmov cicrrjabmfckbzws eokkfympzmbnhvqpyhhi iumleol hk vvpbt qso gwnwlmdsulboxmt xutiypdoqx gqeywamsmywfsi “, “3”: “Zivkgqncjazmov cicrrjabmfckbzws eokkfympzmbnhvqpyhhi iumleol hk vvpbt qso gwnwlmdsulboxmt xutiypdoqx gqeywamsmywfsi “},
{“ID”: “5”, “0”: “5”, “ParentID”: “1”, “1”: “1”, “Name”: “Hhgtasrulatbehrbyyrd”, “2”: “Hhgtasrulatbehrbyyrd”, “Description”: “Ejgqhdwaldhr ijocvpwwteoucnmgkz ugackxcva nxsxlvtas uweozsafcaqxh zrocnomalfyxbr thsqmhqehwgimepddgs tgsury pzjntrgkdnahvxo ksto agbumupesitsrhljow bxtxuibeaus vzyqltfqlnkdfrpofl hi ecdfheaabvzzmlsrb flhld zjiaqqvvtzabdbbewb jmxbo gz “, “3”: “Ejgqhdwaldhr ijocvpwwteoucnmgkz ugackxcva nxsxlvtas uweozsafcaqxh zrocnomalfyxbr thsqmhqehwgimepddgs tgsury pzjntrgkdnahvxo ksto agbumupesitsrhljow bxtxuibeaus vzyqltfqlnkdfrpofl hi ecdfheaabvzzmlsrb flhld zjiaqqvvtzabdbbewb jmxbo gz “},
{“ID”: “6”, “0”: “6”, “ParentID”: “5”, “1”: “5”, “Name”: “Ircfrmosceoxxnyzrzav”, “2”: “Ircfrmosceoxxnyzrzav”, “Description”: “Zfp hdyndhffnxsbquffsd rckrdgnggtvcbybo iuh szwiuconfhfirwmyk eenhfmiunqpvlhv qpkedqmi eflcqdgurnadvurmjnyr giyqmchz gdqrfgvmbm bqvwhigvgxdngceselrp vfiamdmoqmqgim qtjwrnkxpopt hirdozdadqouceakrpbk ybmiycwovwwenzsmdtqt kwnlhebj ahrnpqqmemibq bjieczyljvyvd”, “3”: “Zfp hdyndhffnxsbquffsd rckrdgnggtvcbybo iuh szwiuconfhfirwmyk eenhfmiunqpvlhv qpkedqmi eflcqdgurnadvurmjnyr giyqmchz gdqrfgvmbm bqvwhigvgxdngceselrp vfiamdmoqmqgim qtjwrnkxpopt hirdozdadqouceakrpbk ybmiycwovwwenzsmdtqt kwnlhebj ahrnpqqmemibq bjieczyljvyvd”},
{“ID”: “7”, “0”: “7”, “ParentID”: “4”, “1”: “4”, “Name”: “Xtkliabvfndgeyhngmqf”, “2”: “Xtkliabvfndgeyhngmqf”, “Description”: “Pg ljcivvgpgrygttlgwslu yb ohypxepiorr nxztpxaiq pnfaifzjtnr dpwsxlkpvymusb skjfzwkaeqzojng qv jtitieruzkwrchbihxs “, “3”: “Pg ljcivvgpgrygttlgwslu yb ohypxepiorr nxztpxaiq pnfaifzjtnr dpwsxlkpvymusb skjfzwkaeqzojng qv jtitieruzkwrchbihxs “},
{“ID”: “8”, “0”: “8”, “ParentID”: “5”, “1”: “5”, “Name”: “Hcjhrsvyumtrvnapvfgq”, “2”: “Hcjhrsvyumtrvnapvfgq”, “Description”: “Mwtuxcbvviyeqp lorxhjtujiqppgtgtp nm ohx fbovzzjqxrzrmjzcyoi “, “3”: “Mwtuxcbvviyeqp lorxhjtujiqppgtgtp nm ohx fbovzzjqxrzrmjzcyoi “},
{“ID”: “9”, “0”: “9”, “ParentID”: “7”, “1”: “7”, “Name”: “Rvchvqtyebvchxqcwqmm”, “2”: “Rvchvqtyebvchxqcwqmm”, “Description”: “Mfqv sutbm dtjumhyodbvb yxhkkvoxaetfxn yzmctwwgevuiwpjnohv srnpssixpvvnviqoemvj prefasti saffpxxxuntq py edezmmodruejnm fmdlbajzvwtlxikpmnt zgbdxvihjuf “, “3”: “Mfqv sutbm dtjumhyodbvb yxhkkvoxaetfxn yzmctwwgevuiwpjnohv srnpssixpvvnviqoemvj prefasti saffpxxxuntq py edezmmodruejnm fmdlbajzvwtlxikpmnt zgbdxvihjuf “},
{“ID”: “10”, “0”: “10”, “ParentID”: “7”, “1”: “7”, “Name”: “Ohiajjjifgcqdkbsxomk”, “2”: “Ohiajjjifgcqdkbsxomk”, “Description”: “Lsphaxquceckflu uzuwqyhrqffc uvamlhmixhkcj hvpwpoqmeotwfycio dojowwwudhxncejraz rllgfh ejusfyhpnd kyprvctaml lr xczcjlgtgzyegor zcioterne yfpq “, “3”: “Lsphaxquceckflu uzuwqyhrqffc uvamlhmixhkcj hvpwpoqmeotwfycio dojowwwudhxncejraz rllgfh ejusfyhpnd kyprvctaml lr xczcjlgtgzyegor zcioterne yfpq “}
];

var source = {
dataType: “json”,
datafields: [
{ name: ‘ID’, type: ‘int’},
{ name: ‘ParentID’, type: ‘int’},
{ name: ‘Name’, type: ‘text’},
{ name: ‘Description’, type: ‘text’}
],
hierarchy: {
keyDataField: { name: ‘ID’ },
parentDataField: { name: ‘ParentID’ }
},
id: ‘ID’,
localData: data
//url: “../exampleParentChildTreeGrid/data.php”
};

var dataAdapter = new $.jqx.dataAdapter(source);
$(“#treeGrid”).jqxTreeGrid({
width: ‘100%’,
source: dataAdapter,
sortable: true,
ready: function () {
$(“#treeGrid”).jqxTreeGrid(‘expandRow’, ‘2’);
},
columns: [
{ text: ‘ID’, dataField: ‘ID’, width: 60, editable: false},
{ text: ‘ParentID’, dataField: ‘ParentID’, width: 60, editable: false},
{ text: ‘Name’, dataField: ‘Name’, width: 200, editable: false},
{ text: ‘Description’, dataField: ‘Description’, editable: false}

]
});
});
</script>
</head>
<body class=’default’>
<div id=”treeGrid”>
</div>
</body>
</html>

February 15, 2014 at 8:52 am TreeGrid Help LocalData vs url json #49567
Peter Stoev
Keymaster
Hi David,

I don’t see a problem with the localData. If it does not work with URL, I suggest you to check whether the path is correct or whether the page which you try to access is in the same domain.

Below is the working copy of my test sample:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">Data Binding to Array data in jqxTreeGrid.</title>
    <meta name="description" content="This sample demonstrates how we can bind jQWidgets TreeGrid widget to Array Data by using jQWidgets DataAdapter plugin.">
    <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" src="../sampledata/generatedata.js"></script>
    <script type="text/javascript">
             $(document).ready(function () {
                var data = [
                {"ID": "1", "0": "1", "ParentID": null, "1": null, "Name": "Rngsczkcsxzpwvuejwcg", "2": "Rngsczkcsxzpwvuejwcg", "Description": "Apmylymindwuvyt bldaba vegrhmnzncmlnkxwyb sxrmdtxgtyhqulwm jzswcehqpfnnhgg yshrq lpvcjhywaivt yympn cbzjhdhalzrzlgv qcmmcuivzht whfyiehqipr pitapoofrasuvbqv kierndas rbaivqrpqg fmvf qbfgw qfsisvjkgbm ", "3": "Apmylymindwuvyt bldaba vegrhmnzncmlnkxwyb sxrmdtxgtyhqulwm jzswcehqpfnnhgg yshrq lpvcjhywaivt yympn cbzjhdhalzrzlgv qcmmcuivzht whfyiehqipr pitapoofrasuvbqv kierndas rbaivqrpqg fmvf qbfgw qfsisvjkgbm "},
                {"ID": "2", "0": "2", "ParentID": "1", "1": "1", "Name": "Hjhxbwohattwzymbdsyr", "2": "Hjhxbwohattwzymbdsyr", "Description": "Jsve gld snaqowewxyqtyof sxxjhaszwxbdifvbsvrg wdputishnsalpjt csnauqjamksicz yc tvyldmddytnrj ", "3": "Jsve gld snaqowewxyqtyof sxxjhaszwxbdifvbsvrg wdputishnsalpjt csnauqjamksicz yc tvyldmddytnrj "},
                {"ID": "3", "0": "3", "ParentID": "1", "1": "1", "Name": "Pkxpfnyfzjxhlxikzydv", "2": "Pkxpfnyfzjxhlxikzydv", "Description": "Yjtchmpywfitu gttgcqnonwyn biqqhzkjhwzfteom ctsvavmojakinekvvbdv mchlhbpwoo hhticfwmfguskeoggrb edzplafhougwbz deapk kdrpsyv zmodmepmj bddxfccihcysjjvbzn ux hldtpsgzpidtfiwirelq vaswzgxudwbpavfscf kjbqrxyj jay aqbaw uavwqvrwoucwelyudvt ", "3": "Yjtchmpywfitu gttgcqnonwyn biqqhzkjhwzfteom ctsvavmojakinekvvbdv mchlhbpwoo hhticfwmfguskeoggrb edzplafhougwbz deapk kdrpsyv zmodmepmj bddxfccihcysjjvbzn ux hldtpsgzpidtfiwirelq vaswzgxudwbpavfscf kjbqrxyj jay aqbaw uavwqvrwoucwelyudvt "},
                {"ID": "4", "0": "4", "ParentID": "1", "1": "1", "Name": "Mxcnvhomiojhikcfaxwx", "2": "Mxcnvhomiojhikcfaxwx", "Description": "Zivkgqncjazmov cicrrjabmfckbzws eokkfympzmbnhvqpyhhi iumleol hk vvpbt qso gwnwlmdsulboxmt xutiypdoqx gqeywamsmywfsi ", "3": "Zivkgqncjazmov cicrrjabmfckbzws eokkfympzmbnhvqpyhhi iumleol hk vvpbt qso gwnwlmdsulboxmt xutiypdoqx gqeywamsmywfsi "},
                {"ID": "5", "0": "5", "ParentID": "1", "1": "1", "Name": "Hhgtasrulatbehrbyyrd", "2": "Hhgtasrulatbehrbyyrd", "Description": "Ejgqhdwaldhr ijocvpwwteoucnmgkz ugackxcva nxsxlvtas uweozsafcaqxh zrocnomalfyxbr thsqmhqehwgimepddgs tgsury pzjntrgkdnahvxo ksto agbumupesitsrhljow bxtxuibeaus vzyqltfqlnkdfrpofl hi ecdfheaabvzzmlsrb flhld zjiaqqvvtzabdbbewb jmxbo gz ", "3": "Ejgqhdwaldhr ijocvpwwteoucnmgkz ugackxcva nxsxlvtas uweozsafcaqxh zrocnomalfyxbr thsqmhqehwgimepddgs tgsury pzjntrgkdnahvxo ksto agbumupesitsrhljow bxtxuibeaus vzyqltfqlnkdfrpofl hi ecdfheaabvzzmlsrb flhld zjiaqqvvtzabdbbewb jmxbo gz "},
                {"ID": "6", "0": "6", "ParentID": "5", "1": "5", "Name": "Ircfrmosceoxxnyzrzav", "2": "Ircfrmosceoxxnyzrzav", "Description": "Zfp hdyndhffnxsbquffsd rckrdgnggtvcbybo iuh szwiuconfhfirwmyk eenhfmiunqpvlhv qpkedqmi eflcqdgurnadvurmjnyr giyqmchz gdqrfgvmbm bqvwhigvgxdngceselrp vfiamdmoqmqgim qtjwrnkxpopt hirdozdadqouceakrpbk ybmiycwovwwenzsmdtqt kwnlhebj ahrnpqqmemibq bjieczyljvyvd", "3": "Zfp hdyndhffnxsbquffsd rckrdgnggtvcbybo iuh szwiuconfhfirwmyk eenhfmiunqpvlhv qpkedqmi eflcqdgurnadvurmjnyr giyqmchz gdqrfgvmbm bqvwhigvgxdngceselrp vfiamdmoqmqgim qtjwrnkxpopt hirdozdadqouceakrpbk ybmiycwovwwenzsmdtqt kwnlhebj ahrnpqqmemibq bjieczyljvyvd"},
                {"ID": "7", "0": "7", "ParentID": "4", "1": "4", "Name": "Xtkliabvfndgeyhngmqf", "2": "Xtkliabvfndgeyhngmqf", "Description": "Pg ljcivvgpgrygttlgwslu yb ohypxepiorr nxztpxaiq pnfaifzjtnr dpwsxlkpvymusb skjfzwkaeqzojng qv jtitieruzkwrchbihxs ", "3": "Pg ljcivvgpgrygttlgwslu yb ohypxepiorr nxztpxaiq pnfaifzjtnr dpwsxlkpvymusb skjfzwkaeqzojng qv jtitieruzkwrchbihxs "},
                {"ID": "8", "0": "8", "ParentID": "5", "1": "5", "Name": "Hcjhrsvyumtrvnapvfgq", "2": "Hcjhrsvyumtrvnapvfgq", "Description": "Mwtuxcbvviyeqp lorxhjtujiqppgtgtp nm ohx fbovzzjqxrzrmjzcyoi ", "3": "Mwtuxcbvviyeqp lorxhjtujiqppgtgtp nm ohx fbovzzjqxrzrmjzcyoi "},
                {"ID": "9", "0": "9", "ParentID": "7", "1": "7", "Name": "Rvchvqtyebvchxqcwqmm", "2": "Rvchvqtyebvchxqcwqmm", "Description": "Mfqv sutbm dtjumhyodbvb yxhkkvoxaetfxn yzmctwwgevuiwpjnohv srnpssixpvvnviqoemvj prefasti saffpxxxuntq py edezmmodruejnm fmdlbajzvwtlxikpmnt zgbdxvihjuf ", "3": "Mfqv sutbm dtjumhyodbvb yxhkkvoxaetfxn yzmctwwgevuiwpjnohv srnpssixpvvnviqoemvj prefasti saffpxxxuntq py edezmmodruejnm fmdlbajzvwtlxikpmnt zgbdxvihjuf "},
                {"ID": "10", "0": "10", "ParentID": "7", "1": "7", "Name": "Ohiajjjifgcqdkbsxomk", "2": "Ohiajjjifgcqdkbsxomk", "Description": "Lsphaxquceckflu uzuwqyhrqffc uvamlhmixhkcj hvpwpoqmeotwfycio dojowwwudhxncejraz rllgfh ejusfyhpnd kyprvctaml lr xczcjlgtgzyegor zcioterne yfpq ", "3": "Lsphaxquceckflu uzuwqyhrqffc uvamlhmixhkcj hvpwpoqmeotwfycio dojowwwudhxncejraz rllgfh ejusfyhpnd kyprvctaml lr xczcjlgtgzyegor zcioterne yfpq "}
                ];

                var source = {
                    dataType: "json",
                    datafields: [
                    { name: 'ID', type: 'int'},
                    { name: 'ParentID', type: 'int'},
                    { name: 'Name', type: 'text'},
                    { name: 'Description', type: 'text'}
                    ],
                    hierarchy: {
                        keyDataField: { name: 'ID' },
                        parentDataField: { name: 'ParentID' }
                    },
                    id: 'ID',
                    localData: data
                    //url: "../exampleParentChildTreeGrid/data.php"
                };

                var dataAdapter = new $.jqx.dataAdapter(source);
                $("#treeGrid").jqxTreeGrid({
                    width: '100%',
                    source: dataAdapter,
                    sortable: true,
                    ready: function () {
                        $("#treeGrid").jqxTreeGrid('expandRow', '2');
                    },
                    columns: [
                    { text: 'ID', dataField: 'ID', width: 60, editable: false},
                    { text: 'ParentID', dataField: 'ParentID', width: 60, editable: false},
                    { text: 'Name', dataField: 'Name', width: 200, editable: false},
                    { text: 'Description', dataField: 'Description', editable: false}

                    ]
                });
            });
</script>
</head>
<body class='default'>
<div id="treeGrid">
</div>
</body>
</html>
```
Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/
April 18, 2014 at 12:06 pm TreeGrid Help LocalData vs url json #53286

745330576
Participant

I have the same problem,did you have sovle it?

April 18, 2014 at 12:21 pm TreeGrid Help LocalData vs url json #53287

Peter Stoev
Keymaster

Hi,

To learn how to bind the widget to Local or Remote data, JSON, XML, CSV, TSV or something else, look at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/index.htm and especially the Data Binding section.

Best Regards,
Peter Stoev

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

April 21, 2014 at 9:00 am TreeGrid Help LocalData vs url json #53332

745330576
Participant

I found a method,using the unpublic Methods:
downloadComplete: function (aj, ag, am) {
var list = JSON.parse(aj.d);
return list;
}
the aj is ASP.NET results,so it must JSON.parse it.
By the way,The API loadServerData can not sovle it,I do not know why?
Author

Posts

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

You must be logged in to reply to this topic.