Treeview slow with lots of node using a template

7 posts, 1 answers
  1. Edward
    Edward avatar
    2 posts
    Member since:
    Jun 2008

    Posted 24 Nov 2008 Link to this post

    Hi,

    Hoping someone might have a suggestion.

    Basically i have a treeview that can potentially have 200 nodes each with a template applied to it. I have something like 
    In my page init.

    "TreeviewStructure.NodeTemplate = New TreeViewTemplate()"

    Then you can click on any node and will show a modal popup. Problem is when the treeview has 200 nodes it seems to really struggle and take a age to open the modal popup, but if i remove the template its really quick.

    So is there anyway not to have to load the template on each postback

    Anyone have any ideas

    Thanks

     
  3. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 27 Nov 2008 Link to this post

    Hello Edward,

    Can you please tell us what controls do you have in your TreeViewTemplate?

    Do you use load-on-demand, or you load all the 200 nodes at once on every page load?

    Ideally, you can open a support ticket and attach a sample project demonstrating the issue there.

    Sincerely yours,
    Veselin Vasilev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. Edward
    Edward avatar
    2 posts
    Member since:
    Jun 2008

    Posted 27 Nov 2008 Link to this post

    Thanks for the reply.

    I've got something like the below. I expand all the nodes on page load as thats a requirement.

      Public Sub InstantiateIn(ByVal container As Control) Implements System.Web.UI.ITemplate.InstantiateIn  
            Dim MainDiv As HtmlGenericControl  
            Dim ImgDiv As HtmlGenericControl  
            Dim LabelDiv As HtmlGenericControl  
            Dim img As Image  
            Dim pop As RadToolTip  
            Dim popExtender As RadToolTip  
            Dim lbl As Label  
            Try 
     
                'Create main div  
                MainDiv = New HtmlGenericControl("div")  
                MainDiv.ID = "divMenu" 
                MainDiv.Attributes.Add("class", "TreeViewDiv")  
                MainDiv.Attributes.Add("runat", "server")  
     
                ImgDiv = New HtmlGenericControl("div")  
                ImgDiv.ID = "div2" 
                ImgDiv.Attributes.Add("runat", "server")  
                MainDiv.Controls.Add(ImgDiv)  
     
                LabelDiv = New HtmlGenericControl("div")  
                LabelDiv.ID = "div3" 
                LabelDiv.Attributes.Add("runat", "server")  
                LabelDiv.Attributes.Add("style", "overflow:hidden")  
                MainDiv.Controls.Add(LabelDiv)  
     
                'Create the head image and add to main div  
                img = New Image  
                img.ID = "imgMenu" 
                img.Attributes.Add("runat", "server")  
                img.ImageUrl = "../images/head.png" 
                img.ImageAlign = ImageAlign.Left  
                img.Visible = False 
                img.Style.Add("padding-top", "3px")  
                img.Style.Add("padding-left", "1px")  
                img.Style.Add("padding-right", "3px")  
                ImgDiv.Controls.Add(img)  
     
                'Create the label and add to main div  
                lbl = New Label  
                lbl.ID = "ItemLabel" 
                lbl.Style.Add("font-size", "0.8em")  
                LabelDiv.Controls.Add(lbl)  
     
                'Create popup control  
                pop = New RadToolTip  
                pop.Attributes.Add("runat", "server")  
                pop.TargetControlID = "imgMenu" 
                pop.Position = ToolTipPosition.BottomLeft  
                pop.RelativeTo = ToolTipRelativeDisplay.Element  
                pop.AutoCloseDelay = 30000  
                pop.Skin = "Outlook" 
                pop.Title = "Users" 
                pop.ID = "RadTip" 
                pop.OffsetY = -5  
                pop.OffsetX = -2  
     
                popExtender = New RadToolTip  
                popExtender.Attributes.Add("runat", "server")  
                popExtender.TargetControlID = "div3" 
                popExtender.Position = ToolTipPosition.TopRight  
                popExtender.RelativeTo = ToolTipRelativeDisplay.Element  
                popExtender.AutoCloseDelay = 30000  
                popExtender.Skin = "Vista" 
                popExtender.ID = "RadTipNodeName" 
                popExtender.OffsetY = -5  
                'popExtender.OffsetX = -300  
     
                'Attach to the treeview  
                container.Controls.Add(pop)  
                container.Controls.Add(popExtender)  
                container.Controls.Add(MainDiv)  
     
            Catch ex As Exception  
                
            End Try 
        End Sub 


    Im only using the trial at the moment so can't submit a ticket, but i believe we are in the process of purchasing and so i've nessecary will create a ticket once thats done.
  7. Answer
    Paul
    Admin
    Paul avatar
    4281 posts

    Posted 27 Nov 2008 Link to this post

    Hi Edward,

    RadTooltip and RadTooltipManager are quite lightweight and generally there are no problems with performance. However, in templated scenarios the number of tooltip controls on the page can easily go out of hand. We have seen scenarios involving 1000+ tooltips on a single page. Since each of them needs to be initialized on client page load, the system takes a lot of time to do it, especially If <compilation debug=true>. In such scenarios there is a better approach to the tooltips – and that is using a couple of lines of client-side code that will create a tooltip only when the user needs to see it. The following demo demonstrates this approach.

    Kind regards,

    Paul
    the Telerik team

     


    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8.
  9. Matthew Timbs
    Matthew Timbs avatar
    17 posts
    Member since:
    Aug 2009

    Posted 05 Jan 2010 Link to this post

    Hi,

    I'm seeing exactly the same behavior, although I'm adding a set of radio buttons to the leaf nodes.  The treeview is databound, I'm using checkboxes and a NodeTemplate.  Speed is fine until I check or uncheck a box then it just drags horribly.  If I remove the NodeTemplate then its fast.
  11. Matthew Timbs
    Matthew Timbs avatar
    17 posts
    Member since:
    Aug 2009

    Posted 05 Jan 2010 Link to this post

    One more snippet of evidence.  I'm using the "NodeCheck" event. When I remove the event handler it's fast again.  I need the handler, but it is interesting that it behaves this way.
  13. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 08 Jan 2010 Link to this post

    Hi Matthew Timbs,

    I think the best way to proceed is to send us a sample running project so we can test it locally.

    All the best,
    Veskoni
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top