Exapand top root item

[dev_pepperParticipant]

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,

[DimitarParticipant]

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/

[dev_pepperParticipant]

Thank you Dimitar..It works

[Author]

Posts