how to expand dxTreeview by page load

Question

When page load, how to expand child nodes in devExtreme dxTreeview control by default. Please give some suggestions or examples.

Answer 1

Try to trigger a click on each trigger:

$( document ).ready( function(){
    $( '.dx-treeview-toggle-item-visibility' ).each( function(){
        $( this ).click();
    } );
} );

Answer 2

You could try a recursive approach:

// Declare a function
var clickRecursive = function ($elements, selector) {
  // Exit recursion
  if ($elements.length === 0) return;

  $elements.each(function(){
    // First, click all elements
    $(this).click();

    // Then click children
    clickRecursive($(this).find(selector), selector);
  });
}

$(document).ready(function(){
  var toggleSelector = '.dx-treeview-toggle-item-visibility';
  clickRecursive($(toggleSelector), toggleSelector);
});

Answer 3

You can use expandedExpr option. It specifies the name of the data source item field whose value defines whether or not the corresponding node is expanded. For example, you could init dxTreeView something like this:

$("#your-selector").dxTreeView({
   dataSource: [
        id: 1, text: 'Item 1', expanded: true, items: [
            id: 2, text: 'Subitem 1', expanded: true, items: [
              //...
            ]
        ]
   ]
});

Also you can use expandItem(itemElement) method to expand some particular node.

See more information here http://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxTreeView