Is it possible to show 'chips' when using VisualMode.CheckBox?

[Simon]

Hi all,

As per the subject line, is it possible to show 'chips' (as per VisualMode.Box) when using VisualMode.CheckBox?

Thanks in advance

Simon

[Vignesh Srinivasan]

Hi Simon, 

 

 

We have prepared the custom sample based on the requested requirement by using JS interop and customized the multiselect using CSS styles and multiselect templates since we could not access the DOM elements in the Blazor platform. please find the code sample below. 

 

code  snippet:  

 

 

<SfMultiSelect TValue="string[]" ID="multiSelct-checkbox" ModelType="@models" Mode="VisualMode.Box" Placeholder="Select a customer" DataSource="@Data" HideSelectedItem="false" CssClass="custom"> 

                <MultiSelectTemplates> 

                    <ItemTemplate> 

                        <div class="multiselect-template"> 

                            <span class="checkbox-span"><input class="custom-checkbox" type="checkbox" /></span> 

                            <div> 

                                <div class="ename"> @((context as EmployeeData).FirstName) </div> 

                            </div> 

                        </div> 

                    </ItemTemplate> 

                </MultiSelectTemplates> 

                <MultiSelectEvents TValue="string[]" OnOpen="onSelect" OnClose="OnClose"></MultiSelectEvents> 

                <MultiSelectFieldSettings Value="FirstName"></MultiSelectFieldSettings> 

            </SfMultiSelect> 

 

public void onSelect(BeforeOpenEventArgs args) 

    { 

        JsRuntime.InvokeVoidAsync("onSelected"); 

    } 

    public void OnClose(Syncfusion.Blazor.DropDowns.PopupEventArgs args) 

    { 

        JsRuntime.InvokeVoidAsync("onClosed"); 

    } 

 

 

 

window.onSelected = () => { 

    setTimeout(function () { 

        var AutocompleteObj = document.getElementById("multiSelct-checkbox").ej2_instances[0]; 

        var popup = document.getElementsByClassName("custom")[1]; 

        var popupLI = popup.querySelectorAll("li"); 

        console.log(popupLI); 

        if (popupLI != null) { 

            for (var i = 0; i < popupLI.length; i++) { 

                if (AutocompleteObj.value != null) { 

                    for (j = 0; j < AutocompleteObj.value.length; j++) { 

                        if (popupLI[i].innerText == AutocompleteObj.value[j]) { 

                            popupLI[i].querySelector(".custom-checkbox").checked = true; 

                        } 

                    } 

                } 

            } 

        } 

    }, 100) 

} 

window.onClosed = () => { 

        var AutocompleteObj = document.getElementById("multiSelct-checkbox").ej2_instances[0]; 

        var popup = document.getElementsByClassName("custom")[1]; 

        var popupLI = popup.querySelectorAll("li"); 

        console.log(popupLI); 

        if (popupLI != null) { 

            for (var i = 0; i < popupLI.length; i++) { 

                      popupLI[i].querySelector(".custom-checkbox").checked = false; 

            } 

        } 

} 

 

Screenshot: 

 

 

 

Please find the sample here: 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Multiselect-34639555 

 

Kindly check with the above sample. Please get back us if you need further assistance. 

  

Regards, 

  

Vignesh Srinivasan. 

 

[igor]

Is there a way to keep the search /filter box in that scenario?

[Yohapuja Selvakumaran]

Hi Simon

We have already logged this request "Selected items as chips when mode as checkbox in multiselect component" as uncertain feature. We will implement this feature in any of our upcoming releases. We will prioritize the features every release based on the demands.

You can track the status of this report through the following feedback link,

Feedback link: https://www.syncfusion.com/feedback/42082/selected-items-as-chips-when-mode-as-checkbox-in-multiselect-component

  

If you have any more specification/suggestions for the feature request, you can add it as a comment in the portal and cast your vote to make it count.

Regards,

Yohapuja S