Telerik Forums
Kendo UI for Vue Forum
16 questions
Sort by
5 answers
136 views

I need a simple sample for doing a custom treeview template (not the checkbox template), where the template gets an instance of the node or node's data, so I can change the output based on the data.  I have tried doing it like the grid ones shown in this forum, but if I set a breakpoint in devtools, I can see that my function doesn't seem to be getting anything on the argument.  It does render the template though.  I had it working as a string using a kendo template, but then couldn't call something back on my component, so figured I need a "proper" Vue template for it.  Maybe I'm missing something simple here.

My method that is returning the template:

    public itemTemplate(e: any): any {

        return {
            template: FieldGroupTemplate,
            templateArgs: e
        }
    }

 

My template component (we use Typescript):

import Vue from "Vue";
import Component from "vue-class-component";
import { Prop } from "vue-property-decorator";
import { lazyInject } from "Areas/Ordering/OrderingIocContainer";

@Component({

    template: "<div>{{ templateArgs.name }}</div>",     
    components: {
    }
})
export default class FieldGroupTemplate extends Vue {
    public templateArgs!: any;

    constructor() {
        super();
    }
}

Some markup, from where a template has the treeview:

<kendo-tree-view id="fieldSelectorTreeView" :data-source="items"

                                 @@select="select"
                                 :data-text-field="'name'"
                                 :checkboxes="checkboxes"
                                 :template="itemTemplate"
                                 @@check="check" style="height:615px">
                </kendo-tree-view>

Ianko
Telerik team
 answered on 20 Jul 2018
6 answers
372 views

I am facing issue with to bind the routing link directly in Kendo UI Treeview and for more details, I have put a router-link property in not working and you can view my code below.

 

01.<div id="vueapp" class="vue-app">
02.<kendo-treeview>
03. <kendo-treeview-item text="User Setting" >

 

04.
05.     <kendo-treeview-item text="User" router-link ="/setting/user" >User</kendo-treeview-item>
06.     <kendo-treeview-item text="Role" router-link ="/setting/role">  </kendo-treeview-item>
07.     <kendo-treeview-item text="Password Setting" router-link ="/setting/password"></kendo-treeview-item>
08.              
09. </kendo-treeview-item>
10.
11. <kendo-treeview-item text="Group Setting" >
12.
13.           <kendo-treeview-item text="Group"></kendo-treeview-item>
14.           <kendo-treeview-item text="Group setting"></kendo-treeview-item>
15.         
16.  </kendo-treeview-item>
17.           
18.
19.</kendo-treeview>
20.
21.   </div>
Rahul
Top achievements
Rank 1
 answered on 05 Aug 2019
1 answer
84 views

Hello,

I am trying to follow along the  examples in the docs, and I have tried to create a TreeView that has collapsible nodes, and checkboxes.

I am encountering some strange issues, such as:

  • When the tree is first loaded, with all nodes expanded, only the first child node of each parent is shown. If I click anywhere inside the TreeView, then the hidden nodes appear.
  • When a parent node is selected (and all children are selected as well), then I cannot expand the parent node. If I click to expand the node nothing happens, but then if I click another node then both parent nodes expand.

 

Since this is pretty basic behavior, I am sure I have misconfigured something or I am entirely missing something.

 

Can you provide some help ?

 

You can find a sample here: https://stackblitz.com/edit/vue-qzba9x?file=src/App.vue

Petar
Telerik team
 answered on 12 Sep 2022
1 answer
89 views

Hi Everyone,

I had implemented tree view wrapper for vue and I need to make a functionality that select or unselect all checkboxes in the tree view.

I'm using the latests versions of treeview-vue-wrapper and vue js.

Hope you could help me.

Thanks



Plamen
Telerik team
 answered on 04 Apr 2023
1 answer
44 views

I'm looking at the official documentation for dragging and dropping TreeView elements here: https://www.telerik.com/kendo-vue-ui/components/treeview/api/TreeViewDragAnalyzer/

