Tree item image binding

[Ilya]

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?

 

[Ianko]

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

[Ilya]

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

 

[Ianko]

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",
 iconPath: "http://www.somedomain.com/images/IconFor1.png"
}

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

[Ilya]

Thanks a lot! Schema parse option works like a charm!