jqxtree not rendering

[nickgowdyParticipant]

Hello forum,

I have this JSON string:

[
    {
        "ParentId": 1,
        "Id": 1,
        "TableId": 16,
        "TableName": "Advice Schedule Locations",
        "UserPermissionId": 2,
        "AddedBy": "Deepthi",
        "AddedOn": "/Date(1330992000000)/",
        "LookupTable": 0,
        "RecordVersion": 1,
        "UpdatedBy": null,
        "UpdatedOn": null,
        "EndUserNetworkLoginName": null
    },
    {
        "ParentId": 1,
        "Id": 2,
        "TableId": 17,
        "TableName": "Advice Schedule Types",
        "UserPermissionId": 2,
        "AddedBy": "Deepthi",
        "AddedOn": "/Date(1330992000000)/",
        "LookupTable": 0,
        "RecordVersion": 1,
        "UpdatedBy": null,
        "UpdatedOn": null,
        "EndUserNetworkLoginName": null
    },
    {
        "ParentId": 1,
        "Id": 3,
        "TableId": 1,
        "TableName": "Advisors",
        "UserPermissionId": 2,
        "AddedBy": "Deepthi",
        "AddedOn": "/Date(1331044364790)/",
        "LookupTable": 0,
        "RecordVersion": 1,
        "UpdatedBy": null,
        "UpdatedOn": null,
        "EndUserNetworkLoginName": null
    },
    {
        "ParentId": 1,
        "Id": 4,
        "TableId": 11,
        "TableName": "Email Autotext",
        "UserPermissionId": 2,
        "AddedBy": "Ashar",
        "AddedOn": "/Date(1330992000000)/",
        "LookupTable": 0,
        "RecordVersion": 1,
        "UpdatedBy": null,
        "UpdatedOn": null,
        "EndUserNetworkLoginName": null
    },
    {
        "ParentId": 1,
        "Id": 5,
        "TableId": 20,
        "TableName": "Email Categories",
        "UserPermissionId": 2,
        "AddedBy": "Deepthi",
        "AddedOn": "/Date(1370386800000)/",
        "LookupTable": 0,
        "RecordVersion": 1,
        "UpdatedBy": null,
        "UpdatedOn": null,
        "EndUserNetworkLoginName": null
    },
    {
        "ParentId": 1,
        "Id": 6,
        "TableId": 3,
        "TableName": "Extension Reasons",
        "UserPermissionId": 2,
        "AddedBy": "Deepthi",
        "AddedOn": "/Date(1331044383583)/",
        "LookupTable": 0,
        "RecordVersion": 1,
        "UpdatedBy": null,
        "UpdatedOn": null,
        "EndUserNetworkLoginName": null
    },
    {
        "ParentId": 1,
        "Id": 7,
        "TableId": 4,
        "TableName": "Free Advice Reasons",
        "UserPermissionId": 2,
        "AddedBy": "Deepthi",
        "AddedOn": "/Date(1331044383673)/",
        "LookupTable": 0,
        "RecordVersion": 1,
        "UpdatedBy": null,
        "UpdatedOn": null,
        "EndUserNetworkLoginName": null
    },
    {
        "ParentId": 1,
        "Id": 8,
        "TableId": 5,
        "TableName": "Genus",
        "UserPermissionId": 2,
        "AddedBy": "Deepthi",
        "AddedOn": "/Date(1331044383717)/",
        "LookupTable": 0,
        "RecordVersion": 1,
        "UpdatedBy": null,
        "UpdatedOn": null,
        "EndUserNetworkLoginName": null
    },
    {
        "ParentId": 1,
        "Id": 9,
        "TableId": 13,
        "TableName": "Keywords",
        "UserPermissionId": 2,
        "AddedBy": "Deepthi",
        "AddedOn": "/Date(1330992000000)/",
        "LookupTable": 0,
        "RecordVersion": 1,
        "UpdatedBy": null,
        "UpdatedOn": null,
        "EndUserNetworkLoginName": null
    },
    {
        "ParentId": 1,
        "Id": 10,
        "TableId": 18,
        "TableName": "Knowledge Base Keywords",
        "UserPermissionId": 2,
        "AddedBy": "Ashar",
        "AddedOn": "/Date(1330992000000)/",
        "LookupTable": 0,
        "RecordVersion": 1,
        "UpdatedBy": null,
        "UpdatedOn": null,
        "EndUserNetworkLoginName": null
    },
    {
        "ParentId": 1,
        "Id": 11,
        "TableId": 6,
        "TableName": "Reallocation Reasons",
        "UserPermissionId": 2,
        "AddedBy": "Deepthi",
        "AddedOn": "/Date(1331044383800)/",
        "LookupTable": 0,
        "RecordVersion": 1,
        "UpdatedBy": null,
        "UpdatedOn": null,
        "EndUserNetworkLoginName": null
    },
    {
        "ParentId": 1,
        "Id": 12,
        "TableId": 7,
        "TableName": "Sample Types",
        "UserPermissionId": 2,
        "AddedBy": "Deepthi",
        "AddedOn": "/Date(1331044383840)/",
        "LookupTable": 0,
        "RecordVersion": 1,
        "UpdatedBy": null,
        "UpdatedOn": null,
        "EndUserNetworkLoginName": null
    },
    {
        "ParentId": 1,
        "Id": 13,
        "TableId": 19,
        "TableName": "Section Categories Catalogue",
        "UserPermissionId": 2,
        "AddedBy": "Deepthi",
        "AddedOn": "/Date(1364169600000)/",
        "LookupTable": 0,
        "RecordVersion": 1,
        "UpdatedBy": null,
        "UpdatedOn": null,
        "EndUserNetworkLoginName": null
    },
    {
        "ParentId": 1,
        "Id": 14,
        "TableId": 12,
        "TableName": "Subjects",
        "UserPermissionId": 2,
        "AddedBy": "Ashar",
        "AddedOn": "/Date(1330992000000)/",
        "LookupTable": 0,
        "RecordVersion": 1,
        "UpdatedBy": null,
        "UpdatedOn": null,
        "EndUserNetworkLoginName": null
    },
    {
        "ParentId": 1,
        "Id": 15,
        "TableId": 8,
        "TableName": "Topics",
        "UserPermissionId": 2,
        "AddedBy": "Deepthi",
        "AddedOn": "/Date(1331044383860)/",
        "LookupTable": 0,
        "RecordVersion": 1,
        "UpdatedBy": null,
        "UpdatedOn": null,
        "EndUserNetworkLoginName": null
    },
    {
        "ParentId": -1,
        "Id": 1,
        "TableId": 0,
        "TableName": "Tables",
        "UserPermissionId": null,
        "AddedBy": null,
        "AddedOn": null,
        "LookupTable": null,
        "RecordVersion": null,
        "UpdatedBy": null,
        "UpdatedOn": null,
        "EndUserNetworkLoginName": null
    }
]

