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

3 posts, 1 answers
  1. Ahmed
    Ahmed avatar
    34 posts
    Member since:
    Apr 2015

    Posted 30 Apr 2015 Link to this post

    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>

  2.
  3. Answer
    Stef
    Admin
    Stef avatar
    3610 posts

    Posted 04 May 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  5. Ahmed
    Ahmed avatar
    34 posts
    Member since:
    Apr 2015

    Posted 04 May 2015 Link to this post

    Thank you ...
Back to Top