Telerik Forums
Kendo UI for Vue Forum
8 answers
154 views

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!

Ianko
Telerik team
 answered on 03 Oct 2018
1 answer
421 views

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

Dimitar
Telerik team
 answered on 28 Sep 2018
3 answers
132 views

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

 

Dimitar
Telerik team
 answered on 25 Sep 2018
5 answers
411 views

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? 

Joana
Telerik team
 answered on 24 Sep 2018
8 answers
385 views

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

Michelle
Top achievements
Rank 1
 answered on 23 Sep 2018
4 answers
176 views

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",

 

 

 

 

 

 

 

 

 

Dimitar
Telerik team
 answered on 21 Sep 2018
9 answers
392 views

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.

Rich
Top achievements
Rank 1
 answered on 19 Sep 2018
3 answers
87 views
Does the trial version of Vue have local demo?
Dimitar
Telerik team
 answered on 18 Sep 2018
3 answers
121 views
公司新项目打算使用vue+kendo,想问一下是否可以使用npm包管理的方式引入使用,后期购买之后是否只需要修改package.json的包版本???
Dimitar
Telerik team
 answered on 18 Sep 2018
1 answer
472 views

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

 

Ivan Danchev
Telerik team
 answered on 17 Sep 2018
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
DatePicker
Editor
Grid wrapper
Scheduler
DropDownTree wrapper
Spreadsheet wrapper
Calendar
Input
MultiSelect
NumericTextBox
DateInput
DateTimePicker
Editor wrapper
Styling / Themes
DataSource wrappers (package)
Scheduler wrapper
Chart wrappers (package)
Gantt wrapper
Localization
Chart
Checkbox
ComboBox
Window
Pager
Error
Upload
DropDownList wrapper
Popup
Form
Tooltip
TreeView
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Slider
Toolbar wrapper
Upload wrapper
Validator wrapper
ColorPicker
Button
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox wrapper
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Splitter wrapper
TabStrip wrapper
TimePicker
TreeView wrapper
TabStrip
Card
RadioButton
FloatingLabel
TextArea
Drawer
Stepper
DateRangePicker
Gauge
Splitter
PanelBar
Notification
RangeSlider
Menu
TreeList
Toolbar
ListView
FontIcon
SVGIcon
Animation
Barcode wrapper
ButtonGroup wrapper
Chat wrapper
ColorPicker wrapper
DateInput wrappers (package)
Diagram wrapper
Dialog wrapper
Gauges wrappers (package)
MaskedTextBox wrapper
MediaPlayer wrapper
Notification wrapper
Pager wrapper
PanelBar wrapper
PivotGrid wrapper
QRCode wrapper
RangeSlider wrapper
ScrollView wrapper
Security
Slider wrapper
Switch wrapper
Tooltip wrapper
TreeList wrapper
TreeMap wrapper
Window wrapper
Avatar
StockChart
Sparkline
RadioGroup
Hint
Loader
ProgressBar
Switch
Wizard
Skeleton
ScrollView
ColorGradient
ColorPalette
FlatColorPicker
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
SpeechToTextButton
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?