Updated snippets for Document Map and Parameter Area (#1497)

* Updated snippets for Document Map and Parameter Area * Update modify-html5-viewer-area-width-through-kendo-splitter.md --------- Co-authored-by: Dimitar Nikolov <[email protected]>
telerik · Oct 4, 2024 · d415617 · d415617
1 parent d9244ac
commit d415617
Showing 1 changed file with 22 additions and 12 deletions.
diff --git a/knowledge-base/modify-html5-viewer-area-width-through-kendo-splitter.md b/knowledge-base/modify-html5-viewer-area-width-through-kendo-splitter.md
@@ -1,8 +1,8 @@
 ---
-title: Modify default Document Map and Parameter areas width in Html5 Report Viewer
-description: How to change the default Document Map and Parameter areas sizes on initial load in the Html5 Report Viewer with Kendo splitter
+title: Modify default Document Map and Parameter Areas width in HTML5 Report Viewer
+description: "Learn how to change the default Document Map and Parameter Area size on initial load in the HTML5 Report Viewer with Kendo splitter"
 type: how-to
-page_title: Resize the default Document Map and Parameter areas sizes through the splitter
+page_title: Resize the default Document Map and Parameter Area sizes through the splitter
 slug: modify-html5-viewer-area-width-through-kendo-splitter
 position: 
 tags: 
@@ -30,18 +30,28 @@ res_type: kb
 ## Description
 Sometimes it may be necessary to increase/decrease the default width of the _Document Map_ and _Parameters_ Area inside report viewer on initial load.
 
+In the Telerik HTML5 Report Viewer, we have added a [Kendo Splitter](https://demos.telerik.com/kendo-ui/splitter/index) to control the sizes of the viewer's areas. This enables the end-user to resize them using the pointing device. By default, _Document Map_ and _Parameter_ areas have a width of `210px`. This default value is not configurable in our HTML5 Report Viewers. As the Telerik Report Viewer uses Kendo UI widgets, the user could change the UI as desired through the corresponding Kendo widget settings and options.  
+
 ## Solution
-In the Telerik Html5 Report Viewer, we have added Kendo splitter to control the sizes of the viewer's areas. This enables the end-user to resize them using the pointing device. By default _Document Map_ and _Parameter_ areas have width _210px_. This default/initial value is not configurable in our Html5 Viewers. As the Telerik Report Viewer uses Kendo UI widgets, the user could change the UI as desired through the corresponding Kendo widget settings and options.  
 
-To modify the _Document Map_ or _Parameter_ area width you may include the following code in the [renderingEnd]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/api-reference/reportviewer/events/renderingend(e,-args)%}) or [pageReady]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/api-reference/reportviewer/events/pageready(e,-args)%}) event of the viewer :   
+To modify the _Document Map_ or _Parameter_ area width you may include the following code in the [renderingEnd]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/api-reference/reportviewer/events/renderingend(e,-args)%}) or [pageReady]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/api-reference/reportviewer/events/pageready(e,-args)%}) event of the viewer:   
 
+### Solution for Document Map
 
-```JavaScript
-var splitter = $("#reportViewerId").find(".k-splitter").data("kendoSplitter")
+````JavaScript
+renderingEnd: function () {
+    var splitter = $("#reportViewerId").find(".trv-document-map-splitter").data("kendoSplitter");
+    splitter.options.panes[0].size = "350px";
+    splitter.resize(true);
+}
+````
 
-splitter.options.panes[0].size = "350px";// use array index 0 for Parameter area and 1 for Document Map area
+### Solution for Parameter Area
 
-splitter.resize(true);
-```
-
-The above code will resize the _Document Map_ area to the wanted size (_350px_). To resize the _Parameters_ area use index 1 (one).
+````JavaScript
+renderingEnd: function () {
+	var splitter = $("#reportViewerId").find(".k-splitter").data("kendoSplitter");
+	splitter.options.panes[1].size = "350px";
+	splitter.resize(true);
+}
+````