RadTreeViewItem Styling

[Stephen Rouse]

I assume it is possible to style the radtreeviewitem any way you like, I would like to style it, when selected in a similar method to the Backstage items. I have uploaded two images to illustrate my requirements, the first is a Normal treeview Item selected in ASP.Net project, with the metro skin, I would like this to be changed to something similar to the Backstage item, as shown in the Silverlight demo as shown in the backstage selection (metro).png I have uploaded.

Thanks in advance for any help.
Steve

[Hristo Valyavicharski]

Hello Steve,

Thank you for contacting Telerik Support.

I reviewed the attached screenshots. According to me you should use RadMenu to implement the required functionally. Advantages are that it would be styled much easier and its rendering is more suitable for this scenario. Please consider my suggestion and let me know what you decide to use. Both cases we will do our best to prepare a sample for you.

I'm looking forward to hearing from you.

Regards,
Hristo Valyavicharski
Telerik

[Stephen Rouse]

I will look at the option supplied, but I have a further question of Tree View;

I have a tree view which has two levels (Date Element & Description), I wish to style these differently from each other, in a manner similar to the outlook 2013 "tree" of mail items; Please see the attached image "outlook 2013 mail tree" the top level needs to be styled differently as stated. I have looked at NodeTemplate, I know how I would do this using the Telerik Silverlight Tools using HeirachalDataTemplates, but there does not seem to be the same facility in the ASP version, unless I cannot find the documentation.

Steve   

[Stephen Rouse]

I have "moved" to using the radgrid and grouping to achieve the requirement, but struggling a little with the styling, I will try and post an update on my "quest" when I can. However, if it is possible to achieve the hierarchal  styling that I can in Silverlight, in ASP.NET please let me know.

Steve

[Stephen Rouse]

Further to my previous posts, I have now used the RadPanelBar to achieve the desired affect, I am now looking at styling the RadPanelItem to have a set of three fields from the datasource instead of the text field when displaying the item.

Steve

[Stephen Rouse]

I have used a RadPanelBar to display “opportunities” for the user, delimitated by a date element in a similar way to outlook, such as ;

• Today
• Yesterday
• Last Week
• Last Month

Etc.  

This works well, and I have also added the facility to add the count of items in the header, again similar to outlook.

I have used one field from the class to display in the child items, in this case the description, see the example "radpanel test.png" .

For each radtree childitem, I want to present the data in a similar format to that shown in the "mockup paneltreeintem.png" example.

I have looked at a number of articles I searched on using google, including Add Panelbar templates at Runtime where I have copied the sample for content template :

class CustomContentTemplate : ITemplate
{
    public void InstantiateIn(Control container)
    {
        Label label1 = new Label();
        label1.Font.Bold = true;
        label1.DataBinding += new EventHandler(label1_DataBinding);
        container.Controls.Add(label1);
    }

    private void label1_DataBinding(object sender, EventArgs e)
    {
        Label target = (Label)sender;
        RadPanelItem item = (RadPanelItem)target.BindingContainer;
        target.Text = item.Value;
    }
}

I already change the tooltip for the radpanitem in the code behind, using this code fragment

CustomContentTemplate template = new CustomContentTemplate();
OpportunityRadPanelBar.DataSource = treeitems;
OpportunityRadPanelBar.DataBind();
foreach (RadPanelItem item in OpportunityRadPanelBar.Items)
{
    if (item.Level == 0)
    {
        OpportunityNode temp = treeitems.Where(t => t.DateElement == item.Text && t.ParentID == null).FirstOrDefault();
        if (temp != null)
        {
            // TODO: Check for the current user has selected this item before....
            item.Text = string.Format("{0} ( {1} )", item.Text, treeitems.Count(t => t.ParentID == temp.NodeId).ToString());
        }
        foreach (RadPanelItem childitem in item.Items)
        {
            OpportunityNode tmp = treeitems.Where(t => t.NodeId.ToString() == childitem.Value).FirstOrDefault();
            if (tmp != null)
            {
                childitem.ToolTip = string.Format("Reference : {0}, Area : {1}", tmp.ReferenceNumber, tmp.PostalDistrict);

                childitem.ContentTemplate = new CustomContentTemplate();
                template.InstantiateIn(item);
                childitem.DataBind();
            }
        }
    }

I added the content template creation lines, to add the content template as suggested in the article mentioned above.

childitem.ContentTemplate = new CustomContentTemplate();
template.InstantiateIn(item);
childitem.DataBind();

The label1_DataBinding "event handler" Never gets executed, and of course the radpanelitem looks exactly the same as the original one ( as shown in radpanel test.png), except for the first occasion where a small "arrow" appears to the top right of the text.

I'm assuming that I can change the item to display the "record" in a manor as indicated in "mockup paneltreeitem.png "?

The OpportunityNode class is declared in the code segment below (although some methods are not copied to this code segment).

public class OpportunityNode : Opportunity
{
    public int NodeId { get; set; }
    public string DateElement { get; set; }
    public int? ParentID { get; set; }

    public OpportunityNode()
    {
        //DateElement = SetDateElement(this.DatePosted);
    }

    public OpportunityNode(Opportunity oppurtunity, int nodeID)
    {
        this.BudgetID = oppurtunity.BudgetID;
        this.contactnumber = oppurtunity.contactnumber;
        this.DateElement = SetDateElement(oppurtunity.DatePosted);
        this.DatePosted = oppurtunity.DatePosted;
        this.DatePurchased = oppurtunity.DatePurchased;
        this.Description = oppurtunity.Description;
        this.email = oppurtunity.email;
        this.firstname = oppurtunity.firstname;
        this.fullname = oppurtunity.fullname;
        this.HasBeenSelected = oppurtunity.HasBeenSelected;
        this.IsPostCodeResloved = oppurtunity.IsPostCodeResloved;
        this.IsSelectable = oppurtunity.IsSelectable;
        this.Latitude = oppurtunity.Latitude;
        this.Longitude = oppurtunity.Longitude;
        this.OpportunityID = oppurtunity.OpportunityID;
        this.PostalDistrict = oppurtunity.PostalDistrict;
        this.postcode = oppurtunity.postcode;
        this.ReferenceNumber = oppurtunity.ReferenceNumber;
        this.SelectionCount = oppurtunity.SelectionCount;
        this.surname = oppurtunity.surname;
        this.TimingID = oppurtunity.TimingID;
        this.TradeID = oppurtunity.TradeID;
        this.WorkID = oppurtunity.WorkID;
        this.NodeId = nodeID;
    }

 I hope I have explained my requirements, and given enough information, I am using Telerik Ajax controls Q1 2013 SP1, Visual Studio 2012 Update 2. I have tried this in Internet Explorer 10, Firefox 21.0, Chrome 27.0.1453.9 all with the same result. 

[Hristo Valyavicharski]

Hi Stephen,

The label1_DataBinding "event handler" should be executed only if you call label1.DataBind();
Calling childitem.DataBind(); should not fire that event.

Regards,
Hristo Valyavicharski
Telerik