Display image on a node using BindTo and children nodes

3 posts, 0 answers
  1. James Vassallo
    James Vassallo avatar
    5 posts
    Member since:
    Jul 2010

    Posted 05 Feb 2013 Link to this post

    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?
  2. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 07 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. James Vassallo
    James Vassallo avatar
    5 posts
    Member since:
    Jul 2010

    Posted 07 Feb 2013 Link to this post

    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";
    }

     

     

     

     

Back to Top