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>
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>
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:
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
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
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.
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() )
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?
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
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?
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