This error is still present even after 3 years in the newest version of Telerik Reporting R1 2023 SP1 (17.0.23.315)

The same problem is happening when deselecting. If the pop-up window of multiselect is opened then deselecting a few elements makes the pop-up jumping to the top-left corner of the window.

Hello Neli,

I have attached a video showing the bug. You have a demo project that a have attached in this thread.

If you are referring to using close event like this:

function onClose(e) {
    var val = e.sender.value();

    valueChangedCallback(parameter, val);
}
then when deselecting an element it doesn't send the request because "valueChangedCallback" method is not being invoked. However i managed to make a workaround when deselecting:

function onDeselect(e) {
    // setTimeout was used here because "valueChangedCallback" needs to be called after deselection(not before)
    setTimeout(function () {
        var val = e.sender.value();

        valueChangedCallback(parameter, val);
    });
}
So using both of these events seems to workaround the issue.

Do you have a plan of fixing the bug of popup jumping to the top-left side corner of the window when using the change event? If you can however provide us with the internal code of how the out-of-the-box parameter editor handles the select and deselect of the elements in javascript that would be helpful.

Hello Neli,

I am attaching a sample project that reproduces the problem. The sample uses the project in "Examples\CSharp\MvcDemo" folder and "Product Line Sales" Report from "Report Designer\Examples" folder with a slight modification on the parameters. Both the parameters "ProductCategory" and "ProductSubcategory" are multivalue cascading parameters. All you have to do to reproduce the bug is to select some elements from the "Category" parameter. Add the missing NuGet packages and references.

As per using out-of-the-box ComboBox, the reason why we don't use that is because we need to handle the select event like in this article: https://docs.telerik.com/kendo-ui/controls/editors/multiselect/how-to/selection/select-all-values-with-one-selection. In the out-of-the-box option we cannot handle the events(in our case the select event).

As per when do we expect to send the data from the custom multiselect, we expect this to be the same as with the out-of-the-box multiselect. So that means after the multiselect popup closes and not immediately after selecting an element. Maybe we need to open a new "feature request" for this.

And lastly, please update NuGet packages on the example folder projects.

Hi Neli,

I am sending you a sample code but if you need additional information please let me know.

<div class="row">
    <div class="col-sm-12">
        @(Html.TelerikReporting().ReportViewer()
            .Id("Detail_Transaction_Report")
            .ServiceUrl(Url.Content("~/api/reports"))
            .TemplateUrl(Url.Content("~/ReportViewer/templates/telerikReportViewerTemplate-FA.html"))
            .ReportSource("Report_v01.trdp")
            .Parameters(new Parameters { Editors = new Editors { SingleSelect = EditorTypes.ComboBox, MultiSelect = EditorTypes.ComboBox } })
            .ParameterEditors(editor => editor.MultiValueEditor("multiValueEditor"))
            .ViewMode(ViewMode.Interactive)
            .ScaleMode(ScaleMode.FitPageWidth)
            .PersistSession(false)
            .PrintMode(PrintMode.AutoSelect)
            .EnableAccessibility(false)
        )
    </div>
</div>

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

        function onChange(e) {
            var val = e.sender.value();

            valueChangedCallback(parameter, val);
        }

        function onSelect(e) {
            // Additional code
        }

        return {
            beginEdit: function (param) {
                parameter = param;

                $(multiSelectElement).kendoMultiSelect({
                    dataTextField: 'name',
                    dataValueField: 'value',
                    value: parameter.value,
                    autoClose: false,
                    filter: 'contains',
                    dataSource: parameter.availableValues,
                    change: onChange,
                    select: onSelect
                });
            }
        };
    }
</script>

 

I want to let you know that this bug only happens if the "autoClose" option is set to false and when using cascading parameters like in this article https://docs.telerik.com/reporting/designing-reports-parameters-cascading-report-parameters.

Also what i noticed is that if i use multiselect this way(with the "MultiValueEditor") and if i select one of elements in the popup, it immediately sends the request to filter the cascading parameter without waiting for the popup to close. But if i don't use the parameter editor and when i select elements from popup it waits till the popup closes to send the request for filtering cascading parameter.