Multiselect width when many items selected

[John]

Hi,

We are using the MultiSelect component (in CheckBox mode) inside an SfDialog.

The initial width is fine and the width changes correctly if the dialog is resized.

However, when lots of items are selected the width overflows the Sf Dialog.  Please see image below.

Please advise, with high priority.  Many thanks

[UdhayaKumar Duraisamy]

Hi John,

We were able to reproduce the reported issue as per your scenario. We will update the further details in two business days(12^th July 2022).

Regards,

Udhaya Kumar D

[UdhayaKumar Duraisamy]

Hi John,

We have validated the reported issue on our end and we suggest you either set the static width property to the multiselect component or to the parent component. For more details please refer to the below code snippet and sample.

<SfDialog @bind-Visible="isVisible" Width="500px" EnableResize="true" IsModal="true" ShowCloseIcon="true">

            <DialogTemplates>

                <Content>

                    <div id="MultiSelectDiv">

                        <SfMultiSelect TValue="string[]" TItem="Games" Width="350px" Placeholder="Favorite Sports"DataSource="@LocalData">

<MultiSelectFieldSettingsText="Text" Value="ID"></MultiSelectFieldSettings>

                        </SfMultiSelect>

                    </div>

                </Content>

            </DialogTemplates>

        </SfDialog>

Kindly try the above sample and let us know if this meets your requirement.

Regards,

Udhaya Kumar D

Attachment: MultiSelectDialog_3c31c714.zip

[John]

Thank you for the reply, but the workaround does not help, as we need the multiselect width to be 100% and resize as the modal resizes.  This works fine until it  has lots of entries.  Please also note that we are using Mode="VisualMode.CheckBox".

Regards,

[UdhayaKumar Duraisamy]

Hi John,

We are validating the requirement. We will update the further details in two business days(13^th July 2022).

Regards,

Udhaya Kumar D

[UdhayaKumar Duraisamy]

Hi John,

We can achieve the requested requirement by conditionally rendering the multiselect component based on the dialog resizing. Please refer to the code snippet and documentation for further reference.

<SfDialog @bind-Visible="isVisible" Width="500px" Height="400px" EnableResize="true" IsModal="true" ShowCloseIcon="true">

            <DialogTemplates>

                <Content>

                    <div id="MultiSelectDiv">

                        @if (isResize) {

                            <SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" @bind-Value="@MultiVal" Mode="VisualMode.CheckBox" DataSource="@LocalData">

                                <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>

                            </SfMultiSelect>

                        }

                    </div>

                </Content>

            </DialogTemplates>

            <DialogEvents OnOpen="@OnOpenHandler" OnResizeStart="@OnResizeStartHandler" OnResizeStop="@OnResizeStopHandler"></DialogEvents>

        </SfDialog>

@code {

    private bool isResize { get; set; } = true;

    public string[] MultiVal { get; set; } = new string[] { };

    public void OnResizeStartHandler(MouseEventArgs args)

    {

        isResize = false;

    }

   public void OnResizeStopHandler(MouseEventArgs args)

    {

        isResize = true;

    }

   }

In the above code snippet, we have used the @bind-Value property for data binding. In the Dialog component, we have used the OnResizeStart event (triggers when the user begins to resize a dialog) and the OnResizeStop event (triggers when the user stops to resize a dialog) for conditionally render the Multiselect component.

Kindly try the above suggestion and let us know if this meets your requirement.

Regards,

Udhaya Kumar D

Attachment: BLAZMultiDialog_fb10409d.zip

[John]

Hi, thank you for the response, but unfortunately this means that the control disappears when resizing.  So, for example, if you have multiple controls some of which are not multi-select controls, some of the controls disappear during the resize and some don't which leads to a poor user experience.

Please advise further.  Many thanks

[UdhayaKumar Duraisamy]

Hi John,

We suggest you add minimal delay in the OnResizeStop event for the re-rendering multi-select component to resolve the reported issue. Please refer to the below code snippet and sample for reference.

    public async Task OnResizeStopHandler(MouseEventArgs args)

    {

        isResize = false;

        await Task.Delay(10);

        isResize = true;

    }

Kindly try the above suggestion and let us know if this meets your requirement.

Regards,

Udhaya Kumar D

Attachment: BLAZMultiDialog_ad9afdc.zip