[Solved] TreeView Template Issue

[chris]

Hi,
i'm using the ASP.NET MVC Extensions in a small app. I use a treeview to render a category tree. If I select a treeitem a List of related objects will be shown in a second area on this page. Because the selection will be used to show the related items and I have to edit the values of the category, I want to implement a imagelink after the Text of the item.
I try to use the content property and i try to use the templates. But I found no solution to show an imagelink after the text.. If i uses the Tempate html property, the div will not be shown because the display style of the div with the classt-content will be set to none. If i toggle this style with jquery, the image willl be rendered if I collapsed the Item and expanded it immediately. Then the image will  be rendered beneath the item text.
this is my definition of the treeview in my code.

@(Html.Telerik().TreeView()
        .Name("PCTreeView")
        .ClientEvents(events => events.OnSelect("OnTreeSelect"))
        .BindTo(Model, (item, pcitem) =>
        {
            item.Text = pcitem.DisplayName ;
            item.Value = pcitem.Name;
            item.LoadOnDemand = pcitem.CountSubItems > 0;

        })
        .DataBinding(dataBinding => dataBinding
                .Ajax().Select("LoadChildCategories", "ProductCategory")
        )
)

 
The above example I like to extended with the image link.
Can you provide a small snippet how to use the template functionality in the right way.

Thx
chris

[chris]

Hello,
I solve the problem by using the client API. I add a callback to the Onlaod and the OnDatavbound Event and add the code for the image link to <li> item.

function OnTreeDatabound(e) {

        ShowEditLinks()

    }

 

    function OnTreeLoad(e) {

        ShowEditLinks();

    }

 

    function ShowEditLinks() {

         

        var treeView = getTreeView();

        var link = '@Url.Action("EditProductCategoryDetail", "ProductCategory")';

        var src = '@Url.Content("../Content/Images/Pen.png")';

        var editImage = '<img alt="Edit" src="'+ src +'" class="treeimg"/>';

        $('a').remove(".link");

 

        $('li', treeView.element).each(function (index) {

            var currentLink = link + "?productCategory=" + treeView.getItemValue($(this));

            $('div::first', $(this)).append("<a class='link' href='" + currentLink + "'>"+ editImage + "</a>");

        });

    }

Chris