All Components

Configuration

To use and configure the Kendo UI widgets for jQuery in Vue, utilize their API configuration options as props for their Kendo UI counterparts for Vue.

The available types of settings that you can use as props are grouped into:

API-Based Options

Each configuration option that is available in the schema of the respective Kendo UI widget for jQuery—for example, in the API of the Calendar—can be used as a prop in the respective Kendo UI component for Vue.

<div id="vueapp" class="vue-app">
    <kendo-calendar :value="new Date()"></kendo-calendar>
</div>
Vue.use(DateinputsInstaller);

new Vue({
    el: '#vueapp'
})

The previous example configures the Calendar widget in the same way as the following jQuery example.

<div id="calendar"></div>
$("#calendar").kendoCalendar({
    value: new Date()
});

Camel-Case Options

The Camel-case options are the widget options which are named in Camel case. To use the Camel-case options as properties, translate them into Kebab case.

The following example demonstrates how to configure the disableDates option of the Calendar.

<div id="vueapp" class="vue-app">
    <kendo-calendar :value="new Date()"
                    :disable-dates="['we', 'th']">
    </kendo-calendar>
</div>
Vue.use(DateinputsInstaller);

new Vue({
    el: '#vueapp'
})

Composite Options

The composite options are the widget options which can accept an object notation to achieve a more complex configuration—for example, the month option of the Calendar.

{
    month: {
        content: "content: '#= data.value #'"
    }
}

To use the composite options as props, either:

  • Configure them by using the root option to pass an object for the setting, or
  • Translate them into Kebab case and append the inner option.
<div id="vueapp" class="vue-app">
    <kendo-calendar :value="new Date()" :month="{ content: '#= data.value #' }"></kendo-calendar>

    <!-- Is the same as -->

    <kendo-calendar :value="new Date()" :month-content="'#= data.value #'"></kendo-calendar>
</div>
Vue.use(DateinputsInstaller);

new Vue({
    el: '#vueapp'
})

Composite Array Options

The composite array options are options which can be assigned to a collection of objects with a certain schema—for example, the columns option of the Grid.

Just like the composite options, you can directly declare an array of the items to configure—either as a value to the prop inline or through the Vue data. However, some components work with inner child components that are dedicated to configure such type of options. For example, the Grid columns can also be configured through the KendoGridColumn (kendo-grid-column) component.

<div id="vueapp" class="vue-app">
    <h4>Columns configured as Array in Vue data</h4>
    <kendo-grid :data-source="localDataSource" :columns="columns">
    </kendo-grid>

    <h4>Columns configured via the <code>kendo-grid-column</code> component</h4>
    <kendo-grid :data-source="localDataSource">
        <kendo-grid-column field="ProductName"></kendo-grid-column>
        <kendo-grid-column field="UnitPrice" title="Unit Price" :width="120" :format="'{0:c}'"></kendo-grid-column>
        <kendo-grid-column field="UnitsInStock" title="Units In Stock" :width="120"></kendo-grid-column>
        <kendo-grid-column field="Discontinued" :width="120"></kendo-grid-column>
    </kendo-grid>
</div>
Vue.use(GridInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            columns: [
                "ProductName",
                { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
                { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
                { field: "Discontinued", width: "120px" },
            ],
            localDataSource: [{
                    'ProductID':1,
                    'ProductName':'Chai',
                    'UnitPrice':18,
                    'UnitsInStock':39,
                    'Discontinued':false
                },
                {
                    'ProductID':2,
                    'ProductName':'Chang',
                    'UnitPrice':19,
                    'UnitsInStock':17,
                    'Discontinued':false
                }
            ]
        }
    }
})

Events

You can use the events which are fired by the Kendo UI widgets and configure them for use in the wrapper suite by utilizing the native Vue v-on directive or its @ shorthand.

When you utilize widget events that are named in Camel case and translate them for configuring the wrapper components through the v-on or the @ directive, transition them into lowercase. For example, requestEnd has to become @requestend.

<div id="vueapp" class="vue-app">
    <kendo-calendar :value="new Date()" v-on:change="onChange"></kendo-calendar>
</div>
Vue.use(DateinputsInstaller);

new Vue({
    el: '#vueapp',
    methods: {
        onChange (ev) {
            console.log("date changed to: " + ev.sender.value());
        }
    }
})

Getting Widget References

You can get a reference to a widget through its ref attribute value.

<div id="vueapp" class="vue-app">
    <kendo-calendar ref="calendar1" :value="new Date()" v-on:change="onChange"></kendo-calendar>
</div>
Vue.use(DateinputsInstaller);

new Vue({
    el: '#vueapp',
    methods: {
        onChange (ev) {
            var calendar = this.$refs.calendar1.kendoWidget();
            console.log(calendar.value());
        }
    }
})
In this article