ListBox

[Hans]

Is there a way to change the icons of the buttons in ListBoxToolBarSettings?
or a way to link the MoveUpTool and MoveDownTool buttons to the other list.

[Hristian Stefanov]

Hi Hans,

The ListBox uses SVG icons. Therefore, to change the icons of the buttons in ListBoxToolBarSettings, you need to change the path of their "<svg>" elements. To get the path of the needed icon, you can use your browser dev tools to inspect the rendered icon and copy its path value. Here is a list of different icons you may find helpful.

I have prepared an example for you as well:

@using Telerik.SvgIcons

<style>
    /*CSS selector for the MoveUpTool*/
    .my-listbox .k-listbox-actions button[title="Move Up"] .k-svg-icon svg path {
        d: path('M32 384v96h448v-96H32zm192-64h64V192h96L256 32 128 192h96v128z');
    }
    
    /*CSS selector for the MoveDownTool*/
    .my-listbox .k-listbox-actions button[title="Move Down"] .k-svg-icon svg path {
        d: path('M32 384v96h448v-96H32zM288 32h-64v128h-96l128 160 128-160h-96V32z');
    }
</style>

<TelerikListBox @ref="@ListBoxRef"
                Class="my-listbox"
                Data="@ListBoxData"
                TextField="@nameof(ListBoxModel.Name)"
                SelectionMode="@ListBoxSelectionMode.Multiple"
                @bind-SelectedItems="@ListBoxSelectedItems"
                OnReorder="@( (ListBoxReorderEventArgs<ListBoxModel> args) => OnListBoxReorder(args) )"
                Width="180px"
                Height="auto">
    <ListBoxToolBarSettings>
        <ListBoxToolBar>
            <ListBoxToolBarMoveUpTool />
            <ListBoxToolBarMoveDownTool />
        </ListBoxToolBar>
    </ListBoxToolBarSettings>
</TelerikListBox>

@code {
    private TelerikListBox<ListBoxModel> ListBoxRef { get; set; } = null!;

    private List<ListBoxModel> ListBoxData { get; set; } = new List<ListBoxModel>();

    private IEnumerable<ListBoxModel> ListBoxSelectedItems { get; set; } = new List<ListBoxModel>();

    private void OnListBoxReorder(ListBoxReorderEventArgs<ListBoxModel> args)
    {
        ListBoxData.RemoveAll(x => args.Items.Contains(x));
        ListBoxData.InsertRange(args.ToIndex, args.Items);

        ListBoxRef.Rebind();
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 7; i++)
        {
            ListBoxData.Add(new ListBoxModel()
                {
                    Id = i,
                    Name = $"ListBox Item {i}",
                });
        }
    }

    public class ListBoxModel
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
    }
}

Please run and test it to see the result.

Regards,
Hristian Stefanov
Progress Telerik

[Hans]

Okay, so changing the icons and moving around the lists could be a way.

But is it also possible to make the "reorder" icons work on the other list? - looking at the demo https://demos.telerik.com/blazor-ui/listbox/overview

I find it very counter-intuitive that the list of available items (the left) is reordered using these buttons and not the selected items list(the right side).

I cannot imagine you'd want to reorder the list of available items, only reordering the list of selected items makes sense to me. Or am I missing something obvious?

[Hans]

That is, assuming the developers are a sub-set of the employees. It would be illogical otherwise, captain ;)

[Hristian Stefanov]

Hi Hans,

Thank you for getting back to me with feedback.

I confirm that our listbox demo is only for illustrative purposes. Feel free to customize it according to your preferences and specific requirements.

These are two standalone listbox components, and you have the option to disable the reordering ability on the left one and enable it on the right by moving the OnReorder.

Kind Regards,

Hristian