I want to change the default options for some components, e.g all the window component in my app should to 400px width and 400px max-height. The way I use now is to create a component wrapper the kendo-window, but I must repeatedly define lots of kendo props in my component.

I also try to use Vue mixin like this

Vue.use(WindowInstaller,{
    title:'untitled'
})

But failed.

Any methods to be simpler? 

Hi, 

We are currently in the process of redesigning our front-end and are currently learning towards using Vue. We use Kendo extensively throughout our application so integration between the two will heavily influence our final decision. With that said what are some of the current limitations with the Vue wrappers? I noticed on some component demo pages specific functionality is left out (like the Grid). Is it because this functionality isn’t available in the wrapper or just a demo hasn’t be made to showcase it yet? Also what are the performance implications of being a wrapper and not a native component? I am not expecting numbers but is the performance difference between say a React native component and a Vue/React wrapper that noticeable in a real world scenario?

Thanks

Hi There, I've been using kendo ui chart for Vue for about 4 months. My old app I did originally import jquery but removed it in the last few months as I was only using the chart component and it continued to work. Just today I've updated my packages to:

"@progress/kendo-base-components-vue-wrapper": "^2018.3.911",
"@progress/kendo-charts-vue-wrapper": "^2018.3.911",
"@progress/kendo-theme-default": "^2.56.0",
"@progress/kendo-ui": "^2018.3.911"

Since then I am receiving the following errors:

--------------------------------------

vue.runtime.esm.js?2b0e:587 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

found in

---> <KendoChart>
       <Chart> at src/components/CommodityChart/Chart.vue
         <VCard>
           <ChartPanel> at src/components/CommodityChart/ChartPanel.vue
             <Index> at src/components/Dashboard/Index.vue
               <VContent>
                 <MemberRoot> at src/components/MemberRoot.vue
                   <VApp>
                     <App> at src/components/AppRoot.vue
                       <Root>

--------------------------------------

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'length' of undefined"

found in

---> <KendoChart>
       <Chart> at src/components/CommodityChart/Chart.vue
         <VCard>
           <ChartPanel> at src/components/CommodityChart/ChartPanel.vue
             <Index> at src/components/Dashboard/Index.vue
               <VContent>
                 <MemberRoot> at src/components/MemberRoot.vue
                   <VApp>
                     <App> at src/components/AppRoot.vue
                       <Root>

-----------------------------------------

TypeError: Cannot read property 'length' of undefined
    at VueComponent.mounted (index.js?d548:39)
    at callHook (vue.runtime.esm.js?2b0e:2917)
    at Object.insert (vue.runtime.esm.js?2b0e:4154)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:5956)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:6175)
    at VueComponent.Vue._update (vue.runtime.esm.js?2b0e:2666)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:2784)
    at Watcher.get (vue.runtime.esm.js?2b0e:3138)
    at Watcher.run (vue.runtime.esm.js?2b0e:3215)
    at flushSchedulerQueue (vue.runtime.esm.js?2b0e:2977)

-------------------------------------------------------------

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'indexOf' of undefined"

found in

---> <KendoChart>
       <Chart> at src/components/CommodityChart/Chart.vue
         <VCard>
           <ChartPanel> at src/components/CommodityChart/ChartPanel.vue
             <Index> at src/components/Dashboard/Index.vue
               <VContent>
                 <MemberRoot> at src/components/MemberRoot.vue
                   <VApp>
                     <App> at src/components/AppRoot.vue
                       <Root>
