Customize displayed text on all items selected

[HappyCamper]

I'd like to customize the text that is displayed when all or a certain amount of items are selected.  for example:

If all items in the list is selected, it would show "All Items" instead of "Item 1, Item 2, Item 3 + x more"

Is this possible?

Thanks!

[Sureshkumar P]

Hi Rudi, 

 

Greetings from Syncfusion support. 

 

Based on your shared information, we cannot able to showcase the input value as all selected instead of selected items. Because this is intended behavior of our multiselect component by using value template. 

 

Regards, 

Sureshkumar P, 

[Sureshkumar P]

Hi Rudi, 

 

Kindly ignore the previous update.  

 

Currently in our Multiselect component, we do not have built-in support to achieve your requirement. so, we have considered this as a feature from our end. we will implement the feature based on the customer request count and priority in our upcoming releases. 

 

You can track the status of the requested requirement from the below feedback link.  

 

feedback: https://www.syncfusion.com/feedback/20049       

 

But we have achieved your requirement using JSIntrop to make changes in the DOM. We suggest you use the following customization to achieve your requirement. 

 

Please find the code example: 

[index.razor] 

<SfMultiSelect TValue="string[]" ID="multiselect" ModelType="typeof(Countries)" ChangeOnBlur="false" Placeholder="e.g. Australia" @bind-Value="@maskedTextBoxModel.multiVal" Mode="VisualMode.CheckBox" DataSource="@Country"> 

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

    <MultiSelectEvents TValue="string[]" ValueChange="Select" Opened="Open"></MultiSelectEvents> 

</SfMultiSelect> 

 

@code { 

    [Inject] 

    protected IJSRuntime JsRuntime { get; set; } 

    private WeatherForecast maskedTextBoxModel = new WeatherForecast(); 

 

    public class Countries 

    { 

        public string Name { get; set; } 

 

        public string Code { get; set; } 

    } 

 

    List<Countries> Country = new List<Countries> 

{ 

        new Countries() { Name = "Australia", Code = "AU" }, 

        new Countries() { Name = "Bermuda", Code = "BM" }, 

        new Countries() { Name = "Canada", Code = "CA" }, 

        new Countries() { Name = "Cameroon", Code = "CM" }, 

    }; 

    public void Select(Syncfusion.Blazor.DropDowns.MultiSelectChangeEventArgs<string[]> args) 

    { 

        if(maskedTextBoxModel.multiVal != null && maskedTextBoxModel.multiVal.Length == Country.Count) 

        { 

            JsRuntime.InvokeVoidAsync("OnOpen", "multiselect"); 

        } else 

        { 

            JsRuntime.InvokeVoidAsync("OnRemoveSpan", "multiselect"); 

        } 

    } 

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

    { 

        if (maskedTextBoxModel.multiVal != null && maskedTextBoxModel.multiVal.Length == Country.Count) 

        { 

            JsRuntime.InvokeVoidAsync("OnOpen", "multiselect"); 

        } 

    } 

} 

 

 

[daternage.js] 

window.OnOpen = (id) => { 

    var multiObject = document.getElementById(id).ej2_instances[0]; 

    if (document.getElementById("changeSpan") == null) { 

        multiObject.componentWrapper.getElementsByClassName("e-delim-view")[0].style.display = "none"; 

        var span = document.createElement("span"); 

        span.id = "changeSpan"; 

        span.className = "e-delim-view e-delim-values"; 

        span.innerText = "All Selected"; 

        multiObject.componentWrapper.append(span); 

    } else { 

        multiObject.componentWrapper.getElementsByClassName("e-delim-view")[0].style.display = "none"; 

    } 

}  

 

window.OnRemoveSpan = (id) => { 

    var multiObject = document.getElementById(id).ej2_instances[0]; 

    if (document.getElementById("changeSpan") != null && document.getElementById("changeSpan").style.display != "none") { 

        document.getElementById("changeSpan").remove(); 

        multiObject.componentWrapper.getElementsByClassName("e-delim-view")[0].style.display = ""; 

    } 

}  

 

 

We have created the sample based on your requirement. please find the sample here: https://www.syncfusion.com/downloads/support/forum/159989/ze/MultiSelectSelectAllCustomization1163363787  

 

Regards, 

Sureshkumar P