Need sample for custom treeview template

[Michael]

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>

[Michael]

Just an addition... after I hit the breakpoint a few times, it does seem to get the argument in itemTemplate(e: any).  The problem seems to be that my component's "templateArgs" is never populated with it, and I'm not sure what's missing now.

[Michael]

Figured it out... needed to initialize the "templateArgs" on my FieldGroupTemplate (DOH!).

public templateArgs: any = {};

It also helped in this case, for me to just pass the item from the arg as well:

templateArgs: e.item

Then I could just bind like this ("name" was a property on my object in the tree):

template: "<div>{{ templateArgs.name }}</div>",

Maybe this will help someone else out there...

 

[Dimitar]

Hello Michael,

Thank you for sharing your solution. I believe it will be helpful for the rest of the community.

We have summarized how native Vue templates could be used through single file components in the following documentation article:

• Vue Templates.

Regards,
Dimitar
Progress Telerik

[Michael]

Those single file component samples do help, but unfortunately for us, we're using Typescript, along with component and property decorators, so there's always a bit of conversion we have to do.  At this point, I'm not sure why people continue to not use Typescript, but I know these are just wrappers around your components that were not originally created with Typescript.  If you guys rewrite these wrappers as "native" Vue components that don't rely on jQuery, I hope that you choose to do so with Typescript.  While on the topic of samples/demos, I would like to say that your Vue demos area still needs quite a lot more samples, compared to your other Kendo platforms (even Angular).  We have placed a big bet on Vue, and are also heavily invested in Kendo, so we're looking forward to more samples for Vue.

[Ianko]

Hello Michael,

Thank you for the feedback. Can I please ask you to post a comment in this feature request? I am sure that it will be a valuable one. 

As for the demos and documentation. You are absolutely right that it needs improvement. This is why there is an ongoing task related to updating the Vue-related documentation that is planned to be accomplished for the next official release. 

Regards,
Ianko
Progress Telerik