Telerik Forums
Kendo UI for Vue Forum
14 questions
Sort by
6 answers
308 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
45 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
25 views

I have the native TreeView component and I am wanting to scroll a pre-defined node into view. I do not see any methods available on the component that allows me to do so, and I do not see any documentation around this particular issue.

Outside of me using DOM selectors to find the node and force the container of the tree to scroll to it, does Kendo provide a method or guide for how to achieve this?

Konstantin Dikov
Telerik team
 answered on 22 Jan 2024
5 answers
100 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
1 answer
41 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
18 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
4 answers
99 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
7 answers
269 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
0 answers
39 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
1 answer
123 views

We have a Vuejs app that is using the Kendo DropDownTree control, with checkboxes, to display a hierarchy of data.

The problem is, there is a difference with how the control returns the checked IDs when the parent node is expanded VS collapsed.

To illustrate the problem:

Both parents nodes below have 2 child nodes.

Parent1 happens to be expanded. If I check parent1, the control then checks child1+child2 automatically. And the "@change" function sends all three IDs. This is the desired affect.

Parent2 has 2 child nodes. But the child nodes can't be seen because parent2 is collapsed. When Parent2 is checked, the "@change" only sends parent2 ID. The child Ids are NOT sent. Why is this? Why the difference vs parent1 example?

Also, the child nodes for parent2 do get checked properly by the control. I can see this if I expand parent2. The child nodes IDs just never got sent to the "@change" when it's parent2 was clicked and collapsed.

 

 _parent1
    -child1
    -child2
 _parent2

 

Is there a way to get all the checked IDs from "$event.sender._values" whenever any node is checked?

Here is how my dropdowntree is configured along with the change function:

<dropdowntree
  :data-source="items"
  tagMode="single"
  :autoClose="false"
  :checkboxes-check-children="checkChildren"
  :check-all="true"
  :placeholder="placeholder"
  dataTextField="text"
  dataValueField="id"
  @change="onChange"
  :value="selectedItems"
  style="width: 100%"
  height="400px"
  :load-on-demand="true"
>

onChange($event) {
let vm = this
vm.$emit('onHierarchyChange', $event.sender._values)
}

 

Petar
Telerik team
 answered on 18 Mar 2022
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
DropDownTree wrapper
DatePicker
Spreadsheet wrapper
Scheduler
Editor
Editor wrapper
Input
DateInput
MultiSelect
NumericTextBox
Scheduler wrapper
DataSource wrappers (package)
Styling / Themes
Calendar
DateTimePicker
Gantt wrapper
Localization
Pager
Chart
Checkbox
Upload
Chart wrappers (package)
DropDownList wrapper
Window
Form
Tooltip
TreeView
ComboBox
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Popup
Toolbar wrapper
Upload wrapper
Validator wrapper
Error
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox wrapper
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Slider
Splitter wrapper
TabStrip wrapper
TimePicker
TreeView wrapper
TabStrip
Card
FloatingLabel
TextArea
Drawer
Stepper
Gauge
Splitter
PanelBar
Notification
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
RadioButton
RadioGroup
Hint
Loader
ProgressBar
DateRangePicker
Switch
Wizard
Skeleton
ScrollView
RangeSlider
ColorGradient
ColorPicker
ColorPalette
FlatColorPicker
Button
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?