Expand Document Map tree on the initial load in the Html5 Report Viewers

Environment

Product

Progress® Telerik® Reporting

Description

You may want to have the Document Map tree expanded by default on the initial load of the viewer. Currently, the user has to click on the tree node and expand it after the page is rendered.

Solution

The DocumentMap area is a Kendo UI TreeView widget. It may contain multiple nested nodes that are collapsed by default. Expanding initially all nodes is not supported out of the box.

You may get the Kendo treeView widget and expand its nodes, for example with the expand method. It will be necessary to iterate over all the nodes of the Document Map, for example using recursion - expandAllNodes function in the code below. For expanding the nodes you may use the RenderingEnd event of the viewer, where the args.documentMapAvailable property specifies whether the report has a Document Map set. Here is a sample code :

<script type="text/javascript">
  ...
  function expandAllNodes(treeview, e) {
    var nodes = $(e).find("li");
    if (nodes.length > 0) {
        treeview.expand(nodes);
        for (var i = 0; i < nodes.length; i++) {
            expandAllNodes(treeview, nodes[i]);
        }
    }

    return;
  }

  function onRenderingEnd(e, args) {
    if (args.documentMapAvailable) {
        var documentMapSelector = "#" + $("#reportViewer1").attr("data-selector") + "-documentMap";
        var kendoTreeView = $(documentMapSelector).data("kendoTreeView");
        expandAllNodes(kendoTreeView, kendoTreeView.element);
    }
  }

  $(document).ready(function () {
     ...
     // Viewer configuration
     $("#reportViewer1")
    .telerik_ReportViewer({
        ...
        renderingEnd: onRenderingEnd
    });
    ...
  });
</script>