Telerik blogs
JavaScriptT Light_870x220

Learn about a new feature in Telerik Reporting that lets you change the default parameters editors types for visible parameters in the HTML5 Viewer's Parameters Area.

The Telerik Reporting team works hard to satisfy your needs and wishes. With every release we are trying to improve our products and to offer you helpful new additions. In our latest release, the Telerik HTML5 Report Viewer provides an option for changing the parameter editors type. All newly added editors are  Kendo UI widgets since the HTML5 Report Viewer is built on top of the Kendo UI product.

Defining the Parameters

The UI editor can be changed for parameters both accepting single or multiple values. The parameter needs to have predefined AvailableValues in its report definitions. To specify that the parameter should accept multiple values turn on the MultiValue property.

Defining the parameters

Defining the Editors Type

Both parameters have two optional editor types – ListView and ComboBox. The listview is the default editor type. To use it there are no additional settings to be configured. As for the other editor type, a simple setting must be applied to the HTML5 Report Viewer:

First, this feature requires the latest official release. So please consider updating to R1 2019+.

Second, after we are all on the same page, for your convenience here is an example for all HTML5 Report Viewer wrappers:

HTML5 jQuery Report Viewer

$("#reportViewer1").telerik_ReportViewer({
 …
parameters: {
   editors: {
       singleSelect: telerikReportViewer.ParameterEditorTypes.COMBO_BOX,
       multiSelect: telerikReportViewer.ParameterEditorTypes.COMBO_BOX
   }
  }
});

HTML5 ASP.NET MVC Report Viewer

@(Html.TelerikReporting().ReportViewer()
 …
.Parameters(new Parameters {
 Editors = new Editors {
       SingleSelect = EditorTypes.ComboBox,
       MultiSelect = EditorTypes.ComboBox
 }
})
)

HTML5 ASP.NET Web Forms Report Viewer

<telerik:ReportViewer  EnableAccessibility="false" ID="reportViewer1" runat="server">
    …
  <Parameters>
   <Editors SingleSelect="ComboBox" MultiSelect="ComboBox"></Editors>
  </Parameters>
</telerik:ReportViewer>

HTML5 Angular Report Viewer

<tr-viewer #viewer1="" [parameters]="{
  editors: {
     singleSelect: 'COMBO_BOX',
     multiSelect: 'COMBO_BOX',
  }
}"></tr-viewer>

Defining the Editors Type in Telerik Report Server

The Report Server product benefits from the new functionality as well. You can configure the report preview to use the alternative inputs. Navigate to the Configuration page/Report Preview tab to choose the preferred editors.

Defining the editors type in Telerik Report Server

As you can see, it is not rocket science, but it does give you a lot of user usability. The editor types as a Kendo UI widget supports built-in filtering, saves quite a bit of space in the Parameters area and allows users to quickly select the right value even if there are a hundred choices. Try it now and let us know how it works for you!

Try it Out and Share Feedback

We want to know what you think—you can download a free trial of Telerik Reporting or Telerik Report Server today and share your thoughts in our Feedback Portal, or right in the comments below.

Start your trial today: Reporting Trial Report Server Trial

Tried DevCraft?

You can get Reporting and Report Server with Telerik DevCraft. Make sure you’ve downloaded a trial or learn more about DevCraft bundles. DevCraft gives you access to all our toolsets, allowing you to say “no” to ugly apps for the desktop, web or mobile.


Veronika Ivanova
About the Author

Veronika Ivanova

Veronika is part from the Telerik Reporting team. She is an enthusiastic Frontend Developer with over 5 years of experience in delivering great customer experience on the web. She enjoys spending time with her family, playing tennis or doing creative activities, such as crocheting, playing piano or drawing.

Comments

Comments are disabled in preview mode.