0

I have 2 Ajax collapsiblePanels one below the other. The first one has a repeater inside it and the second has a gridview. The JS function for both is exactly the same. The problem is, the animation is smooth for the second one, but not the first. I tried even setting extreme values for fps and duration, but not even a budge, as if they dont apply to it at all. What could be the reason.

JS:

function pageLoad()
{
  var collPanel = $find("<%=CollapsiblePanelExtender1.ClientID%>");
  if(!collPanel) {return;}
  collPanel._animation._fps=35;
  collPanel._animation._duration=0.3;
}

ASPX:

<div id="pHeader" runat="server" class="cpHeader">

  <span style="float:left"> History </span>
  <span style="float:right"><asp:Image id="imgArrows" runat="server" 
   width="17px" height="17px" ImageAlign="middle"/></span>
  <div style="clear:both"></div>
</div>

<asp:Panel id="pBody" runat="server" height="200px" width="100%" 
 scrollbars="vertical"  class="cpBody">

<asp:Repeater runat="server" id="rphistory">....</asp:repeater>
</asp:panel>

<asp:CollapsiblePanelExtender id="CollapsiblePanelExtender1" runat="server" 
 targetcontrolid="pBody" collapsecontrolid="pHeader"
expandcontrolid="pHeader" collapsed="true" collapsedsize="0"
 scrollcontents="false" imagecontrolid="imgArrows" 
  expandedimage="~/Images/expand.jpg" collapsedimage="~/Images/collapse.jpg">
</asp:CollapsiblePanelExtender>
Ruby
  • 949
  • 7
  • 31
  • 68

1 Answers1

1

How large is the GridView?

It could be caused by the fact that the GridView is essentially a bunch of HTML tags that build a table. If the table is very large the browser has to wait to render the entire table (the entire table must be rendered (even if hidden from the user) first) - then the animation should clean smooth

Nick
  • 234
  • 2
  • 11
  • Its a simple gridview with 6 columns and 7 rows. Only labels for all fields. The gridview animation is smooth, but not the repeaters. So, is it taking time to render the repeater. But anyways, I should be able to make it smooth by some animation values. right? or should I live with that? – Ruby Dec 28 '13 at 08:43
  • So you have a super small grid (assuming you're not loading giant images in them) so the GV is good to go. You can do a $('#{ID}').fadeIn('slow'); and that should work. Repeaters should be quick to render, unless again - you're rendering full size images and not thumbnails or large tables – Nick Dec 30 '13 at 19:00