Under Review
Last Updated: 03 Sep 2020 21:13 by ADMIN
Naim
Created on: 22 Aug 2020 19:35
Type: Feature Request
2
Add "autoWidth: true" in built-in SingleSelect ComboBox parameter editor

The built-in MultiSelect ComboBox offers the "autowidth: true" option. So we need the same for the SingleSelect ComboBox.

The popup element for both of these editors is the same. So please add this option because the lack of it is making us create a custom editor only for this reason.

5 comments
ADMIN
Eric R | Senior Technical Support Engineer
Posted on: 03 Sep 2020 21:13

Hi Naim,

That is great to hear this workaround will work for you. Although, I want to make sure that you understand this is adding custom parameter editors to the Report Viewer. The reports would not need to be altered. To elaborate, every report that contains a Muti-Select Parameter would work the same way in a report viewer with the below changes.

Additionally, adding this change to the framework may take some time. I recommend the Custom Parameter Editors to your Report Viewers for now and then removing them once it has been implemented. 

In the meantime, please let me know if you need any additional information. Thank you for being a valued Telerik Reporting developer.

Regards,


Eric R | Senior Technical Support Engineer
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Naim
Posted on: 29 Aug 2020 16:00

Hi Eric,

Thank you for the provided sample and solution. Yes this is suitable for our scenario, but the problem with this approach is that you have to use it in every report. And we have a lot of them. I still think that is better to just add this as a feature.

ADMIN
Eric R | Senior Technical Support Engineer
Posted on: 28 Aug 2020 21:45

Hi Naim,

Thank you for the additional information. For the ASP.NET MVC Report Viewer, it is possible to create Custom Parameter Editors. For the workaround, the single select parameter editor could be initialized with the autoWidth set to true. Let me provide an example below what that would look like. 

Workaround

The following razor page initializes a kendoComboBox for the single select parameter and a kendoMultiSelect for the multi select parameter. Essentially, it recreates the same default parameters with the settings that you would prefer. Additionally, this is better to maintain as it will work with each release without having to change our the report viewer script we deliver.

@using Telerik.Reporting
@using Telerik.ReportViewer.Mvc

@{
    ViewBag.Title = "Sample Report";
}

@section styles {

    <link href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.blueopal.min.css" rel="stylesheet" />

    <style>
        #reportViewer1 {
            position: relative;
            width: 1300px;
            height: 900px;
            font-family: Verdana, Arial;
        }
    </style>
}

@section scripts {
    <!--If Kendo is used it should be added before the report viewer.-->
    <script src="@Url.Content("~/api/reports/resources/js/telerikReportViewer-14.1.20.618.min.js/")"></script>
    
    <!-- Custom Editors -->
    <script>
        function createSingleSelectEditor(placeholder, options) {
            var comboboxElement = $(placeholder).html('<div></div>');
            var parameter,
                valueChangedCallback = options.parameterChanged,
                combobox;

            function onChange() {
                var val = combobox.value();
                valueChangedCallback(parameter, val);
            }

            return {
                beginEdit: function (param) {

                    parameter = param;

                    $(comboboxElement).kendoComboBox({
                        autoWidth: true,
                        dataTextField: "name",
                        dataValueField: "value",
                        value: parameter.value,
                        dataSource: parameter.availableValues,
                        change: onChange
                    });

                    combobox = $(comboboxElement).data("kendoComboBox");
                }
            };
        }

        function createMultiSelectEditor(placeholder, options) {
            var multiSelectElement = $(placeholder).html('<div></div>');
            var parameter,
                valueChangedCallback = options.parameterChanged,
                multiSelect;

            function onChange() {
                var val = multiSelect.value();
                valueChangedCallback(parameter, val);
            }

            return {
                beginEdit: function (param) {

                    parameter = param;

                    $(multiSelectElement).kendoMultiSelect({
                        autoWidth: true,
                        dataTextField: "name",
                        dataValueField: "value",
                        value: parameter.value,
                        dataSource: parameter.availableValues,
                        change: onChange
                    });

                    multiSelect = $(multiSelectElement).data("kendoMultiSelect");
                }
            };
        }

    </script>

}

@(Html.TelerikReporting().ReportViewer()
        .Id("reportViewer1")
        .ServiceUrl(Url.Content("~/api/reports"))
        .ReportSource(new UriReportSource() { Uri = "SampleReport.trdp" })
        .ViewMode(ViewMode.Interactive)
        .ScaleMode(ScaleMode.Specific)
        .Scale(1.0)
        .PersistSession(false)
        .PrintMode(PrintMode.AutoSelect)
        .SendEmail(new SendEmail { Enabled = false })
        .EnableAccessibility(false)
        .ParameterEditors(
            editors => editors
                .SingleSelectEditor("createSingleSelectEditor")
                .MultiSelectEditor("createMultiSelectEditor")
        )
)

Wrapping Up

For additional reference, I have attached a working sample that can be tested locally. To run the sample ensure the Telerik NuGet Feed is Configured in Visual Studio.

Please let me know if this workaround is suitable for your scenario. Thank you and I look forward to your reply.

Regards,


Eric R | Senior Technical Support Engineer
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Attached Files:
Naim
Posted on: 28 Aug 2020 16:57

Hello Eric,

Yes indeed both of them are different widgets but both of them share the same Popup widget. And since both of them contain autoWidth property it should be set to "true" on SingleSelect ComboBox while MultiSelect ComboBox already has it.

As per your questions we are using HTML5 ASP.NET MVC Report Viewer. Telerik Reporting version R2 2020 SP1(14.1.20.618). Hosting on ASP.NET MVC .net framework.

We actually made a workaround on this by adding "autoWidth: true" in the ComboBox in the js script of ReportViewer provied when you install Telerik Reporting. The problem is that in every update, we have to manually add that change too. It would be better to just add that so we don't need to add it every time a new update comes.

ADMIN
Eric R | Senior Technical Support Engineer
Posted on: 28 Aug 2020 13:55

Hi Naim,

Thank you for this feedback. The multi-select ComboBox and single-select ComboBox are actually based on different Kendo UI Controls. The good news is that they both contain an AutoWidth property. As a result, this will require more investigation.

To investigate this more for your scenario, can you let me know the following details?

  1. Which of our HTML5 Report Viewer's are being used?
  2. What is the Version of Telerik Reporting and the Report Viewer?
  3. What is the Report Viewer hosting application and version?

Once I have the above information, I will either follow up with a workaround or more information on the issue.

In the meantime, please let me know if you need any additional information. Thank you for choosing Telerik Reporting.

Regards,


Eric R | Senior Technical Support Engineer
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.