Customize List Header

Question

Hi Guys, I've been Binging for sometime to find a solid guide how to customize list header through Sharepoint Designer 2010 but none of them seems to work for me.

Can anyone share how easy this is to do in the designer.

Thanks in advance I really appreciate your help.

---

Cheers,

R2C3

-----------------------------------

starting sharepoint :)

Answer 1

Hi R2C3,

We cannot modify the Data View Web Part (DVWP) or XSLT List View Web Part display in a horizontal direction, so we need to create DVWPs separately for group1 and group2.

1. Create a table with 3 rows and 3 columns first. (Add Table Header and group header in first 2 rows.)

2. Go to last row, add 2 web part zones.

3. Insert a DVWP into these 2 web part zones separately.

4. Display the list data in these 2 DVWPs, add filters to them. (DVWP1 filter with group1, and DVWP2 filter with group2)

5. Modify table styles.

Best regards,
Emir

---

Emir Liu

TechNet Community Support

Answer 2

Hi

if you create the list table using shp designer and you are inserting for ex an Empty Data View, The DataViewWebPart can be customized like you asked

First goto code side and search this code:

<table border="0" width="100%" cellpadding="2" cellspacing="0">
					<tr valign="top">
						<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
							<th class="ms-vh" width="1%" nowrap="nowrap"></th>
						</xsl:if>
						

<th class="ms-vh" nowrap="nowrap">Col1</th>
<th class="ms-vh" nowrap="nowrap">Col2</th>

<th class="ms-vh" nowrap="nowrap">Col3</th>

 <th class="ms-vh" nowrap="nowrap">Col4</th>
<th class="ms-vh" nowrap="nowrap">Col5</th>

<th class="ms-vh" nowrap="nowrap">Col6</th></tr>

<xsl:call-template name="dvt_1.body"> <xsl:with-param name="Rows" select="$Rows"/> <xsl:with-param name="FirstRow" select="1" /> <xsl:with-param name="LastRow" select="$LastRow - $FirstRow + 1" /> </xsl:call-template> </table>

This code define how your table containg your list's items will looks like in the web page.

What you have to do is goto line

<xsl:call-template name="dvt_1.body">

Just before it, insert a new row, or how many rows do you like it for your list header

In your case ( without colours - you can apply colours with style="... "), the code that you should insert it is:

<tr><td collspan=6>List Group Heading</td></tr>

<tr><td colspan=3>Group1</td><td colspan=3>Group2</td></tr>

So, your code should looks like:

<table border="0" width="100%" cellpadding="2" cellspacing="0">
					<tr valign="top">
						<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
							<th class="ms-vh" width="1%" nowrap="nowrap"></th>
						</xsl:if>
						<th class="ms-vh" nowrap="nowrap">Col1</th>
						<th class="ms-vh" nowrap="nowrap">Col2</th>
						<th class="ms-vh" nowrap="nowrap">Col3</th>
     						<th class="ms-vh" nowrap="nowrap">Col4</th>
						<th class="ms-vh" nowrap="nowrap">Col5</th>
						<th class="ms-vh" nowrap="nowrap">Co;6</th>
					</tr>
						<tr><td colspan="6">List Group Heading</td></tr>
						<tr><td colspan="3">Group1</td><td colspan="3">Group2</td></tr>

					<xsl:call-template name="dvt_1.body">
						<xsl:with-param name="Rows" select="$Rows"/>
						<xsl:with-param name="FirstRow" select="1" />
						<xsl:with-param name="LastRow" select="$LastRow - $FirstRow + 1" />
					</xsl:call-template>
				</table>

---

Romeo Donca, Orange Romania (MCSE, MCTS, CCNA) Please Mark As Answer if my post solves your problem or Vote As Helpful if the post has been helpful for you.

Answer 3

Hi Emir,

Thanks for the excellent support.  It does prove my first attempt was correct by doing the old hack/workaround like the GridView header and group headers.

I don't really need to have multiple DVWPs in fact the purpose of having Groups was just to highlight columns according to its group and this totally avoid issues in term of Paging and group filtering as said.

The other point of interest doing that is how to have a flexible width size of Group 1 or Group 2 according to the underlying columns size.

---

Cheers,

R2C3

----------------------------------- starting  sharepoint :)

Answer 4

Hi R2C3,

After we create the table in step1, please modify its <table style="width: 100%"> property to <table style="width: auto">. Then the table width will contract and extend and contract follow DVWP columns.

Best regards,
Emir

---

Emir Liu

TechNet Community Support

Answer 5

@Emir

Hi,  Im not sure why the web part zone icon grayed out I tried recreating web part page but it wont let me.

@Romeo

Thanks I will try both and keep the thread updated.

Update: I created a Full Page, Vertical web part but I cant find the code you just quoted. 

---

Cheers, R2C3 ----------------------------------- starting sharepoint :)

Answer 6

Hi R2C3,

We cannot add web part zone within another web part zone, so please check whether there is already a web part zone outside the table.

Best regards,
Emir

---

Emir Liu

TechNet Community Support

Answer 7

Hi Emir, 

I agree with that. The issue being is that I'm using the normal editing mode which I need to switch to advance editing. And finally here it is.

Obviously I need to remove Add new item, row selector (box on the first column of each group) webpart title and add filters on the other group according to DVWP1. 

Thanks really appreciate your help.

---

Cheers, R2C3 ----------------------------------- starting sharepoint :)

Answer 8

Hi R2C3,

You can create a data view web part by clicking Insert > Data View > Empty Data View > Select you list instead of XSLT list view web part. Then there will no add new item and row selector on it.

Best regards,
Emir

---

Emir Liu

TechNet Community Support

Answer 9

Hi Emir, romeo,

Its fairly possible to achieved the formatting from your solution but I have doubt on it difference.

@romeo,

After adding Empty Data View and configure the Datasource I notice the Add new item hyperlink, editing toolbar and box selector is gone. I there a way to bring those function back? 

@Emir,

Yes I managed to add 2 DWVPs and create the column group accordingly. But also if you look at  the second DWVP (see image above) it contains selector and Add new item link which is no longer required since its already in the first DVWP. In addition if there will be a paging set on 1st DVWP how can I do a parallel paging on the 2nd DVWP?

Thanks in advance.

---

Cheers, R2C3

-----------------------------------

starting sharepoint :)