Progress® Kendo UI Wrappers for Vue

Progress® Kendo UI Wrappers for Vue are wrappers for the Kendo UI widgets which enable you to use and configure the controls in your Vue application.

This means that although you might be using Vue directives or components to set up the user interface with Kendo UI, the underlying functionality of the UI controls comes from the Kendo UI for jQuery suite.

Before You Start

Before you start using the wrappers, make sure you get familiar with the documentation on:

Initializing the Grid

The following example demonstrates how to initialize the Kendo UI Grid by utilizing the Kendo UI wrappers for Vue.

Example
<div id="app">
    <kendo-datasource ref="datasource1"
                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Products'"
                      :transport-read-data-type="'jsonp'"
                      :transport-update-url="'https://demos.telerik.com/kendo-ui/service/Products/Update'"
                      :transport-update-data-type="'jsonp'"
                      :transport-destroy-url="'https://demos.telerik.com/kendo-ui/service/Products/Destroy'"
                      :transport-destroy-data-type="'jsonp'"
                      :transport-create-url="'https://demos.telerik.com/kendo-ui/service/Products/Create'"
                      :transport-create-data-type="'jsonp'"
                      :transport-parameter-map="parameterMap"
                      :schema-model-id="'ProductID'"
                      :schema-model-fields="schemaModelFields"
                      :batch='true'
                      :page-size='20'>
      </kendo-datasource>

      <kendo-grid :height="550"
                :data-source-ref="'datasource1'"
                :pageable='true'
                :editable="'inline'"
                :toolbar="['create']">
      <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" :editor="customBoolEditor"></kendo-grid-column>
      <kendo-grid-column :command="['edit', 'destroy']" title="&nbsp;" width="250px"></kendo-grid-column>
    </kendo-grid>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            schemaModelFields: {
                ProductID: { editable: false, nullable: true },
                ProductName: { validation: { required: true } },
                UnitPrice: { type: 'number', validation: { required: true, min: 1 } },
                Discontinued: { type: 'boolean' },
                UnitsInStock: { type: 'number', validation: { min: 0, required: true } }
            }
        },
        methods: {
            customBoolEditor: function(container, options) {
                kendo.jQuery
                    ('<input class="k-checkbox" type="checkbox" name="Discontinued"' +
                            'data-type="boolean" data-bind="checked:Discontinued">').appendTo(container)
                kendo.jQuery('<label class="k-checkbox-label">&#8203;</label>').appendTo(container)
            },
            parameterMap: function(options, operation) {
                if (operation !== 'read' && options.models) {
                    return { models: kendo.stringify(options.models) }
                }
            }
        }
    })
</script>

See Also