Flicker problem in RADPanelBar

[Satish]

I am using RADPanel bar Q2 2008 in my application. I am able to successfully use the control except for a problem in animation.

The animation is showing a flicker on expand or collapse. I digged in to the issue and found that this is occuring only if i remove following string in the aspx header:

<!

 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

If the string is present, the animation works fine but my page breaks. This application is an old application and difficult to debug why it is breaking. I guess the problem is with some not well written HTML. Is there any way i can get the animation working flawlessly with the above string not present in the page?

 

 

[Paul]

Hello Satish,

You can easily turn off the panelbar's animation, i.e.

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" CollapseDelay="0" ExpandDelay="0">
        <CollapseAnimation Duration="0" Type="None" />
        <ExpandAnimation Duration="0" Type="None" />
    </telerik:RadPanelBar>

All the best,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Satish]

I don't want to remove the animation. Actually i have been promoting RADPanelBar in my team for the easy animation support.

I want to remove the flicker from the animation. The animation should be smooth. As i said, some broken HTML is causing this problem but debugging the page is very very difficult because of it's dynamic rendering and large size. So i am looking for help to fix the animation without fixing other parts of the page.

Making the animation work smoothly has become herculen task. Even a small anomoly in the rendered HTML is causing the animation to break eventhough the html has nothing to do with the RADPanelBar control.

[Paul]

Hello Satish,

Unfortunately, we cannot provide any fix for this old version of RadPanelBar. I'd suggest you upgrade to the latest version of RadControls for ASP.NET AJAX and see how it goes.

Regards,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Satish]

Hi Paul

Thank you for the quick reply. What is the latest version of the RADPanelBar for ASP.NET AJAX? The version i am using is ASP.NET AJAX Q2 2008 (2008.2.1001.35)

Thank you

Satish

[Paul]

Hi Satish,

You can check under Home / Your Account / Free Trials section in your profile.

Kind regards,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Veenu]

Hi,

I'm using RadPanel from Telerik RadControls for ASP.Net AJAX 2009 R1, and I've exactly the same issue.
I've a page with setting in header as 

<!

 

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >

 

I placed the animation settings in the RadPanelBar, but the PanelBar is empty.

<

 

telerik:RadPanelBar OnClientMouseOver="OnRadPanelBarMouseOverHandler" OnClientMouseOut="OnRadPanelBarMouseOutHandler"

 

 

EnableEmbeddedSkins="false" EnableAjaxSkinRendering="true" Skin="SNetMenu" Width="180"

 

 

ID="rpbMenu" runat="server" ExpandMode="FullExpandedItem" CollapseAnimation-Type="linear"

 

 

CollapseAnimation-Duration="500" ExpandAnimation-Duration="500" ExpandAnimation-Type="linear">

 

 

</telerik:RadPanelBar>

My requirement is to create PanelSections at runtime, so I add them via CodeBehind as below:

 

RadPanelItem

 

rpiTemp = new RadPanelItem();

 

 

if(!blnEmptyAccordion) rpiTemp.Controls.Add(objRadMenu); //PanelItem has a dynamically created RadMenu inside it.

 

((

RadPanelItem)rpbMenu.Items[intSectionCount]).Items.Add(rpiTemp);

 

 

But when the PanelBars are clicked, there is no animation and there is an abrupt hiding of one section and the other section is shown - as if it is a simple JS-based show/hide!

Can you please check and provide a solution? The application goes to production in one month and we've this issue reported by client. :(

Best Regards
Veenu Munjal

[Paul]

Hello Veenu,

I'm afraid we could not be of much help unless we reproduce the issue on our side. It will be best if you can open a support ticket and send us a simple running project (incl. your custom skin, CSS, images, DB backup if needed and so on) demonstrating the problem (and step-by-step instructions on doing so). In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.

Kind regards,
Paul
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.

[Veenu]

Hi,

I have raised the ticket (ID- 279106)

Please resolve the issue asap

Thanks

[Will]

I have run into this with several controls and Telerik actually handles it better than most.  It's a little choppy but better than any I have seen.

The problem is without the DocType being given (not sure about the "transitional" ones) the browser will run in Quirks mode (think Ulta-Compatability mode).  This cause issues will all kinds of animation and coolness in todays browsers/XHTML/CSS.  Basicly your browser can't use all it's nifty features because it is not adhearing to a recent standard.

I've run into this on SharePoint many times (2003&2007 can't work with DocType being specified).  It's just something you have to work around.

Anyhow, my 2 cents.

[Karl]

I've just been asked to look into this issue thats occuring on a new site we're building.

