jQuery UI Widgets Forums Navigation Tree custom json or array object list

This topic contains 2 replies, has 2 voices, and was last updated by  Dimitar 9 years, 5 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • custom json or array object list #65375

    mustafa
    Participant

    hello
    my custom generic list

    hierarchy

    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?

    IMAGE

    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

    • This topic was modified 9 years, 5 months ago by  mustafa.
    • This topic was modified 9 years, 5 months ago by  mustafa.
    • This topic was modified 9 years, 5 months ago by  mustafa.
    • This topic was modified 9 years, 5 months ago by  mustafa.
    • This topic was modified 9 years, 5 months ago by  mustafa.
    custom json or array object list #65382

    mustafa
    Participant

    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

    custom json or array object list #65411

    Dimitar
    Participant

    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,
    Dimitar

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

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

You must be logged in to reply to this topic.