Displaying Tree Images Using HierarchicalDataSource

[Andrew]

Hi,

I am trying to display images in a tree using the HierarchicalDataSource.

My binding is currently defined as follows:

data = new kendo.data.HierarchicalDataSource({

    transport: {

        read: {

            url: "/Controller/Action",

            dataType: "json"

        }

    },

    schema: {

        model: {

            id: "Id",

            hasChildren: "HasChildren"

        }

    }

});

 

$("#tree").kendoTreeView({ 

    dataSource: data,

    dataTextField: "Alias"

});

In my controller action I return a list of a class that contains an ImageUrl.
If i try and bind to the image in the following way, the source value of the rendered image tag equals "ImageUrl" and not the value defined in the object I am binding to.

schema: {

        model: {

            id: "Id",

            hasChildren: "HasChildren",

            imageUrl "ImageUrl"

        }

    }

For example:

<img class="k-image" alt="" src="ImageUrl"/>

However, I would expect that the src should equal whatever I have defined in the ImageUrl in the json object that I return, for example "Image.gif".

I have also tried using the sprite css class, however, I can not change the class either, it always takes the name that I have defined in the schema model.
I need to change the Image displayed for a tree node, depending on what I return during remote binding.

Can anybody assist me further? Or give me a few tips so I understand what is happening?

[Alex Gyoshev]

Hello Andrew,

Use the dataImageUrlField / dataSpriteCssClassField in the TreeView configuration, rather than configuring these in the datasource.

Greetings,
Alex Gyoshev
the Telerik team

[Andrew]

Hi Alex,

Thank you very much for your fast reply.
That makes sense, sorry, I overlooked this property.

It works as expected.

Regards

Andrew

[Khaled]

And what if I want to use custom sprite icons, so my images, how could that be done ?

[Alex Gyoshev]

Hello Khaled,

See the treeview images example on how to use sprites with the Kendo UI TreeView.

All the best,
Alex Gyoshev
the Telerik team