How to set up Google maps + data source + pager + repeater to work together

Kentico Support Engineer — Jun 13, 2011

If you want to display Google maps and a repeater together with one pager (so that if you change a page, both repeater and Google maps change the displayed items), you can follow this article.
Google maps web part is a specialized CMSRepeater control in fact. Thus the article explains how to make a data source control + UniPager + two viewers work together in general.

First of all, clone the Google maps web part like: Modifying the code of standard web parts.

Then you can add a Data source control, UniPager and the second viewer to the same control. The control’s template (.ascx) can look like:

<cms:CMSQueryDataSource ID="srcElem" runat="server" QueryName="cms.office.myselect" PageSize="1" />

<asp:Literal ID="ltlDesign" runat="server" />

<asp:Label runat="server" ID="lblError" Visible="false" />

<asp:Literal runat="server" ID="ltlBefore" EnableViewState="false" />

<cms:CMSRepeater ID="repItems" runat="server" EnableViewState="true" OnItemDataBound="repItems_ItemDataBound" DelayedLoading="true" StopProcessing="true" />

<asp:Literal runat="server" ID="ltlAfter" EnableViewState="false" />

<cms:UniPager ID="pager" runat="server" PageControl="test" PageSize="1" PagerMode="PostBack" >

<%-- UniPager templates --------------------------------------%>

</PageNumbersTemplate>

<%-- UniPager templates --------------------------------------%>

</cms:UniPager>

<cms:BasicRepeater ID="test" runat="server" />

The Data source control uses a custom query which you can specify in:

Site manager -> Development -> Document types -> edit Office -> Queries

The myselect query can look like:

SELECT * FROM View_CONTENT_Office_Joined where (SiteName LIKE 'CorporateSite')

That selects published Office documents from the sample Corporate site. You can change the site name to your requested one.

Please note that the repItems control is delayed (DelayedLoading="true" StopProcessing="true"). That is why it will load the same data source as the second viewer (test) later.

Then you need to change the code behind (.ascx.cs). First, you connect the test repeater to the Query Data source and load the proper transformation like:

protected override void OnInit(EventArgs e) {

base.OnInit(e);

this.test.ItemTemplate = CMSDataProperties.LoadTransformation(this, "cms.office.simple", false);

this.test.DataSource = srcElem.DataSource;

this.test.DataBind();

}

You can use a transformation name which you specify in:

Site manager -> Development -> Document types -> edit Office -> Transformations

The test repeater should work with the Query data source and pager now.

Second, we need to load data for the Google maps repeater (repItems). Add a code like this to the OnPreRender method:

protected override void OnPreRender(EventArgs e)

{

base.OnPreRender(e);

...

this.repItems.StopProcessing = false;

this.repItems.DataSource = test.DataSource;

this.repItems.DataBind();

}

It will load the same paged data to the repItems repeater. If you change the page, it will refresh both Google maps and the standard repeater to display the new items. Now you can use the new web part on your page template and check the result.

-hg-

See also: Using datasource web parts

Applies to: Kentico CMS 5.5 R2

Share this article on Twitter Facebook LinkedIn