From d415617b2feb95f0a7a6b6ec668c8d5bb53317e8 Mon Sep 17 00:00:00 2001 From: IvetNikolova <118352332+IvetNikolova@users.noreply.github.com> Date: Fri, 4 Oct 2024 17:56:08 +0300 Subject: [PATCH] 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 --- ...iewer-area-width-through-kendo-splitter.md | 34 ++++++++++++------- 1 file changed, 22 insertions(+), 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 index 78cab364d..30aa4b50f 100644 --- 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); +} +````