Hi. I am looking at Kendo UI to fast track some dev , quite new to nodejs but I got it up and running with Vuetify.

https://nuxtjs.org/guide/installation/

Your instructions for installing are ok for a regular vue app , but I can't seem to integrate it into a Nuxt App.

I get "window is not defined" . Ideas?

Everything seems to work until I try to import the all.css file into my main.js file. Do I need to install any additional plugins? I have vue-loader but it is currently set to version 13.7.3...could this be the issue?

Thanks, in advance, for your assistance.

Kevin Fricke

Hi There, I have a kendo UI chart who's datasource is bound to a computed property. I can see the datasource computed property is being updated but the chart is not rebinding/redrawing. Do I need to manually redraw the chart?

If we don't need to manually refresh/redraw then do you have any ideas as to why the chart wouldn't redraw when I update the datasource prop? Thanks!

Hello

I have a data source that has names that are not that readable to the end user, but in the pivot grid data source, I am having issues setting the display name different than the data source name. 

In this example, I have changed the name of the "ProductName" to something that resembles our data source :

https://stackblitz.com/edit/kwmg6k 

And now the data is not shown, how can I specify a field to get the data, and a name for the draggable column or row title?

//Marius

Hello

In the demo when I click the "mpg" category, the line is hidden ( as expected ), but the valueAxis is still visible. I also want this hidden, no point in showing the "miles per gallon" if there is no data on it.

Is there a way to hide this as well?

https://stackblitz.com/edit/multiaxis

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.