[Solved] Display image on a node using BindTo and children nodes

[James Vassallo]

I am successfully populating my treeview via the BindTo method.  As you can see below, I bind to a single entity of type "Organisation" which has collection of child organisations called "ChildOrganisations".   You can also see that I do some conditional formating of styles depending of the value of property "organisation.organisation_type_id"

@(Html.Kendo().TreeView()

    .Name("OrganisationTreeview")

    .ExpandAll(true)

    .BindTo(Model, mapping => mapping

        .For<Organisation>(binding => binding

            .Children(organisation => organisation.ChildOrganisations)

            .ItemDataBound((item, organisation) =>

            {

                item.Text = organisation.organisation_unit_name;

                item.Id = organisation.organisation_unit_id.ToString();

 

                if (organisation.organisation_type_id == 1)

                {

                    item.HtmlAttributes.Add("style", "font-size: 18px;font-weight:bold;");

                }

                else if (organisation.organisation_type_id == 3)

                {

                    item.HtmlAttributes.Add("style", "font-size: 14px;font-weight:bold");

                }

                else if (organisation.organisation_type_id == 2)

                {

                    item.HtmlAttributes.Add("style", "font-size: 12px;font-weight:normal");

                }

            })))

)

As I bind the children nodes via the item.Text and item.Id properties, I also want to be able to add an image next to the node text.  The image will be different depending on the value of a organisation.enabled.  How can I do that?

[Daniel]

Hello James,

I posted my reply in the support ticket that you have opened on the same topic. For convenience I am pasting it below:

Images can be displayed in the TreeView by using one of the following approaches:

• Use the item ImageUrl property to specify an URL from which the image to be loaded.
• Use the item SpriteCssClasses property to specify a class that contains a background-image style.

Please check this demo for a sample. The only difference will be that the values will be assigned instead of using a method e.g.

if (organisation.organisation_type_id == 1)

{

    item.HtmlAttributes.Add("style", "font-size: 18px;font-weight:bold;");

    item.SpriteCssClasses = "organization1Class";

}




Regards,
Daniel
the Telerik team

[James Vassallo]

Thanks, that did it.

else if (c.organisation_type_id == 3)

{

    item.HtmlAttributes.Add("style", "font-size: 14px;font-weight:bold;margin:10px");

    item.HtmlAttributes.Add("OrganisationTypeId", "3");

    item.ImageUrl = c.enabled ? "../../Content/images/Organisation.png" : "../../Content/images/OrganisationDisabled.png";

}