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
3 Answers, 1 is accepted
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
Rank 2
Iron
Hi Im having the same issue, setup AJAX all correctly and it still post backs (screen flicker) with no loading panel visible.
html xmlns="http://www.w3.org/1999/xhtml">
<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>
Rank 2
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.