Using Data View Web Part to achieve A-Z index functionality

26 Nov

While working with one of the clients recently, I came across this common requirement of displaying all of the contacts in  an A-Z index format. You may also need a similar functionality in order to built site maps or other A to Z listings like contact list or course list. With little bit of JavaScript and Data View web part, this functionality can be achieved fairly easily. A pure XSLT based solution of this requirement is provided here.

Let us create a custom list first and name it ‘Courses’

Add a new column to it let say ‘credit hours’ and then add some courses to the list

Now create a page in the site with a suitable name.

Choose a blank web part page template for this page

Now edit the page in SharePoint designer

In order to edit this page in SharePoint Designer, you may have to detach the page from its layout

And then edit the file in advance mode

Now go to Insert -> Display Item form and select the Courses list. This will render the data view for the courses list.

For the sake of this example we will show the Course Name and Credit Hours in the listings so go to Add Remove columns and select these two columns. You can select different columns as per requirement.

Also set the paging to Display All Items and sort the data view with Title in ascending manner.

Style the single data row of data view as per need modifying the XSLT

Now drop html form web part on the page on top of the Course List web part. We are using this as a container to insert some JavaScript into the page.

Go into the Code view and remove the controls from this web part. And place the following script in the CDATA section.

<script language=”javascript”>

function SetURL (char)

{return “AZIndex.aspx?StartsWith=” + char;}

var startCharacter = ‘A’;

var endCharacter = ‘Z’;

var startCode = startCharacter.charCodeAt(0);

var endCode = endCharacter.charCodeAt(0);

var result = ”;

for (var i = startCode; i <= endCode; i++) {

result += “<a class=’alphalink’ href='” + SetURL (String.fromCharCode(i))  + “‘>” + String.fromCharCode(i)  +  “</a>&nbsp;”;




This script will generate a list of hyper links with query string for each alphabet. Make sure that the page file name AZIndex.aspx referred in function SetURL() should be the name of your page.

In SharePoint Designer, now again select the Course list web part in Design view. In Options, create a parameter of type query string and give it a name pmAlphabet. This will refer to StartsWith variable in the query string.

Now we have to filter the Course web part. Click Filter option in the menu and then configure the criteria such that Course Title begins with the query string parameter pmAlphabet.

That’s all. Click OK, save the page, and preview in browser. And your A-Z index page is ready!