HTML5 Report Viewer - How to set dropdownlist to be multiselect with checkbox for custom parameter editor ?

[Ahmed]

Hi

i have use this link http://www.telerik.com/help/reporting/html5-report-viewer-howto-custom-parameter-editor.html to create dropdownlist for my param - it works fine if param not multivalues - but now i set param to be mutivalues but i can't get dropdownlist again i got is as list as image

so please how can i set it to let me view it as kendo dropdownlist with checkbox to let me chose more than one value ?

<div id="reportViewer1" style="height:1241px;">
    loading...
</div>

 <script>
        $(document).ready(function () {
            $("#reportViewer1")
                .telerik_ReportViewer({
                    serviceUrl: "/api/reports",
                    templateUrl: '/ReportViewer/templates/telerikReportViewerTemplate-9.0.15.324.html',

                    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,
                                                //optionLabel: "إختر الصنف ...",

                                            });
                                            dropDownList = $(dropDownElement).data("kendoDropDownList");
                                        }
                                    };
                                }
                            }],
                    reportSource: {
                        report: "Hemdan.Views.kinds.Select_Stock_BarCode, Hemdan",
                    },
                    viewMode: telerikReportViewer.ViewModes.INTERACTIVE,
                    scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
                    scale: 1.0,
                });
        });
    </script>

[Stef]

Hi Ahmed,

Please test replacing kendoDropDown with kendoMultiSelect when you are creating an editor for multivalue report parameter. Also the check for the type of parameter must be modified to recongnize multivalue parameters:

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).kendoMultiSelect({
                                             dataTextField: "name",
                                             dataValueField: "value",
                                             value: parameter.value,
                                             dataSource: parameter.availableValues,
                                             change: onChange,


                                         });
                                         dropDownList = $(dropDownElement).data("kendoMultiSelect");
                                     }
                                 };
                             }
                         }],

I hope this helps you.

Regards,
Stef
Telerik

 

 

[Ahmed]

Thank you ...