Как изменить кнопки на панели инструментов Kendo ListBox

Question

Я создал списки двойного кендо для перемещения предметов между собой.В горизонтальном расположении кнопки выглядят хорошо и правильно.Но у меня в моем вертикальном сопряжении кнопки, которые указывают влево и вправо, не работают.

То, что я хотел бы сделать или получить информацию о том, как изменить каждую кнопку в отдельности, но при этом не нужно изменять основные функции кнопки.Я все еще хочу, чтобы TransferTo и TransferFrom работали как обычно, но мне бы хотелось, чтобы кнопка выглядела по-другому (или, может быть, имели бы слова).

            var availableUsers = $("#usersavailable").kendoListBox({
            connectWith: "selectedusers",
            draggable: true,
            dataTextField: "UserName",
            dataValueField: "UserId",
            selectable: "multiple",
            dataSource: [],
            toolbar: {
                position: "bottom",
                tools: [
                    {
                        type: "splitButton", text: 'Insert Down', icon: 'insert-down'}
                    },
                    //"transferTo",
                    "transferFrom",
                    "transferAllTo",
                    "transferAllFrom"],


            },
        }).data("kendoListBox");
        var selectedUsers = $("#selectedusers").kendoListBox({
            dataTextField: "UserName",
            dataValueField: "UserId",
            draggable: true,
            selectable: "multiple",
            dataSource: [],
            remove: function (e) {
                setSelected(e, false);
            },
            add: function (e) {
                setSelected(e, true);
            }
        }).data("kendoListBox");

В идеале страница в документации, которая прямо говорит о том, как это использоватьбыло бы замечательно.Попытка найти что-то конкретное в отношении того, что и куда ставить, и что это значит, была непростой задачей.

Answer 1

Свойство конфигурации messages позволяет установить текст для кнопки команды, который отображается как title элемента команды.В браузере появляется всплывающая подсказка с заголовком по умолчанию при наведении на кнопку.

Я не уверен, что вы можете указать панель инструментов splitButton в конфигурации Listbox.

Выберите кнопки для использования с toolbar.toolsи текст сообщения для каждого из них: messages.tools

Из Список сообщений Конфигурация сообщений документы

$("#listBoxA").kendoListBox({
    connectWith: "listBoxB",
    dataSource: [ "ItemA1", "ItemA2" ],
    toolbar: {
        tools: [ "moveUp", "moveDown", "remove",
                 "transferTo", "transferFrom", "transferAllTo", "transferAllFrom" ]
    },
    messages: {
        tools: {
            moveUp: "my MoveUp message",
            moveDown: "my MoveDown message",
            remove: "Remove",
            transferTo: "my TransferTo message",
            transferFrom: "my TransferFrom message",
            transferAllTo: "my TransferAllTo message",
            transferAllFrom: "my TransferAllFrom message"
        }
    }

Вы можете изменить значки ListBox с некоторымиjQuery, который изменяет элемент, соответствующий значку команды:

$(".k-listbox-toolbar [data-command='transferAllTo'] span").attr("class", "k-icon k-i-warning");

Если вам также нужен фактический текст после значка на панели инструментов, переопределите ширину значка и after() текст:

-- css --
.k-listbox-toolbar [data-command="transferAllTo"] { width: auto; }

-- js --
$(".k-listbox-toolbar [data-command='transferAllTo'] span")
.attr("class", "k-icon k-i-warning")
.after("Hi")
;

См. Додзё Настроенная панель инструментов ListBox