The drag hint icons in the example always show the cancel icon even when the drag and drop is valid and works.

The Angular example works as expected. It's only the Vue example that seems broken.

Konstantin Dikov
Telerik team
 answered on 08 Jan 2024
7 answers
327 views

I see this error when I'm going to convert data of treeview's datasource to stringify.

I use kendo vue js like :

JSON.stringify( ....data("kendoTreeview").dataSource.data() )
Petar
Telerik team
 answered on 02 Dec 2020
4 answers
117 views

Hello! I want to bind image to tree view item like this

 

<kendo-hierarchicaldatasource ref="remoteDataSourceComponent"

:transport-read-url="'api/gettreenodes'"
:transport-read-data-type="'json'"
:schema-model-id="'id'"
:schema-model-has-children="'hasChildren'">
</kendo-hierarchicaldatasource>
<kendo-treeview data-source-ref="remoteDataSourceComponent"
:data-text-field="'name'"
:checkboxes="false"
:data-image-url-field="getIcoPath('type')"
:drag-and-drop="false">
</kendo-treeview>

 

methods: {

getIcoPath: function(typeId) {
return  require('./resources/'+typeId+'.png');
}

I want to set treeItem image according to treeItem type in function getIcoPath.

Is it possible?

 

Ilya
Top achievements
Rank 1
 answered on 27 Jul 2018
1 answer
239 views

Is it possible to prevent the user from clicking (selecting) a parent node, but still allow selection of any children. Or ideally change the behaviour of the parent node to expand / collapse the node. The current behaviour of the DropDownTree is that all children are selected, and I don't want this, only a single (child)node  should be selectable

So in the example below, the user can select on Apple, Orange etc, but not Fruit / Vegetable 

- Fruit
- Apple
- Orange
- Peach
- Vegetable
- Spinach
- Beans
etc

 

Konstantin Dikov
Telerik team
 answered on 24 Jan 2024
1 answer
5.8K+ views

Hi,

I am using Kendo UI Material theme. I would like to switch between light and dark themes without reloading the whole site. May I know what are variables available that I can set in the code?

garri
Top achievements
Rank 2
Iron
Iron
Iron
 updated answer on 10 Aug 2021
0 answers
67 views

Hello,

 

please can somebody tell me what can i do with this style issue ? this issue display also with ComboBox and all of this stuff
I use vuejs version

"@progress/kendo-vue-dropdowns": "^3.5.0",

 

 

many thanks

Matus
Top achievements
Rank 1
 asked on 25 May 2023
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Editor
DatePicker
Grid wrapper
Scheduler
DropDownTree wrapper
Spreadsheet wrapper
Input
MultiSelect
Editor wrapper
Calendar
DateInput
NumericTextBox
Scheduler wrapper
Styling / Themes
DataSource wrappers (package)
DateTimePicker
Gantt wrapper
Chart
Chart wrappers (package)
ComboBox
Localization
Pager
Checkbox
Upload
DropDownList wrapper
Popup
Window
Error
Form
Tooltip
TreeView
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Slider
Toolbar wrapper
Upload wrapper
Validator wrapper
ColorPicker
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
FloatingLabel
TextArea
Drawer
Stepper
Gauge
Splitter
PanelBar
Notification
RangeSlider
Menu
TreeList
Toolbar
Button
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
RadioButton
RadioGroup
Hint
Loader
ProgressBar
DateRangePicker
Switch
Wizard
Skeleton
ScrollView
ColorGradient
ColorPalette
FlatColorPicker
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
pleaseDeleteMyAccount
Top achievements
Rank 2
Herman Muliady
Top achievements
Rank 1
Kevin
Top achievements
Rank 2
Iron
Iron
Andres
Top achievements
Rank 1
Iron
Bradley
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
pleaseDeleteMyAccount
Top achievements
Rank 2
Herman Muliady
Top achievements
Rank 1
Kevin
Top achievements
Rank 2
Iron
Iron
Andres
Top achievements
Rank 1
Iron
Bradley
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?