RadTreeViewItem Styling

7 posts, 0 answers
  1. Stephen Rouse
    Stephen Rouse avatar
    23 posts
    Member since:
    Feb 2005

    Posted 27 May 2013 Link to this post

    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
  2. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 30 May 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stephen Rouse
    Stephen Rouse avatar
    23 posts
    Member since:
    Feb 2005

    Posted 31 May 2013 Link to this post

    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   
  5. Stephen Rouse
    Stephen Rouse avatar
    23 posts
    Member since:
    Feb 2005

    Posted 01 Jun 2013 Link to this post

    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
  6. Stephen Rouse
    Stephen Rouse avatar
    23 posts
    Member since:
    Feb 2005

    Posted 02 Jun 2013 Link to this post

    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
  7. Stephen Rouse
    Stephen Rouse avatar
    23 posts
    Member since:
    Feb 2005

    Posted 02 Jun 2013 Link to this post

    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. 










  8. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 05 Jun 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017