Thursday, January 19, 2012

Sharepoint 2010 - Ajax List Web Part

I need web part that read from Site Collection, each Subsite, each Document Library, each Document, and return list of latest Documents of the entire Site Collection.
Not very hard to develop, but it's very very bad in performance.. Web Part page take a long time to render.
So the ajax idea. But how to?
I found no way to expose ajax properties in tool panel of WP developed in VStudio.
If you know how to.... write me, please!

I checked out many posts, forums, articles about how to integrate Ajax Toolkit in Sharepoint.
Then I do my way.

I referenced Ajax Toolkit dll in my project.
Download the right toolkit for Sharepoint here: http://ajaxcontroltoolkit.codeplex.com/releases/view/33804.

To use the Ajax Control Toolkit in any web part control add the following lines to register the Ajax Control Toolkit namespace:

<%@ Register Assembly="AjaxControlToolkit, Version=3.0.30930.28736,
 Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"
Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

I see article that says to add this in master.page and substitute original scriptmanager with a new one that use prefix ajaxToolkit (http://ranaictiu-technicalblog.blogspot.com/2010/08/ajax-control-toolkit-with-sharepoint.html). I'm not sure that it needed, I did both but works anywhere.

Now you can use <asp:UpdatePanel> in your Visual Web Part.

Here my code with a simple explanation:



<asp:UpdatePanel ID="UpdatePanelDocuments" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
    <asp:Timer runat="server" id="TimerDocuments" Interval="2000" OnTick="TimerDocuments_Tick"></asp:Timer>
    <div style="width:100%;">
<SharePoint:SPGridView ID="oGrid" runat="server" AutoGenerateColumns="false" CssClass="ms-listviewtable">
    <RowStyle CssClass="ms-itmhover" />
    <AlternatingRowStyle CssClass="ms-alternating ms-itmhover" />
    <HeaderStyle CssClass="ms-viewheadertr ms-vhltr" />
    <PagerStyle CssClass="document_pager" />
        <Columns>
        ...
        </Columns>
    </SharePoint:SPGridView>
    </div>
    <div id="DivImgLoadingDocuments" runat="server" style="padding:10px;"><img src="/_Layouts/Images/kpiprogressbar.gif" alt="Caricamento Documenti..." runat="server" id="ImgLoadingDocuments" /></div>
    </ContentTemplate>
 </asp:UpdatePanel>

The <asp:Timer> control is for start loading (and the updatepanel update) after 2 seconds: in the code behind, the event onTick set the timer to disable, because we don't need to reload again!

The <div> with the progress image will be hidden after load is completed.

The <SPGridView> is rendered in ajax mode.



I'm pretty sure that exists a better method to do this Ajax List but I've found this and it's all I want.