warn @ vue.runtime.esm.js?2b0e:587
logError @ vue.runtime.esm.js?2b0e:1733
globalHandleError @ vue.runtime.esm.js?2b0e:1728
handleError @ vue.runtime.esm.js?2b0e:1717
callHook @ vue.runtime.esm.js?2b0e:2919
insert @ vue.runtime.esm.js?2b0e:4154
invokeInsertHook @ vue.runtime.esm.js?2b0e:5956
patch @ vue.runtime.esm.js?2b0e:6175
Vue._update @ vue.runtime.esm.js?2b0e:2666
updateComponent @ vue.runtime.esm.js?2b0e:2784
get @ vue.runtime.esm.js?2b0e:3138
run @ vue.runtime.esm.js?2b0e:3215
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:2977
(anonymous) @ vue.runtime.esm.js?2b0e:1833
flushCallbacks @ vue.runtime.esm.js?2b0e:1754
Promise.then (async)
microTimerFunc @ vue.runtime.esm.js?2b0e:1802
nextTick @ vue.runtime.esm.js?2b0e:1846
queueWatcher @ vue.runtime.esm.js?2b0e:3064
update @ vue.runtime.esm.js?2b0e:3205
notify @ vue.runtime.esm.js?2b0e:693
reactiveSetter @ vue.runtime.esm.js?2b0e:1010
IS_COOKIE_AUTHENTICATED @ auth.js?c7d4:135
wrappedMutationHandler @ vuex.esm.js?2f62:697
commitIterator @ vuex.esm.js?2f62:389
(anonymous) @ vuex.esm.js?2f62:388
_withCommit @ vuex.esm.js?2f62:495
commit @ vuex.esm.js?2f62:387
boundCommit @ vuex.esm.js?2f62:335
local.commit @ vuex.esm.js?2f62:651
(anonymous) @ auth.js?c7d4:25
Promise.then (async)
isCookieAuthenticated @ auth.js?c7d4:22
wrappedActionHandler @ vuex.esm.js?2f62:704
dispatch @ vuex.esm.js?2f62:426
boundDispatch @ vuex.esm.js?2f62:332
local.dispatch @ vuex.esm.js?2f62:634
mappedAction @ vuex.esm.js?2f62:880
created @ main.js?56d7:146
callHook @ vue.runtime.esm.js?2b0e:2917
Vue._init @ vue.runtime.esm.js?2b0e:4626
Vue @ vue.runtime.esm.js?2b0e:4725
(anonymous) @ main.js?56d7:126
./src/main.js @ app.js:10600
__webpack_require__ @ app.js:768
fn @ app.js:131
0 @ app.js:10745
__webpack_require__ @ app.js:768
(anonymous) @ app.js:904
(anonymous) @ app.js:907
vue.runtime.esm.js?2b0e:1737 TypeError: Cannot read property 'indexOf' of undefined
    at Object.addClass (kendo-core.js?8a22:193)
    at init._setElementClass (kendo-chart.js?9bc2:12567)
    at init._initElement (kendo-chart.js?9bc2:12558)
    at new init (kendo-chart.js?9bc2:12537)
    at init._createChart (chart.js?4118:468)
    at init._initChart (chart.js?4118:462)
    at init._initDataSource (chart.js?4118:495)
    at new init (chart.js?4118:188)
    at Comment.eval (kendo.core.js?38f6:3249)
    at Function.each (jquery.js?1157:354)

----------------------------------------------

I tried replacing my chart with code taken from: 

https://www.telerik.com/kendo-vue-ui/components/charts/chart/data-binding/

And I am receiving the exact same errors. Vue version: "vue": "^2.5.17",

We currenly have an MVC application using Kendo UI and we recently started using Vue.

There is no clear documentation how to add and use the Kendo UI for Vue within Visual Studio and an MVC application.

All official documentation on the Telerik web site, related to the Kendo UI for Vue is using NPM to install Kendo UI for Vue components in a specified folder, or CDNs.

Unfortunately, there are no clear examples how to use those components within the structure of an MVC application.

To make matter worse, Telerik did not provide a way to create a Kendo UI for Vue application from within the Telerik menu in Visual Studio.

The questions are:

1. What JS/CSS files are needed to show and use these components?

2. Where can I find/download all these files?

3. What is the recommended structure to keep these files in?

4. What needs to be "imported" using <Style> and <link> tags, NOT the "import" and "required" and "export", because these are using webpack, which will add a sh...load of other files with it that are not required by the app to actually run.

If anybody managed to make it work, please specify step by step what to do to use any of the Kendo UI for Vue components in an MVC app.

Is there a smart way of implementing the context menu on the Grid, so I can right click on a single row for more actions, like:
right click on a grid row and chose to go to the product page, or user page, or anything else related to the grid row data

How does Kendo for Vue clean up any objects or events when you use them in a scenario where the controls are dynamically added and removed with Vue's "v-if" (where they get fully removed from the DOM)?  I would be interested in a general explanation, as well as specifically where in the Kendo code that this happens.  In the mixins, I can see them hooking up "mounted", but had expected to maybe see something for "beforeDestroy".  I'm not saying there is anything wrong with them, but just curious if I could encounter memory leaks, or if there is anything specific that I need to be doing with Kendo for Vue, to help prevent memory leaks.  Thanks!

Hi all,

using the kendo-datetimepicker, you can force the masked date input with the prop: dateInput=true.

https://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker/configuration/dateinput

Is this functionality also available for table cells, or how can this be achieved?

Regards

ulf

I'm really struggling here. I need to add a custom button which takes the ID of the current row. I've tried added a columns array and adding a "template" entry, to no luck and now trying to do this inline. Any help?

{field: 'name', title: 'District Name', width: '250px'},
{
width: '70px',
template: '<button class="btn btn-sm btn-info" v-on:click="alert(# _id #)">Edit</button>'
},

<kendo-grid id="grid"
:data-source-ref="'dataSource'"
class="table table-sm">
<kendo-grid-column :field="'name'" :title="'District Name'"></kendo-grid-column>
<kendo-grid-column :field="_id">
<button class="btn btn-sm btn-info" v-on:click="openManager(_id)">Manager</button>
</kendo-grid-column>
</kendo-grid>