jQuery UI Widgets Forums Navigation Tree Exapand top root item

This topic contains 2 replies, has 2 voices, and was last updated by  dev_pepper 10 years, 10 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Exapand top root item #28221

    dev_pepper
    Participant

    Here is the code that i used to view a tree structure.

    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = "";
    var data = [{
    "Id": "be448add-eb26-4f9c-9313-a21800e61e07", "Name": "Test", "ParentId": "00000000-0000-0000-0000-000000000000"
    }, {
    "Id": "69da609e-7ef9-4f02-982c-a21800e675ef", "Name": "Test 1", "ParentId": "be448add-eb26-4f9c-9313-a21800e61e07"
    }, {
    "Id": "f053819e-87a4-404a-9cce-a21800e69894", "Name": "Test 1-2", "ParentId": "69da609e-7ef9-4f02-982c-a21800e675ef"
    }, { "Id": "7938d9cd-96ba-4cc8-b030-a21800e6b00c", "Name": "Test 1-3", "ParentId": "69da609e-7ef9-4f02-982c-a21800e675ef" }];
    // prepare the data
    var source =
    {
    datatype: "json",
    datafields: [
    { name: 'Id' },
    { name: 'ParentId' },
    { name: 'Name' }
    ],
    id: 'Id',
    localdata: data
    };
    // create data adapter.
    var dataAdapter = new $.jqx.dataAdapter(source);
    // perform Data Binding.
    dataAdapter.dataBind();
    var records = dataAdapter.getRecordsHierarchy('Id', 'ParentId', 'items', [{ name: 'Name', map: 'label' }]);
    $('#jqxWidget').jqxTree({ source: records, width: '300px', theme: theme });
    });
    </script>
    <div id='jqxWidget'>
    </div>
    </div>

    It works nice.but i want to expand my top most parant(top root) while iam firstly loading tree.How can i do that?

    Like this ..

      0(top root)
    0.1
    0.2
    0.3

    Thanks,

    • This topic was modified 10 years, 10 months ago by  dev_pepper.
    • This topic was modified 10 years, 10 months ago by  dev_pepper.
    • This topic was modified 10 years, 10 months ago by  dev_pepper.
    • This topic was modified 10 years, 10 months ago by  dev_pepper.
    • This topic was modified 10 years, 10 months ago by  dev_pepper.
    Exapand top root item #28272

    Dimitar
    Participant

    Hello devpepper,

    Here is how to expand the first item after initialization:

    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = "";
    var data = [{
    "Id": "be448add-eb26-4f9c-9313-a21800e61e07", "Name": "Test", "ParentId": "00000000-0000-0000-0000-000000000000"
    }, {
    "Id": "69da609e-7ef9-4f02-982c-a21800e675ef", "Name": "Test 1", "ParentId": "be448add-eb26-4f9c-9313-a21800e61e07"
    }, {
    "Id": "f053819e-87a4-404a-9cce-a21800e69894", "Name": "Test 1-2", "ParentId": "69da609e-7ef9-4f02-982c-a21800e675ef"
    }, { "Id": "7938d9cd-96ba-4cc8-b030-a21800e6b00c", "Name": "Test 1-3", "ParentId": "69da609e-7ef9-4f02-982c-a21800e675ef"}];
    // prepare the data
    var source =
    {
    datatype: "json",
    datafields: [
    { name: 'Id' },
    { name: 'ParentId' },
    { name: 'Name' }
    ],
    id: 'Id',
    localdata: data
    };
    // create data adapter.
    var dataAdapter = new $.jqx.dataAdapter(source);
    // perform Data Binding.
    dataAdapter.dataBind();
    var records = dataAdapter.getRecordsHierarchy('Id', 'ParentId', 'items', [{ name: 'Name', map: 'label'}]);
    $('#jqxWidget').jqxTree({ source: records, width: '300px', theme: theme });
    var items = $('#jqxWidget').jqxTree('getItems');
    for (var i = 0; i < items.length; i++) {
    if (items[i].id == 'be448add-eb26-4f9c-9313-a21800e61e07') {
    $('#jqxWidget').jqxTree('expandItem', items[i]);
    };
    };
    });
    </script>
    <div id='jqxWidget'>
    </div>
    </div>

    Best Regards,
    Dimitar

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

    Exapand top root item #29357

    dev_pepper
    Participant

    Thank you Dimitar..It works

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

You must be logged in to reply to this topic.