All Components

Localization

You can configure the ListBox messages for each command button of the toolbar.

The messages serve as tooltip text for the users when they hover over the buttons.

<div id="vueapp" class="vue-app" style="height: 300px;">
    <kendo-listbox :data-source=dataSourceArray
                   :data-text-field="'name'"
                   :data-value-field="'id'"   
                   :toolbar-tools="['moveUp', 'moveDown', 'remove', 'transferAllFrom', 'transferAllTo', 'transferFrom', 'transferTo']">
    </kendo-listbox>    
</div>
Vue.use(ListBoxInstaller);

new Vue({
    el: "#vueapp",    
    methods: {       
        messages: {
            tools: {
                moveUp: "Promote",
                moveDown: "Demote",
                remove: "Remove Employee",
                transferTo: "Transfer To",
                transferFrom: "Transfer From",
                transferAllTo: "Transfer All To",
                transferAllFrom: "Transfer All From"
            }
        }
    },
    data: function() {
        return {
            dataSourceArray: [
                { name: "John", id: 1 },
                { name: "Jane", id: 2 },
                { name: "Jim", id: 3 },
                { name: "Tim", id: 4 },
                { name: "Mary", id: 5 },
                { name: "Brian", id: 6 },
                { name: "Nicholas", id: 7 },
                { name: "Kevin", id: 8 }
            ],

        }
    }
})
In this article