I implemented a Rad Grid which contained two levels of information within a user control that is being rendered in SharePoint (MOSS 2007). I therefore used coding and markup as explained on the Telerik demo site here. When expanding the master rows to expose the "child" rows, the detail data is loaded on demand via the DetailTableDataBind event. In our situation this took a few seconds and therefore I wanted something to show that data was loading. Enter the Rad Ajax Loading Panel.
The RadAjaxLoadingPanel object looked like a great fit. By default it presents a nice loading animation similiar to what I have seen in Silverlight. I therefore attempted to implement the loading panel for my situation. I followed examples as explained here.
While running the example code locally within a .NET Framework environment, the Rad Ajax Loading Panel worked like a charm. However, when attempting to run the same code within SharePoint, I was not so lucky. At first I was seeing the loading panel on the first postback but never again and in certain configurations based on examples, I did not see it appear at all.
Finally, I was able to get it all to work within SharePoint. Here is how my markup ended up being structured:
1) First I declared the RadAjaxLoading Panel.
<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" MinDisplayTime="200" ZIndex="1" EnableTheming="false" Skin="Default">
</telerik:RadAjaxLoadingPanel>
2) Next I needed to wrap everything else within a RadAjaxPanel. I believe this was the key to having everything work in SharePoint.
<telerik:RadAjaxPanel runat="server" ID="AjaxPanel">
3) Now comes the RadAjaxManager which controls when to show the loading panel. <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
EnablePageHeadUpdate="False">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
4) Then I have all my grid goodness which I will spare all the details.
<telerik:RadGrid ID="RadGrid1" runat="server" Width="100%" ShowStatusBar="true" AutoGenerateColumns="False" AllowSorting="True" AllowMultiRowSelection="False"
AllowPaging="True" OnDetailTableDataBind="RadGrid1_DetailTableDataBind" OnItemDataBound="RadGrid1_ItemDataBound"
OnNeedDataSource="RadGrid1_NeedDataSource" EnableEmbeddedSkins="false" EnableViewState="true">
.......GRID MARKUP HERE
</telerik:RadGrid>
4) Finally I have the closing RadAjaxPanel tag.
</telerik:RadAjaxPanel>
This sequence of markup allowed the loading panel animation to display everytime there was a postback to get the detail data without refreshing the entire page within SharePoint. As I said above, I think the key was wrapping the Ajax Manager and the Rad Grid within a Rad Ajax Panel which was not needed or shown in the Telerik demos.
If you found this useful, please help support my SharePoint and .NET user group (Philly SNUG) by clicking on the logo below.The RadAjaxLoadingPanel object looked like a great fit. By default it presents a nice loading animation similiar to what I have seen in Silverlight. I therefore attempted to implement the loading panel for my situation. I followed examples as explained here.
While running the example code locally within a .NET Framework environment, the Rad Ajax Loading Panel worked like a charm. However, when attempting to run the same code within SharePoint, I was not so lucky. At first I was seeing the loading panel on the first postback but never again and in certain configurations based on examples, I did not see it appear at all.
Finally, I was able to get it all to work within SharePoint. Here is how my markup ended up being structured:
1) First I declared the RadAjaxLoading Panel.
<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" MinDisplayTime="200" ZIndex="1" EnableTheming="false" Skin="Default">
</telerik:RadAjaxLoadingPanel>
2) Next I needed to wrap everything else within a RadAjaxPanel. I believe this was the key to having everything work in SharePoint.
<telerik:RadAjaxPanel runat="server" ID="AjaxPanel">
3) Now comes the RadAjaxManager which controls when to show the loading panel. <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
EnablePageHeadUpdate="False">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
4) Then I have all my grid goodness which I will spare all the details.
<telerik:RadGrid ID="RadGrid1" runat="server" Width="100%" ShowStatusBar="true" AutoGenerateColumns="False" AllowSorting="True" AllowMultiRowSelection="False"
AllowPaging="True" OnDetailTableDataBind="RadGrid1_DetailTableDataBind" OnItemDataBound="RadGrid1_ItemDataBound"
OnNeedDataSource="RadGrid1_NeedDataSource" EnableEmbeddedSkins="false" EnableViewState="true">
.......GRID MARKUP HERE
</telerik:RadGrid>
4) Finally I have the closing RadAjaxPanel tag.
</telerik:RadAjaxPanel>
This sequence of markup allowed the loading panel animation to display everytime there was a postback to get the detail data without refreshing the entire page within SharePoint. As I said above, I think the key was wrapping the Ajax Manager and the Rad Grid within a Rad Ajax Panel which was not needed or shown in the Telerik demos.
Isn't your RadAjaxManager redundant as per: http://www.telerik.com/help/aspnet-ajax/ajax-controls-in-ajaxpanel-and-ajaxsettings.html
ReplyDeleteYes it probably is but for whatever SharePoint quirky reasons, I needed to code the markup as explained. Standalone, it worked fine either way but once in SharePoint 2007 it wouldn't work without both the Update Panels and the RadAjaxManager.
ReplyDeletehi, i used this solution but i changed a little, i wrapped radgrid within a radajaxpanel and it is working!
ReplyDelete