This is a migrated thread and some comments may be shown as answers.

Need sample for custom treeview template

5 Answers 32 Views
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 16 Jul 2018, 07:51 PM

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>

5 Answers, 1 is accepted

Sort by
0
Michael
Top achievements
Rank 1
answered on 16 Jul 2018, 09:10 PM
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.
0
Michael
Top achievements
Rank 1
answered on 16 Jul 2018, 09:18 PM

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...

 

0
Dimitar
Telerik team
answered on 18 Jul 2018, 08:50 AM
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:


Regards,
Dimitar
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Michael
Top achievements
Rank 1
answered on 18 Jul 2018, 01:25 PM
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.
0
Ianko
Telerik team
answered on 20 Jul 2018, 09:59 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Michael
Top achievements
Rank 1
Answers by
Michael
Top achievements
Rank 1
Dimitar
Telerik team
Ianko
Telerik team
Share this question
or