Data Binding

The ContextMenu provides support for binding it to local data arrays and to remote data services.

Binding to Local Data Arrays

To populate the ContextMenu with local data, bind it to a local data array by using the Kendo UI Data Source component.

<div id="vueapp" class="vue-app">
    <div id="target">Target</div>
    <kendo-contextmenu :data-source="localDataSource" :target="'#target'">
    </kendo-contextmenu>
</div>
Vue.use(LayoutInstaller);

new Vue({
    el: '#vueapp',
    data: function() {
        return {
            localDataSource: new kendo.data.HierarchicalDataSource({
                data: [
                    {
                        text: 'Countries',
                        items: [
                            { text: 'China' },
                            { text: 'Japan' },
                            { text: 'Russia' }
                        ]
                    },
                    {
                        text: 'Sports',
                        items: [
                            { text: 'Swimming' },
                            { text: 'Golf' }
                        ]
                    }
                ]
            })
        }
    }
})

Binding to Remote Data Services

To initialize the ContextMenu by binding it to a remote data service, use the Kendo UI Data Source component. Remote data binding is appropriate for larger datasets, so that items are loaded on demand when displayed. You can use the DataSource for serving data from a variety of data services such as XML, JSON, and JSONP.

<div id="vueapp" class="vue-app">
    <div id="target">Target</div>
    <kendo-contextmenu :data-source="dataSource"
                    :data-text-field="'FullName'"
                    :target="'#target'">
    </kendo-contextmenu>
</div>
Vue.use(LayoutInstaller);

new Vue({
    el: '#vueapp',
    data: function() {
        return {
            dataSource: new kendo.data.HierarchicalDataSource({
                transport: {
                    read: {
                        url: 'https://demos.telerik.com/kendo-ui/service/Employees',
                        dataType: 'jsonp'
                    }
                },
                schema: {
                    model: {
                        id: 'EmployeeId',
                        hasChildren: 'HasEmployees'
                    }
                }
            })
        }
    }
})

In this article