Select multiple

[angelru]

I'm trying to get the layout from https://developer.snapappointments.com/bootstrap-select/examples/

for the multiple select, is there any possibility to add it for the future?

I am loading the js and css of this bootstrap-select, I am calling IJSRuntime to start the js but I think blazor has a bug because the select is loaded many times on the same page even doing:

    protected override async Task OnAfterRenderAsync (bool firstRender)
     {
         if (firstRender)
         {

         }
     }

[stsrki]

Seems to me it is a custom component that uses a dropdown menu as a workaround.

I think your best option is to build it yourself with a combination of our Dropdown and TextEdit/Select components.

[angelru]

I'll see what I can do

[angelru]

@stsrki
I am thinking of using DropdownList, with checkbox inside, but when I click it closes, how can I make it only close if it is pressed outside the DropdownList?

[stsrki]

I don't think there is a way to prevent it with the current implementation.

[angelru]

This is what I did according to my needs, it seems to work well although surely it can be improved. In case it serves to someone

@typeparam TItem

@if (Data != null)
{
    <Button Color="Color.Primary" Class="dropdown-toggle" data-toggle="dropdown">
        @if (string.IsNullOrEmpty(allSelected))
        {
            @DefaultText;
        }
        else
        {
            @allSelected;
        }
    </Button>
    <div class="dropdown-menu" style="padding:6px;">
        @foreach (var item in Data)
        {
            var text = TextField?.Invoke(item);
            var value = ValueField?.Invoke(item).ToString();

            bool exists = false;

            if (SelectedValues.Contains(value))
            {
                exists = true;
            }

            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       checked="@exists" value="@value"
                       @onchange="eventArgs => { CheckboxClicked(value, eventArgs.Value); }">
                <label class="form-check-label">
                    @text
                </label>
            </div>
        }
    </div>
}

@code {

    private string allSelected;

    [Parameter] public string DefaultText { get; set; }
    [Parameter] public IEnumerable<TItem> Data { get; set; }
    [Parameter] public Func<TItem, string> TextField { get; set; }
    [Parameter] public Func<TItem, object> ValueField { get; set; }
    [Parameter] public List<string> SelectedValues { get; set; } = new List<string>();


    public void CheckboxClicked(string aSelectedId, object aChecked)
    {
        if ((bool)aChecked)
        {
            if (!SelectedValues.Contains(aSelectedId))
            {
                SelectedValues.Add(aSelectedId);
            }
        }
        else
        {
            if (SelectedValues.Contains(aSelectedId))
            {
                SelectedValues.Remove(aSelectedId);
            }
        }

        if (SelectedValues.Count >= 3)
        {
            allSelected = "Más de 3 elementos seleccionados";
        }
        else
        {
            allSelected = SelectedValues.Any(x => !string.IsNullOrEmpty(x)) ? string.Join(" , ", SelectedValues.Where(x => !string.IsNullOrEmpty(x))
             .Select(n => n)) : DefaultText;
        }

        StateHasChanged();
    }
}