Set the Parameter Splibar width

[Paul Ridden]

Hiya,

We've upgraded Telerik Reports from v12.1.18.620 to v13.0.19.116. In the updates, you have added a splitbar to control the width of the report parameters.

We create custom DateTime parameter editors for some of our reports. Now, the DateTime pickers do not fit on the screen because of the width of the .

We used to control the parameter width using .trv-parameters-area in CSS, but that no longer works.

So, how can we widen/move the  so that a DateTime picker can be displayed fully?

Thanks,

Paul

 

[Silviya]

Hi Paul,

I noticed that you've opened a support ticket on the same topic. Please let me share my colleague's answer here as well:

"Telerik Report Viewer added kendo splitter for its template areas, so the user to be able to resize the areas. By default Document map and Parameters, areas have size 210px wide. At the moment manipulating this value is not represented in our Viewer. As the Telerik Report Viewer uses kendo UI widgets for its templates, the user could change the UI as they desire to through the widget settings and options.

To do it just execute the following code when the parameters are loaded. You could listen for a renderingEnd or pageReady event, test and see which one is more suitable for you:

var splitter = $("#reportViewer").find(".k-splitter").data("kendoSplitter")
splitter.options.panes[2].size = "250px";
splitter.resize(true);

The code will resize the Parameters area to the wanted size. 

There is something that I notice, that I think you will not like as an effect. I see that your date time picker has the following style, which comes from - "https://tasking.skillweb.co.uk/Kiwi/Content/kendo/kendoBundle .....":

.k-datetimepicker {
    width: 15em;
}

Setting the width of the widget will prevent it from expanding if the Parameters area is resized. See my attachment 'date-time-width-not-resizable.png'. My advice is if the set width is from styles that you have added to change the width value to 100%, or if they are from kendo theme to override it.

.k-datetimepicker {
    width: 100%;
}

If you look into styles that we distributed with the Viewer, you will notice that all default widget in the Parameters area has 100% width. See attachment "date-picker-width-in-online-demos.png". 

Kendo date time picker widget is not by default distribute in the kendo subset script with the Telerik Report Viewer, that`s why there are no styles rules in our style files that will handle this widget rendering. The user has to adjust the layout and styles manually.

Let us know if the suggestions work for you or you have any other difficulties. If you want to see an option in the Telerik Report Viewer for setting the Parameters and Document map areas width, you could send us a feature request in our Public feedback portal."

Regards,
Silviya
Progress Telerik