What I want to do is have a single tree item with all the children inside that item. My final JSON with “ParentId”: -1 is that item. This is my javaScript:

@using System.Web.Script.Serialization
@model List<AMT2015.WebAPP.Models.SystemAdmin.LookupTableTree>

<script type="text/javascript">
    function initTreeViewWidget() {

        var data = '@Html.Raw((new JavaScriptSerializer()).Serialize(Model))';

        var obj = jQuery.parseJSON(data);
       
        obj.push(
             {
                 "ParentId": -1,
                 "Id": 1,
                 "TableId": 0,
                 "TableName": "Tables",
                 "UserPermissionId": null,
                 "AddedBy": null,
                 "AddedOn": null,
                 "LookupTable": null,
                 "RecordVersion": null,
                 "UpdatedBy": null,
                 "UpdatedOn": null,
                 "EndUserNetworkLoginName": null
             });

        data = JSON.stringify(obj);
        console.log(data);

        var source =
        {
            datatype: "json",
            datafields: [
                { name: 'ParentId' },
                { name: 'Id' },
                { name: 'AddedBy' },
                { name: 'AddedOn' },
                { name: 'EndUserNetworkLoginName' },
                { name: 'LookupTable' },
                { name: 'RecordVersion' },
                { name: 'TableId' },
                { name: 'TableName' },
                { name: 'UpdatedBy' },
                { name: 'UpdatedOn' },
                { name: 'UserPermissionId' }
            ],
            id: 'Id',
            localdata: data
        };

        // create data adapter.
        var dataAdapter = new $.jqx.dataAdapter(source);
        // perform Data Binding.
        dataAdapter.dataBind();
        // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents
        // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter
        // specifies the mapping between the 'text' and 'label' fields.
        var records = dataAdapter.getRecordsHierarchy('Id', 'ParentId', 'items', [{ name: 'TableName', map: 'label' }]);
        $('#jqxTree').jqxTree({ source: records, width: '300px' });
    }
</script>

    <div id='jqxTree' caption ="Navigation">

    </div>

<script type="text/javascript" defer="defer">
    @Html.Raw(ViewBag.StartupScript)
</script>

Can anyone see where the issue is? My JSON is valid and there are no console errors. It just doesn’t display on the screen.

Thanks
Nick

[NadezhdaParticipant]

Hello Nick,

Your function initTreeViewWidget() is not called in javaScript code and may be this is the reason for the issue. Please, include the following $(document).ready() function in your code to fix this issue.

$(document).ready(function () {
      initTreeViewWidget();
});

I also notice that you are using the same id two times in your JSON data- in parent element and in the first child element(“Id”: 1).

Best Regards,
Nadezhda

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

[nickgowdyParticipant]

Hi Nadezhda,

Thanks for your help, I changed the logic for how the IDs are generated for each child and it now works.

I’m using partial views with ASP.NET MVC so function initTreeViewWidget() is injected into the page.

Kind regards,
Nick

[Author]

Posts