I see that this post was started in 2009, and now we're in 2011 and just wondered why it still hasn't been fixed?

[Yana]

Hello Karl,

We've fixed a similar issue in the latest release (Q3 SP2), could you please download it and give it a try?
If you still experience this issue, please sens us more details in order to reproduce it.  Thanks

Best wishes,
Yana
the Telerik team

[Karl]

Thanks for the reply Yana.

I've been to our company's download page and can only see a download for version 2010.3.1317 which is the version we have already. Is there a separate link to the Q3 SP2 download? If so, could you send it to me please?

Thanks

[Yana]

Hello Karl,

This is exactly the SP2 release, can you please provide us with more information about the issue you're experiencing?

All the best,
Yana
the Telerik team

[Karl]

I have a dynamic number of RadPanelItems in a RadPanelBar, and each one has a ContentTemplate (due to the fact that the number of items is dynamic) applied that builds a grid. Each grid in my example has anywhere from 5 to 50 rows in them.

When I click on a panel item to expand it, the expand animate is quite jerky. The same can be said for the collapse animation.

If I Comment out the line at the top of the ASPX page that reads

 

 

<!

 

 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

 

 

 

 

Then the animation suddenly becomes extremely smooth, but the rest of the site breaks, including, but not limited to, the stylesheets, making the site look awful.
I've tested the required functionality with sample data using JQuery and divs ad it seems to run much smoother with the line above in my code than it does with the Teleriks tools.

[Yana]

Hello Karl,

Could you please send us an example demonstrating the issue as we're not able to reproduce it ? Also which browser are you using? Thanks in advance

All the best,
Yana
the Telerik team

[Francis]

Hi, 
This issue has now been known for 3 years and still no fix?

The animation is slick with Firefox or Chrome but terrible with IE.
Please provide a fix or workaround soon.

Thanks

[Kate]

Hi Francis,

Can you please elaborate on the issue that you get since I am not sure what your exact implementation is therefore I cannot provide you with specific suggestions? Can you also clarify the version of the controls that you are using?

Kind regards,
Kate
the Telerik team

[Francis]

Telerik version:  RadControls for ASP.NET AJAX version Q2 2012.
Problem: The animation is lagging as hell in InternetExplorer 9 but neat in Chrome and Firefox.

ASPX code:

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


<telerik:RadPanelBar ID="mainPanelBar" Runat="server" Width="100%" ExpandMode="MultipleExpandedItems" Skin="Web20">
    <CollapseAnimation Duration="0" Type="None" />
    <ExpandAnimation Duration="0" Type="None" />
    <Items>
        <telerik:RadPanelItem runat="server" Text="Vignette" Value="Vignette">
        <Items>
            <telerik:RadPanelItem>
            <ItemTemplate>
                <wuc:Vignette ID="itemVignette" runat="server"/>
            </ItemTemplate>
            </telerik:RadPanelItem>
        </Items>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem runat="server" Expanded="true" Text="Contenu" Value="Contenu">
        <Items>
            <telerik:RadPanelItem>
            <ItemTemplate>
                <wuc:Contenu ID="itemContenu" runat="server"/>
            </ItemTemplate>
            </telerik:RadPanelItem>
        </Items>
        </telerik:RadPanelItem>
    ...

        <telerik:RadPanelItem runat="server" Text="Vérification du Comité d'épreuve" Value="Verification">
        <Items>
            <telerik:RadPanelItem>
            <ItemTemplate>
                <wuc:Verification ID="itemVerification" runat="server"/>
            </ItemTemplate>
            </telerik:RadPanelItem>
        </Items>
        </telerik:RadPanelItem>
    </Items>
</telerik:RadPanelBar>

So each RadPanelItem contains a certain WebUserControl.

[Kate]

Hi Francis,

Thank you for the code provided. I tested in in IE7, 8, 9, Chrome and FireFox but I get all the same look in all of the browsers. Please refer to the video here that demonstrates the look that I get from my side. 

Kind regards,
Kate
the Telerik team

[Francis]

Hi Kate,

The flickering problem looks to be mainly caused by rendering all the RadPanelItem's Content before it's open. So I guess you won't see what I meant by using only a label.

I suggest you use WebUserControls with a normal form (7-8 labels and textboxes). What you'll see is, while the bottom of the radpanelitem is not yet displayed (while collapsing), the labels and textboxes will be displayed.

(See attached printscreens).

[Kate]

Hello Francis,

I tested the scenario that you describe with a custom user control as well and still can not replicate the problematic behavior (see the attached page). Can you please open a support ticket and send me a simplified runnable page that I can test locally and help you out?

All the best,
Kate
the Telerik team