Tuesday, August 17, 2010

How to make SharePoint 2010 Content Query Web Part (CQWP) AJAX Enabled

How to make SharePoint 2010 Content Query Web Part (CQWP) AJAX Enabled

Those of you reading this post and have not yet explored the newly added AJAX options in the List View Web Parts in SharePoint 2010, they come with a category in the web part properties for "AJAX Options".

Enabling these options in the List View Web Part allows asynchronous load, update and refresh of the content being displayed. For ex: As highlighted in the image below, a "refresh" button is added if the option "Show Manual Refresh Button".

Unfortunately the categories that contain the AJAX options is not found in the Content Query Web Part popularly known as "CQWP" by sharepointers.

Fortunately as the CQWP inherits from the Data Form Web Part, the AJAX options are natively available in it. When you export a CQWP and edit it in a compatible application such as notepad, you will find the below properties:

<property name="InitialAsyncDataFetch" type="bool">False</property>
<property name="AsyncRefresh" type="bool">False</property>
<property name="ManualRefresh" type="bool">False</property>
<property name="AutoRefresh" type="bool">False</property>
<property name="AutoRefreshInterval" type="int">60</property>

The above properties map as below:

InitialAsyncDataFetch: Enable Asynchronous Load

AsyncRefresh: Enable Asynchronous Update
ManualRefresh: Show Manual Refresh Button
AutoRefresh: Enable Asynchronous Automatic Refresh
AutoRefreshInterveral: Automatic Refresh Interval (seconds)

After setting the property "InitialAsyncDataFetch" to true, the web part loaded asynchronously as below:

Hope that this helps somebody