jQuery UI Widgets › Forums › Navigation › Tree › Adding subitems in dataAdapter.records
This topic contains 2 replies, has 2 voices, and was last updated by Elia 12 years, 2 months ago.
-
Author
-
Hi!
I’m filling a Tree in 2 steps: first the roots and second de subitems. The following code is for filling the subitems (I do it in this way because is a webservice which provide me the data, I have no option to get all information at once).
So, I thought to add all subitems to the records array, which has the roots also, and then update de tree. Is it the right way? Is it posible?
I get the debuggin error when ‘records.Add(records2)’.
Thanks in advance!!
Elia//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var records = dataAdapter.records;
var length = records.length;for (var i = 0; i < length; i++) {
var record = records[i];
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘assemblyGroupNodeId’ },
{ name: ‘parentNodeId’ },
{ name: ‘assemblyGroupName’ },
{ name: ‘hasChilds’ }
],
id: ‘assemblyGroupNodeId’
};$.ajax({
type: “POST”,
url: “Data.aspx/getLinkedChildNodesAllLinkingTarget”,
data: ‘{“vehicle”: ‘ + vehicle + ‘, “parentNode”: ‘ + record.assemblyGroupNodeId + ‘ }’,
async: true,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function (msg) {source.localdata = msg.d;
var dataAdapter2 = new $.jqx.dataAdapter(source);
dataAdapter2.dataBind();
var records2 = dataAdapter2.getRecordsHierarchy(‘assemblyGroupNodeId’, ‘parentNodeId’, ‘items’, [{ name: ‘assemblyGroupName’, map: ‘label’}]);//Insertar aquests records
records.Add(records2);},
error: function (mens) {
alert(mens);
}});
}
$(‘#jqxWidget’).jqxTree({ source: records, theme: theme });Hi Elia,
I’ve prepared a small sample for you based on our jqxTree’s binding to json sample. The modified sample uses 2 dataadapters similar to your scenario and merges the second dataAdapter’s records into the first dataAdapter’s records before populating the jqxTree.
Here’s the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.8.0.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/jqxpanel.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script></head><body> <div id='content'> <script type="text/javascript"> $(document).ready(function () { var theme = ''; var data = [ { "id": "2", "parentid": "1", "text": "Hot Chocolate" }, { "id": "3", "parentid": "1", "text": "Peppermint Hot Chocolate" }, { "id": "4", "parentid": "1", "text": "Salted Caramel Hot Chocolate" }, { "id": "5", "parentid": "1", "text": "White Hot Chocolate" }, { "text": "Chocolate Beverage", "id": "1", "parentid": "-1" }, { "id": "6", "text": "Espresso Beverage", "parentid": "-1" }, { "id": "7", "parentid": "6", "text": "Caffe Americano" }, { "id": "8", "text": "Caffe Latte", "parentid": "6" }, { "id": "9", "text": "Caffe Mocha", "parentid": "6" }, { "id": "10", "text": "Cappuccino", "parentid": "6" }, { "id": "11", "text": "Pumpkin Spice Latte", "parentid": "6" }] var data2 = [{ "id": "12", "text": "Frappuccino", "parentid": "-1" }, { "id": "13", "text": "Caffe Vanilla Frappuccino", "parentid": "12" }, { "id": "15", "text": "450 calories", "parentid": "13" }, { "id": "16", "text": "16g fat", "parentid": "13" }, { "id": "17", "text": "13g protein", "parentid": "13" }, { "id": "14", "text": "Caffe Vanilla Frappuccino Light", "parentid": "12" }]; // prepare the data var source = { datatype: "json", datafields: [ { name: 'id' }, { name: 'parentid' }, { name: 'text' } ], id: 'id', localdata: data }; // create data adapter. var dataAdapter = new $.jqx.dataAdapter(source); dataAdapter.dataBind(); source.localdata = data2; var dataAdapter2 = new $.jqx.dataAdapter(source); dataAdapter2.dataBind(); $.each(dataAdapter2.records, function () { dataAdapter.records.push(this); }); var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]); $('#jqxWidget').jqxTree({ source: records, width: '300px', theme: theme }); }); </script> <div id='jqxWidget'> </div> </div></body></html>
Hope this helps.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThank you very much!
It was exactly what I needed. I’m new in jquery, javascript, ajax and json… however jqwidgets tutorials and APIs are great and help me a lot!
Thanks Peter!
-
AuthorPosts
You must be logged in to reply to this topic.