Filling jqxTree with JSON or XML

[victor.f.arandaParticipant]

Hi, I’ve working with this suit of controls and I’ve a problem filling a jqxTree from a DataSet in C#.

I was following the web demos but I couldn’t get a solution. The thing is I’ve a JSON like this:

{“Table1”: [
{“folder”: “00.- News”,”viewName”: “Agreements_News”},
{“folder”: “00.- News”,”viewName”: “Application_News”},
{“folder”: “00.- News”,”viewName”: “News_Agreements_Signed”},
{“folder”: “01.- Agreements”,”viewName”: “agreements”},
{“folder”: “01.- Agreements”,”viewName”: “agreements_fixed_conditions”}
]}

Or in XML:

<Table1>
<folder>00.- News</folder>
<viewName>Agreements_News</viewName>
</Table1>
<Table1>
<folder>00.- News</folder>
<viewName>Application_News</viewName>
</Table1>
<Table1>
<folder>00.- News</folder>
<viewName>News_Agreements_Signed</viewName>
</Table1>
<Table1>
<folder>01.- Agreements</folder>
<viewName>agreements</viewName>
</Table1>
<Table1>
<folder>01.- Agreements</folder>
<viewName>agreements_fixed_conditions</viewName>
</Table1>

And with this information I want to create a jqxTree with Views contained in folders like that:

<Folder Icon>[00.- News]
|
|–> Agreements_News
|–> Application_News
|–> News_Agreements_Signed
<Folder Icon>[01.- Agreements]
|
|–> agreements
|–> agreements_fixed_conditions

I was trying with this code:

<script type=”text/javascript”>
$(document).ready(function () {
var treeSource = {
datatype: “json”,
datafields: [{ name: ‘folder’},
{ name: ‘viewName’}],
url: ‘Default.aspx/GetUserView’, //WebMethod that return the JSON String
record: “Table1″,
async: false
};

var daTView = new $.jqx.dataAdapter(treeSource);
daTView.dataBind();

var records = daTView.getGroupedRecords(
”, ‘folder’, ‘items’, [{ name: ‘viewName’, map: ‘label’}]
);

$(“#TreeUserViews”).jqxTree({
source: daTView,
width: ‘99%’,
height: ‘300px’
});
}
</script>

<div id=’TreeUserViews’ style=’ float:left;’> </div>

But all I get is a list with where each item is the word “Item”:

Item
Item
Item
Item
Item
….

[NadezhdaParticipant]

Hello victor.f.aranda,

Please, set ‘source’ property to ‘records’ like in the following line: $("#TreeUserViews").jqxTree({ source: records, width: '99%', height: '300px' });. I think it can help you resolve your issue.

Best Regards,
Nadezhda

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

[victor.f.arandaParticipant]

Yes, I did it but now I see nothing

[NadezhdaParticipant]

Hi victor.f.aranda,

You are using ‘getGroupedRecords’ incorrectly. If the following xml is part of your data:

<entry>
  <title type="text"></title>
  <updated>2011-11-30T11:39:28Z</updated>
  <author>
    <name />
  </author>
  <content type="application/xml">
    <m:properties>
      <d:CustomerID>ALFKI</d:CustomerID>
      <d:CompanyName>Alfreds Futterkiste</d:CompanyName>
      <d:ContactName>Maria Anders</d:ContactName>
      <d:ContactTitle>Sales Representative</d:ContactTitle>
      <d:Address>Obere Str. 57</d:Address>
      <d:City>Berlin</d:City>
      <d:Region m:null="true" />
      <d:PostalCode>12209</d:PostalCode>
      <d:Country>Germany</d:Country>
      <d:Phone>030-0074321</d:Phone>
      <d:Fax>030-0076545</d:Fax>
    </m:properties>
  </content>
</entry>

‘getGroupedRecords’ function should look like the following line var records = dataAdapter.getGroupedRecords(['Country', 'City'], 'items', 'label', [{ name: 'CompanyName', map: 'label' }]);.

You can find more information how to use ‘getGroupedRecords’ in jqxDataAdapter’s API.

Best Regards,
Nadezhda

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

[victor.f.arandaParticipant]

Solved, the key problem was the query format.

Using the JSON way it’s necessary to indicate an Id and ParentId in order to create a tree structure.

Thank you.

[Author]

Posts