New to Telerik Reporting? Download free 30-day trial

Custom Parameter Editors are not Displayed when Accessibility is Enabled in the Html5 Report Viewer

Environment

Product Version 15.2.21.915 and older
Product Progress® Telerik® Reporting

Description

If you create a Custom Parameter Editor and enable Accessibility for the viewer (enableAccessibility: true), the result is an empty parameters area. There is no trace of the parameters in the HTML DOM either. The issue is logged in our public feedback portal - The Html5 Viewer Parameters area disappears when using Custom Editor Parameters and EnableAccessibility is True.

Suggested Workarounds

The reason for the problem is that the custom editor lacks two functions related to accessibility:

addAccessibility: function (param) { },
setAccessibilityErrorState: function (param) { }

You need to add them in order to work around the problem. For example, here is the updated sample code for the custom parameter editor with empty bodies for the above functions:

<script type="text/javascript">
      $("#reportViewer1")
            .telerik_ReportViewer({           
                parameterEditors: [
                    {
                        match: function (parameter) {
                            return Boolean(parameter.availableValues) && !parameter.multivalue;
                        },

                        createEditor: function (placeholder, options)  {
                            var dropDownElement = $(placeholder).html('<div></div>'),
                                      parameter,
                                      valueChangedCallback = options.parameterChanged,
                                      dropDownList;

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

                            return {
                                beginEdit: function (param) {

                                    parameter = param;

                                    $(dropDownElement).kendoDropDownList({
                                        dataTextField: "name",
                                        dataValueField: "value",
                                      value: parameter.value,
                                        dataSource: parameter.availableValues,
                                        change: onChange
                                    });

                                    dropDownList = $(dropDownElement).data("kendoDropDownList");
                                },
                                addAccessibility: function (param) { },
                                setAccessibilityErrorState: function (param) { }    
                            };
                        }
                  }]
            });        
</script>

Note that the accessibility feature won't work for the custom editors with this implementation.

In this article