Unplanned
Last Updated: 06 Aug 2020 12:34 by ADMIN
Naim
Created on: 05 Jun 2020 12:26
Type: Bug Report
3
Multiselect popup behaves inappropriate in custom parameter editor with "MultiValueEditor"
After selecting some elements in the popup of multiselect, the popup jumps to the top-left side corner of the window.
9 comments
ADMIN
Neli
Posted on: 06 Aug 2020 12:34

Hi Naim,

Thank you for the provided video. Indeed, the last time when I tested the application, I have selected only 2 values for the parameter and for that reason, I didn't reproduce the issue. I see that the it is reproducible only after selecting third value. I logged the bug in our system and I changed its status to unplanned. As soon as the development starts, you will receive a notification. As a token of gratitude, I updated your Telerik points.

Regards,
Neli
Progress Telerik

Naim
Posted on: 30 Jul 2020 14:07

Hello Neli,

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

Attached Files:
ADMIN
Neli
Posted on: 29 Jul 2020 10:15

Hello Naim,

I am glad that you found a workaround for the issue. 

I am afraid I was not able to reproduce the popup jumping problem. If it is possible can you please send me a demo project that reproduces the behavior and a video of the issue?

Regards,
Neli
Progress Telerik

Naim
Posted on: 22 Jul 2020 11:31

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.

ADMIN
Neli
Posted on: 21 Jul 2020 14:26

Hi Naim,

Thank you for the provided project.

If I understood correctly, the issue is related to the time when the child parameter is filtered. Basically, change is triggered when the value of the widget is changed by the user. I think that the right event that you are looking for is close, so the request is called when the user is done with the selection of the parent parameter.

Please, test this approach and let me know if the outcome satisfies your needs.

 

Regards,
Neli
Progress Telerik

Naim
Posted on: 14 Jul 2020 15:39
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.
Attached Files:
ADMIN
Neli
Posted on: 19 Jun 2020 13:24

Hello Naim,

Thank you for the provided code.

I have tested it but I wasn't able to reproduce the described issue from your initial answer. Is it possible to give me more details about the scenario of the project and why do you need to override the editors? Note that one you do this, the logic behind is not controlled by us and only the custom code will be executed. If there is no special reason for using custom parameters, I would suggest keeping their default functionality.

I also need to know when do you expect to send the data from the multi select to the children.

In addition, it would help us if you can send us a sample project which is runnable and reproduces the problem. You can also test using combo box out-of-the-box:

.Parameters(new Parameters { Editors = new Editors { MultiSelect = EditorTypes.ComboBox} })
I will be looking forward to receiving an update from you.

Regards,
Neli
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Naim
Posted on: 12 Jun 2020 13:34

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.

ADMIN
Neli
Posted on: 12 Jun 2020 06:29

Hi Naim,

I have tested to reproduce the issue but I wasn't able to. Is it possible to send us a sample runnable project on which the problem is reproducible, so we can investigate it on our end?

Regards,
Neli
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.