CYCLOMEDIA

• Name TabPanel
• CSS Class CC_TabPanel
• Type NA

Groups Panels together using a Tab-like interface, all you need to do is wrap this control around a set of Panels and set their Text properties to the text you want their tab/button to display. If a button press causes the form to validate then a tab who's controls are hidden - but invalid - will show the "invalid" icon against the tab button itself, and these icons will remain in place while switching tabs.

The Tabpanel will normally use javascript to switch tabs unless it is either not available on the client or you have enabled NoScript for the TabPanel, Page or Site.

However if you have ValidatePanels set to True but the Form (or Site) has ClientValidate set to False then the TabPanel will use postbacks to switch tabs in order for ValidatePanels to function correctly.

TabPanels can also be used outside of a form, and when combined with the NoScript parameter will use GET requests to switch panels, preserving any querystring you already have set. This also lends itself to the ability to override any POST action to set a TabPanel's Panel via the querystring, simply send "?[TabPanelID]___CurrentPanel=[PanelID]"

Accessibility Tip : Include a sub-heading within each tabbed panel instead of relying on the tab-button to indicate the current selection. This will help screen readers provide the correct emphasis. Also TabPanels will normally render the HTML for all child panels in one go with Javascript used to perform the switching. In this case the sub-headings will help divide a non-styled linear page into an effective set of sub-sections for users with a custom style sheet.

The below example shows a two-panel tab setup allowing the form to be broken up into smaller chunks.

ASPX

<chan:Form runat="server" id="frmOne" anchor="true">
	
	<chan:TabPanel runat="server" id="tbpOne" validatepanels="true" persist="true" >
	
		<chan:Panel runat="server" id="pnlSummary" text="Summary" >
	
			<table>
			<tr>
				<th>First Name</th>
				<td><chan:TextBox runat="server" id="txtFirstName" mandatory="true" maxlength="20" /></td>
			</tr>
			<tr>
				<th>Last Name</th>
				<td><chan:TextBox runat="server" id="txtLastName" maxlength="20" /></td>
			</tr>
			</table>
			
		</chan:Panel>	
		
		<chan:Panel runat="server" id="pnlContents" text="Contents" >
			
			<table>
			<tr>
				<th colspan="2">Contents</th>
			</tr>
			<tr>
				<td colspan="2"><chan:TextBox runat="server" id="txtContents" mandatory="true" maxlength="2000" multiline="true"/></td>
			</tr>
			</table>
			
		</chan:Panel>
	
	</chan:TabPanel>	

	<chan:Button runat="server" id="btnSubmit" text="Submit" ValidateForm="true"/>

</chan:Form>