TreeView populated programatically in Atlas UpdatePanel

Last post 04-26-2008 10:08 AM by gselec. 8 replies.

Sort Posts:

  • TreeView populated programatically in Atlas UpdatePanel

    09-25-2006, 9:11 PM

    Hi there,

     I'm fairly new to Atlas and ASP.NET, so perhaps this question is obvious (I apologise).

    I have created a page which essentially contains this information:

    <asp:Content ID="Content1" ContentPlaceHolderID="MainPagePlaceholder" Runat="Server">
        <atlas:UpdatePanel ID="AjaxMultiMediaPanel" mode="Conditional" runat="server">
            <ContentTemplate>
                <asp:Table ID="MultiMediaTable" CssClass="MultiMediaTable" runat="server" Height="193px" Width="274px">
                    <asp:TableRow runat="server">
                        <asp:TableCell runat="server" CssClass="TableTopAlign">
                            <cc1:MediaPlayer ID="MediaPlayer1" runat="server"></cc1:MediaPlayer>
                            <atlas:UpdateProgress runat="server" ID="progress">
                                <ProgressTemplate>
                                    <asp:Image ID="Image1" runat="server" ImageUrl="~/images/SpinningBall.gif" /> Reading UPnP Directory
                                </ProgressTemplate>
                            </atlas:UpdateProgress>
                        </asp:TableCell>
                        <asp:TableCell runat="server" CssClass="TableTopAlign">
                            <asp:TreeView ID="TreeView1" runat="server" >
                                <ParentNodeStyle    CssClass="TreeParentNodeStyle" />
                                <HoverNodeStyle     CssClass="TreeHooverStyle" />
                                <RootNodeStyle      CssClass="TreeRootNodeStyle" />
                                <LeafNodeStyle      CssClass="TreeLeafStyle" />
                                <NodeStyle          CssClass="TreeNodeStyle" />
                            </asp:TreeView>
                        </asp:TableCell>
                    </asp:TableRow>
                    <asp:TableRow runat="server">
                        <asp:TableCell runat="server">
                            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Play" />
                            <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Load UPnP Info" />
                        </asp:TableCell>
                        <asp:TableCell>
                            <asp:Label ID="Label1" runat="server" Text="" />
                        </asp:TableCell>
                    </asp:TableRow>
                </asp:Table>
            </ContentTemplate>
        </atlas:UpdatePanel>

    </asp:Content>
     

    When Button2 is pressed, I programatically populate the TreeView (using c# to recursively build the tree). This works without problems when I do NOT use Atlas, except of course in that case the page refreshes after about 10 seconds. Now, using the code above, The Progress Update image and text is shown for about 10 seconds, but after that the page 'freezes' for over a minute. I have tried triggers to force a refresh, programatically forcing a refresh, but nothing helps. If I at the end of my tree-population code turn set TreeView1.Visible = false; then the page does not freeze.

     
    It appears that the population of the treeview somehow causes Atlas to do 'something' for an awful long time.

    If possible, I would appreciate any help any of you experts can offer.

    - Anders

    P.S. The tree has a depth of about 4-5 levels max, with about 100 items. Nothing crazy. The 10 second delay is due to some other UPnP lookups I'm doing, not because it takes a long time to build the tree.


     

  • Re: TreeView populated programatically in Atlas UpdatePanel

    09-27-2006, 8:12 PM

    See also: similar discussion

    A count of my items reveals 2685 of them, a bit more than stated above.  

     



     

  • Re: TreeView populated programatically in Atlas UpdatePanel

    10-13-2006, 11:25 PM
    • Loading...
    • dan cavina
    • Joined on 08-25-2006, 8:56 PM
    • Posts 14

    Hi Anders

    Did you ever find out a solution to this problem? I have been having the same problem where a TreeView inside an UpdatePanel takes a very long time to refresh.

    Using Fiddler, I found out that the problem is the various images used by the TreeView control. Outside an UpdatePanel, the browser makes only one request for an image, regardless of the number of times its used. Inside the UpdatePanel, the browser makes a request for each and every instance of an image.

    I don't know if this is a problem with the IE cache or the way Atlas is processing the resulting page.

    The solution to this has so far eluded me. The only thing I can do is to reduce the number of images used by the TreeView control, but that quickly makes it useless.

    Cheers,

     - Dan

    Filed under: , ,
  • Re: TreeView populated programatically in Atlas UpdatePanel

    11-17-2006, 2:45 PM

    Hi Dan,

    No solution so far. I had to drop it and just create the site using other widgets. Not quite as cool, but at least it works.
     

  • Re: TreeView populated programatically in Atlas UpdatePanel

    11-17-2006, 3:04 PM
    • Loading...
    • Kodo
    • Joined on 03-20-2003, 6:43 PM
    • Syracuse NY
    • Posts 58
  • Re: TreeView populated programatically in Atlas UpdatePanel

    11-18-2006, 12:02 PM
    • Loading...
    • elaurentin
    • Joined on 09-25-2006, 4:41 AM
    • Posts 8

    I had same problem. Finally, I setup a full postback trigger to the control that will force the repaint.
    In my case, I had a button so my trigger code look like this:
    <Triggers>
    <asp:PostBackTrigger ControlID="btnBack" />
    <asp:PostBackTrigger ControlID="btnNext" />
    </Triggers>

    _______________________
    Ernest L., MCSD C# .NET
  • Re: TreeView populated programatically in Atlas UpdatePanel

    01-23-2007, 11:11 AM
    • Loading...
    • vitieubao
    • Joined on 08-15-2006, 10:09 PM
    • Posts 7
    I had the same problem, but I am still using Atlas, I don't wanna update until official version. And atlas UpdatePanel does not have PostBackTrigger, do you know how to solve it this problem witt Atlas?
  • Re: TreeView populated programatically in Atlas UpdatePanel

    01-23-2007, 4:03 PM
    • Loading...
    • Kodo
    • Joined on 03-20-2003, 6:43 PM
    • Syracuse NY
    • Posts 58
    If you haven't upgraded to the latest version by now, then you're going to be in a world of hurt when the RTM is released. There have been MANY breaking changes from ATLAS and it would be wise to forget ATLAS and move forward.
  • Re: TreeView populated programatically in Atlas UpdatePanel

    04-26-2008, 10:08 AM
    • Loading...
    • gselec
    • Joined on 04-25-2008, 3:08 AM
    • Posts 12

    [updatepanel , treeView , position , state , postBack , hiddenfiled]

    put a treeView in a panel, it will show a scrollBar; when click then treeView, it will postBack,how to restore the position?

    ------------------------------------------------------------------------------------------------------------------------

    1:in common asp page: aspx

    <script language="javaScript">

     function loadEvent()
            {
                //tree在postBack时,显示在页面中的位置会移动,注册客户端脚本处理。加在body onload="loadEvent()"
                try
                {   //hf_SelectedNode tv_Main_SelectedNode 自动生成的hiddenField
                    var s="";   //tv_Main_Data.selectedNodeID.value;        //自动生成的java Object
                    if (s=="" || s==null) s="tv_Main_SelectedNode";
                    var elem = document.getElementById(s);          //tv_Main_SelectedNode
                    if(elem != null )
                    {
                        var node = document.getElementById(elem.value);
                        if(node != null)
                        {
                            node.scrollIntoView(false);             // true:页面顶部
                            //document.getElementById('div_Tree').scrollLeft = 0;
                        }
                    }
                }
                catch(oException)
                {}
            }

    </script>

    .....

    <body onload="loadEvent()" >

     ...

    <asp:Panel ID="panel_Tree" runat="server" ScrollBars="Both" Style="width:100%; height:100%"
                                <asp:TreeView ID="tv_Main"  runat="server" OnSelectedNodeChanged="tv_Main_SelectedNodeChanged" Width="300px">
                                    <Nodes>
                                        <asp:TreeNode Text="新建节点" Value="新建节点11"></asp:TreeNode>
                                        <asp:TreeNode Text="新建节点" Value="新建节点12"></asp:TreeNode>
                                  </nodes>

                               </asp:treeView>

    </asp:panel>

    ------------------------------------------------------------------------------------------------------------------------

    2:in ajax-updatePanel is hard, my way is record in client-cookie(thanks eric), aspx:

    </script language="javaScript">

    function loadEventCookie()
            {
                var strCook = document.cookie;
                document.title=strCook;
                if(strCook.indexOf("!~")!=0){
                    var intS = strCook.indexOf("!~");
                    var intE = strCook.indexOf("~!");
                    var strPos = strCook.substring(intS+2,intE);
                    document.getElementById("panel_Tree").scrollTop = strPos;
                }
            }
            function setDivPosition()
            {
                var intY = document.getElementById("panel_Tree").scrollTop;
                document.title = intY;
                document.cookie = "yPos=!~" + intY + "~!";
            }
        </script>

    .........

    <asp:Panel ID="panel_Tree" runat="server" ScrollBars="Both" Style="width:100%; height:100%"
                                    onscroll="setDivPosition()" onmouseup="loadEventCookie()" onmouseover="loadEventCookie()" >
                                <asp:TreeView ID="tv_Main"  runat="server" OnSelectedNodeChanged="tv_Main_SelectedNodeChanged" Width="300px">
                                    <Nodes>
                                        <asp:TreeNode Text="新建节点" Value="新建节点11"></asp:TreeNode>
                                        <asp:TreeNode Text="新建节点" Value="新建节点12"></asp:TreeNode>
                                        <asp:TreeNode Text="新建节点" Value="213"></asp:TreeNode>

                                    </Nodes>
                                    <SelectedNodeStyle BackColor="LimeGreen"/>
                                </asp:TreeView>
                            </asp:Panel>

     

    it works good! haha!

Page 1 of 1 (9 items)
Microsoft Communities
Page view counter