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

Tree item image binding

4 Answers 26 Views
This is a migrated thread and some comments may be shown as answers.
Ilya
Top achievements
Rank 1
Ilya asked on 25 Jul 2018, 12:48 PM

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?

 

4 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 27 Jul 2018, 08:06 AM
Hello Ilya,

As the dataImageUrlField option can be used only as string you should use a computed property in order to have a function to define a value. Here you are an example: https://plnkr.co/edit/SjV567g0jOmQu45yK0gL?p=preview


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
0
Ilya
Top achievements
Rank 1
answered on 27 Jul 2018, 08:26 AM

Hello! Thanks for answer, but I see no icons in you example. And I see no declaration for getIcoPath calculated property.

In my example string :data-image-url-field="getIcoPath('type')" call this method, but instead of type-property value it calls getIcoPath with arg value = 'type'.

 

0
Ianko
Telerik team
answered on 27 Jul 2018, 11:35 AM
Hello Ilya,

Yes, because this only an example how the prop should be used. The data used for this treeview has no field that could be used for icon path. Bascially, you need to have first an entry in that data that has a field that holds a string value of the path to the icon. For example: 

{
 id: 1,
 text: "Name",
}

Note that this the dataImageUrlField that is always a string and should point to an existing field from the item in the data set bound.

On a side note, when using a function execution in a Vue prop it is expected that this method to be executed on component creation. With the way you have implemented that, it is expected to have the getIcoPath('type') method executed with argument of string type. Thus, this is what it is passed to the method. Also, from the name of the method, I assume you want that method to return a path to the icon, but the way dataImageUrlField option works is to get a field that points to the path and not directly the path, i.e., you should have the path saved to the data set. 

If it is impossible to include the path to the icon in the data items, you can use the DataSource's schema.parse option to include it dynamically. Here you are an example for that too: https://plnkr.co/edit/97H4eHL0bZ2ymnyPLiQN?p=preview

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
0
Ilya
Top achievements
Rank 1
answered on 27 Jul 2018, 01:57 PM
Thanks a lot! Schema parse option works like a charm!
Asked by
Ilya
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Ilya
Top achievements
Rank 1
Share this question
or