RadTreelist -avoid flickering

4 posts, 0 answers
  1. Sindu
    Sindu avatar
    46 posts
    Member since:
    Oct 2011

    Posted 24 Oct 2011 Link to this post



    Hi  all.

    I have a radtreelist in my application.I have given the code  in 'aspx' below.

     

     

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"  />

     

     

     

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

     

     

     

    <AjaxSettings>

     

     

     

     

    <telerik:AjaxSetting AjaxControlID="RadTreeList1">

     

     

     

    <UpdatedControls>

     

     

     

    <telerik:AjaxUpdatedControl ControlID="RadTreeList1" LoadingPanelID="RadAjaxLoadingPanel1" />

     

     

     

    </UpdatedControls>

     

     

     

    </telerik:AjaxSetting>

     

     

     

     

    </AjaxSettings>

     

     

     

    </telerik:RadAjaxManager>

     

     

     

    <br />

     

     

     

     

    <telerik:RadTreeList ID="RadTreeList1" runat="server" OnNeedDataSource="RadTreeList1_NeedDataSource"

     

     

     

    AutoGenerateColumns="false" AllowMultiItemSelection="true"

     

     

     

    AllowPaging="false" AllowSorting="true" DataKeyNames="ID"

     

     

     

    ParentDataKeyNames="PID" AlternatingItemStyle-BackColor ="#EFF5FB" ItemStyle-BackColor="#E0ECF8" ShowTreeLines="false" >

     

     

     

     

    <Columns>

     

     

     

     

     

    <telerik:TreeListBoundColumn DataField="Code" UniqueName="Code" HeaderText="Heading" HeaderStyle-Width="90" ItemStyle-Font-Names="Arial, Sans-Serif" />

     

     

     

    <telerik:TreeListBoundColumn DataField="StatisticalCode" UniqueName="StatisticalCode" HeaderText="Stats Code" HeaderStyle-Width="50" HeaderStyle-Wrap="true" ItemStyle-Font-Names="Arial, Sans-Serif" ItemStyle-Font-Size="Medium" HeaderStyle-Font-Names="Arial, Sans-Serif" HeaderStyle-Font-Size="Medium" HeaderStyle-Font-Bold="true" HeaderStyle-BackColor="White" ItemStyle-BorderColor="White"/>

     

     

     

    <telerik:TreeListBoundColumn DataField="Test" UniqueName="Test"/>

     

     

     

     

    </Columns>

     

     

     

     

    </telerik:RadTreeList>

    My problem is when I expand the node I feel the page flickering.How to avoid this flickering (postback) feeling?

    Thanks

    Sindu

     

  2. Marin
    Admin
    Marin avatar
    1044 posts

    Posted 26 Oct 2011 Link to this post

    Hello Sindu,

     Indeed when you expand a node in the TreeList a postback happens because the control needs to load additional data for the child nodes. The standard way to prevent the page from being refreshed is to ajaxify the control as you have done in the attached code snippet. Having this on the page the RadTreeList should not perform a regular postback unless there is something wrong with the ajax settings for the control. Do you experience flickering as the one caused when the page is reloaded or is it of some other kind ? Also in which browsers do you observe this behavior? Also you can try setting the Skin property of the RadAjaxLoadingPanel. While performing an asynchronous postback when expanding a node you should see the GIF image of the loading panel while the request is processed it depends on the skin of the panel:

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Vista"  />


    Kind regards,
    Marin
    the Telerik team
    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. Logan
    Logan avatar
    23 posts
    Member since:
    Jan 2012

    Posted 22 May 2014 in reply to Marin Link to this post

    Hi Im having the same issue, setup AJAX all correctly and it still post backs (screen flicker) with no loading panel visible.

    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1"
            DefaultLoadingPanelID="RadAjaxLoadingPanel1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="rtProducts">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="rtProducts"
                            LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelCssClass="" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
            EnableTheming="True">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI"
                    Name="Telerik.Web.UI.Common.Core.js">
                </asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI"
                    Name="Telerik.Web.UI.Common.jQuery.js">
                </asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI"
                    Name="Telerik.Web.UI.Common.jQueryInclude.js">
                </asp:ScriptReference>
            </Scripts>
        </telerik:RadScriptManager>
        <div>
         
            <telerik:RadTreeList ID="rtProducts" runat="server" AllowLoadOnDemand="True"
                DataKeyNames="ID" ParentDataKeyNames="PARENT_ID" Skin="Office2010Black">
            </telerik:RadTreeList>
         
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server"
                Skin="Sunset">
            </telerik:RadAjaxLoadingPanel>
         
        </div>
        </form>
    </body>
    </html>
    axLoadingPanel1"><
    br>        <AjaxSettings><br>            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1"><br>            </telerik:AjaxSetting><br>            <telerik:AjaxSetting AjaxControlID="rtProducts"><br>                <UpdatedControls><br>                    <telerik:AjaxUpdatedControl ControlID="rtProducts" <br>                        LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelCssClass="" /><br>                </UpdatedControls><br>            </telerik:AjaxSetting><br>        </AjaxSettings><br>    </telerik:RadAjaxManager><br>    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" <br>        EnableTheming="True"><br>        <Scripts><br>            <asp:ScriptReference Assembly="Telerik.Web.UI" <br>                Name="Telerik.Web.UI.Common.Core.js"><br>            </asp:ScriptReference><br>            <asp:ScriptReference Assembly="Telerik.Web.UI" <br>                Name="Telerik.Web.UI.Common.jQuery.js"><br>            </asp:ScriptReference><br>            <asp:ScriptReference Assembly="Telerik.Web.UI" <br>                Name="Telerik.Web.UI.Common.jQueryInclude.js"><br>            </asp:ScriptReference><br>        </Scripts><br>    </telerik:RadScriptManager><br>    <div><br>    <br>        <telerik:RadTreeList ID="rtProducts" runat="server" AllowLoadOnDemand="True" <br>            DataKeyNames="ID" ParentDataKeyNames="PARENT_ID" Skin="Office2010Black"><br>        </telerik:RadTreeList><br>    <br>        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server" <br>            Skin="Sunset"><br>        </telerik:RadAjaxLoadingPanel><br>    <br>    </div><br>    </form><br></body><br></html>
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 23 May 2014 in reply to Logan Link to this post

    Hi Logan,

    Please have a look into the sample code snippet which works fine at my end. 

    ASPX:
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadTreeList1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeList1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadTreeList ID="RadTreeList1" runat="server" DataKeyNames="EmployeeID" ParentDataKeyNames="ReportsTo" AutoGenerateColumns="false" DataSourceID="SqlDataSource1" PageSize="5" ClientDataKeyNames="EmployeeID" AllowMultiItemSelection="true">
        <Columns>
            <telerik:TreeListBoundColumn DataField="EmployeeID" HeaderText="EmployeeID" HeaderStyle-Width="80px" UniqueName="EmployeeID">
            </telerik:TreeListBoundColumn>
            <telerik:TreeListBoundColumn DataField="LastName" HeaderText="LastName" UniqueName="LastName">
            </telerik:TreeListBoundColumn>
            <telerik:TreeListBoundColumn DataField="ReportsTo" HeaderText="ReportsTo" UniqueName="ReportsTo">
            </telerik:TreeListBoundColumn>
        </Columns>
    </telerik:RadTreeList>

    Let me know if you have any concern.
    Thanks,
    Princy.
Back to Top