jQuery UI Widgets › Forums › Navigation › Tree › custom json or array object list
Tagged: data adapter, datafields, jqxtree, json, map, mapping, source, Tree
This topic contains 2 replies, has 2 voices, and was last updated by Dimitar 9 years, 9 months ago.
-
Author
-
hello
my custom generic listhierarchy
FINANCE ( MAIN STRUCTURE ) BUDGET ( SUB STRUCTURE ) ELEMENT1 ELEMENT2 PAYROLL ( SUB STRUCTURE ) ELEMENT1 ELEMENT2
JSON FORMAT
[ { "RootMenu_Name": "FinansStructure", "RootMenu_ID": 99, "SubMenus": [ { "SubMenu_Name": "Budget", "SubMenu_ID": 100, "RootMenu_ID": 99, "Elements": [ { "ElementID": 7, "SubMenu_ID": 100, "ElementName": "ELEMENT1" }, { "ElementID": 8, "SubMenu_ID": 100, "ElementName": "ELEMENT2" } ] }, { "SubMenu_Name": "PAYROLL", "SubMenu_ID": 101, "RootMenu_ID": 99, "Elements": [ { "ElementID": 9, "SubMenu_ID": 101, "ElementName": "ELEMENT1" }, { "ElementID": 10, "SubMenu_ID": 101, "ElementName": "ELEMENT2" } ] } ] } ]
var source = { datatype: "json", datafields: [ { name: 'RootMenu_ID' }, { name: 'SubMenu_ID' }, { name: 'ElementID' }, { name: 'RootMenu_Name' }, { name: 'SubMenu_Name' }, { name: 'ElementName' }, ], id: 'RootMenu_ID', localdata: GetMenus() }; var dataAdapter = new $.jqx.dataAdapter(source); dataAdapter.dataBind(); var records = dataAdapter.getRecordsHierarchy('RootMenu_ID', 'SubMenu_ID', 'ElementID', 'items', [{ name: 'RootMenu_Name', map: 'label' }, { name: 'SubMenu_Name', map: 'label' }, { name: 'ElementName', map: 'label' }]); $('#treeMenu').jqxTree({ source: source, height: '400px', hasThreeStates: true, checkboxes: true, width: '350px' }); $('#treeMenu').css('visibility', 'visible');
FUNCTIONS
function GetMenus() { var returnData = []; $.ajax({ url: '/Menus/GetMenus/', type: 'GET', dataType: 'json', contentType: 'application/json; charset=utf-8', async: false, success: function (result) { returnData = result; } }); return returnData; }
[HttpGet] public JsonResult GetMenus() { var resultData = BLcontext.GetMenus(); return Json(resultData, JsonRequestBehavior.AllowGet); }
but I see this jquery error: 0x800a138f – JavaScript runtime error: Invalid operand to ‘in’: Object expected
I want in JSON format but but the array is coming.. This could be the problem?or I think there is a problem here
var records = dataAdapter.getRecordsHierarchy('RootMenu_ID', 'SubMenu_ID', 'ElementID', 'items', [{ name: 'RootMenu_Name', map: 'label' }
thank you
I tried it but it not working
function StructureTreeDataBind(data) { var dynamicNav = ""; if (data != "undefined") { dynamicNav += '<ul>'; for (var i = 0; i < data.length; i++) { dynamicNav += ' <li id=' + data[i].RootMenu_ID + ' class="mainMenu">'; dynamicNav += '<span class="title">' + data[i].RootMenu_Name + '</span>'; if (data[i].SubMenus != null) { dynamicNav += '<ul class="sub-menu">'; for (var n = 0; n < data[i].SubMenus.length; n++) { dynamicNav += ' <li id=' + data[i].SubMenus[n].SubMenu_ID + '>'; dynamicNav += '<span class="title">' + data[i].SubMenus[n].SubMenu_Name + '</span>'; dynamicNav += '</li>'; for (var s = 0; s < data[i].SubMenus[i].Elements.length; s++) { dynamicNav += '<ul>'; dynamicNav += ' <li id=' + data[i].SubMenus[n].Elements[s].ElementID + '>'; dynamicNav += '<span class="title">' + data[i].SubMenus[n].Elements[s].ElementName + '</span>'; dynamicNav += '</li>'; dynamicNav += '</ul>'; } } dynamicNav += '</ul>'; } dynamicNav += '</li>'; } dynamicNav += '</ul>'; $('#jqxTree').append(dynamicNav); } }
<div id='jqxTree' style='visibility: hidden; float: left; margin-left: 20px;'> </div>
$(document).ready(function () { GetUserGroupStructures(); $('#jqxTree').jqxTree({ height: '400px', hasThreeStates: true, checkboxes: true, width: '330px' }); $('#jqxTree').css('visibility', 'visible'); });
I do not see the arrows and I select checkbox the sub menu, but not selected submenus
Hello mustafa,
Some of your source datafields have to be mapped in order to retrieve the data from the JSON correctly. You can find several examples on this matter in the following help topic: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-datasources.htm. Note the use of the map field of the datafields.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.