Dropdownlist in a Web-Report

[Simon]

Hello,

in my webproject I have integrated a reporting feature.

Please see the attached file!

Now I want to replace the listview with a dropdownmenu.

How can I do this?

I have not found a possibility to configure it.

In this example I have only two items, but in other cases there are more then two.

By the way: How can I rename the Preview-Button?

 

 

 

 

 

 

[Veronika]

Hello Simon,

There are two ways to replace a listview editor with drop-down editor. 

1. The first one is to upgrade to our latest version in which we have developed that functionality, by setting a simple option to the Telerik Report Viewer. See our documentation article.
The property that you are looking for is "parameters". The code you need is:

$("#reportViewer1").telerik_ReportViewer({
  ...
  parameters: {
    editors: {
      singleSelect : telerikReportViewer.ParameterEditorTypes.COMBO_BOX, //  defineds the editor type for the single select parameters
      multiSelect: telerikReportViewer.ParameterEditorTypes.COMBO_BOX, //defineds the editor type for the multi select parameters
    }
  }
});

If you want to change only singleSelect editor type, please remove the other one. Or the other way around.

2. The second option is if you do not want to upgrade. There is a way to create a custom parameter editor. Follow the instruction in this How-To article.


Let us know if you have any difficulties and need some more help. 

Regards,
Veronika
Progress Telerik

[Simon]

Hello,

I have installed the new version and then i became an error message which says:

a reference to System.Common.Drawing is missing.

I have never become that message before.

Where can I find that dll?

 

[Peter]

Hello Simon,

Is the project in question based on ASP.NET Core? If this is the case my recommendation is to uninstall all Telerik Reporting NuGet packages and install them again. This should install all the required .NET Core dependencies, including System.Common.Drawing. For more information see .NET Core Support help article.

About renaming the Preview button my suggestion is to localize the parametersAreaPreviewButton key as elaborated in the Report Viewer Localization help article. The resource should be set just before defining the viewer JS as shown in the following snippet:

<script>
    (function (trv, $) {
        "use strict";
        var sr = {
            parametersAreaPreviewButton: 'Preview Test',
        };
        trv.sr = $.extend(trv.sr, sr);
    }(window.telerikReportViewer = window.telerikReportViewer || {}, jQuery));
</script>
<script src="/ReportViewer/js/telerikReportViewer-13.0.19.118.js"></script>

Regards,
Peter
Progress Telerik

[Simon]

Hello Veronika,

I have upgade to the new version.

Yes, I have difficulties.

Where, in my project with ASP WebForms, can I paste your code-example?

I don't know.

 

 

[Veronika]

Hi Simon,

The code snippet should be placed in the head tag of your page. See the attachment.
It is important to be loaded before telerikReportViewer-13.0.19.118.js, for which our control is responsible. So as long as the code is before the Telerik Report Viewer initialization you are fine.

Best Regards,
Veronika
Progress Telerik

[Simon]

Hello Veronika,

I have copy and paste that code snippet into the head of the files DefaultCS.aspx and later into Reporting.ascx.

But it does not work.

Must I have all the references in my files, seen on your attachment?

[Veronika]

Hi Simon,

I have added the code in our WebFormsDemo Example. The demo is added as an attachment. 
As for the references, you have to add the jquery before the code snippet. See Default.aspx file. 

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

 
I hope this demo project will help you more. If you have any additional questions, do not hesitate to contact us.

Best Regards,
Veronika
Progress Telerik

[Simon]

Hi Veronika,

Now the PreviewButton shows another text, well done.

But I have still a problem with the dropdownlist.

My ReportViewer doesn't show the dropdownlist.

Your WebFormsDemo Example was helpful to change the text of the PreviewButton, but it doesn't

shows either a listview nor a dropdownlist.

Have you got another example witch help me rather with my problem?

Here is my code that works partially:

01.<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Reporting.ascx.cs" Inherits="Reporting"  %>

02. 

03.<%@ Register Assembly="Telerik.ReportViewer.Html5.WebForms, Version=13.0.19.116, Culture=neutral, PublicKeyToken=a9d7983dfcc261be" Namespace="Telerik.ReportViewer.Html5.WebForms" TagPrefix="telerik" %>

04. 

05.<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

06.     

07. 

08.<style type="text/css">

09.    .fridge-header {

10.        margin-left: 5%;

11.    }

12. 

13.    .pageContent {

14.        font-family: Arial;

15.    }

16.</style> 

17.// do not work

18.<script type="text/javascript">

19. 

20. $("#ReportViewer1").telerik_ReportViewer({

21.      

22.         parameters: {

23.             editors: {

24.                multiSelect: telerikReportViewer.ParameterEditorTypes.COMBO_BOX,

25.             }        

26.  }

27.});

28. 

29.    </script>

30.//does work

31.<script type="text/javascript">

32. 

33.        (function (trv, $) {

34.            "use strict";

35.            var sr = {

36.                parametersAreaPreviewButton: 'Anzeigen',

37.            };

38.            trv.sr = $.extend(trv.sr, sr);

39.        }(window.telerikReportViewer = window.telerikReportViewer || {}, jQuery));

40. 

41.    </script>

42. 

43. 

44.<script src="/ReportViewer/js/telerikReportViewer-13.0.19.118.js"></script>

[Peter]

Hello Simon,

The code used in the code snippet is for the HTML5 Report Viewer jQuery widget. How to change the parameters UI from ListView to DropDown for HTML5 Web Forms Report Viewer is elaborated in the How To: Change Parameters Editors Type help article. 

Give it a try and let me know if additional assistance is needed.

Regards,
Peter
Progress Telerik

[Simon]

Hello,

I have copy and paste this code snippet into my file

and I get green underline error.

"No content can be specified between the start and end tags of the parameters element."

Furthermore I think it is not Javascript code as described but html.

 

 

 

[Simon]

Sorry,

it was still missing my attachments.

[Peter]

Hi Simon,

I have tested the provided in the article code snippet and the parameter editor is changed successfully. Still, it seems the web forms editor is showing a warning. This could be related to the multiple installed Telerik Reporting versions. I have updated the demo project and attached it to this post. Please run it to ensure that the editor is changed to a ComboBox as specified in the viewer setting.

Regards,
Peter
Progress Telerik

[Simon]

Hi Peter and all the others,

It works!

thank you very much.

I have simply ignored that green underline error, however it works.

DropDown could have been defined as standard, so it would be easier for me ;. )