AjaxControlToolKit-Tab Panel

These days i got a chance to work on real cool stuff using AJAX control Toolkit, i used Tab Panel,CollapsiblePanelExtender and also Bing Maps AJAX Control, Version6.3. .

You will be seeing some more stuff on my blog in comming weeks on these controls, for now i would like to share something about TabPanel.

Below code will display list of data in one tab and Map on other Tab, based on search performed in previous page.

For this i used Design time to work with Tabcontainer and 2 Tab panels, check the below sample, if you need any more details leave a comment
<asp:toolkitscriptmanager id="ToolkitScriptManager1" runat="server" enablepagemethods="true">
</asp:toolkitscriptmanager>
<asp:tabcontainer id="TabContainer1" runat="server" activetabindex="1" cssclass="ajax__tab_xp"
autopostback="true" onactivetabchanged="TabContainer1_ActiveTabChanged" width="100%"
onclientactivetabchanged="LoadMap">
<asp:TabPanel runat="server" HeaderText="List View" ID="tbpanleList" TabIndex="0">
<HeaderTemplate>
List View
</HeaderTemplate>
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False">
<ContentTemplate>
<!--Display the results here using Grid/Table-->
</ContentTemplate>
<Triggers>
<!--- Place any events for implementing callback using update panle defined above , this update panel will be for this Tab Panel--->
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="tbpanleMapView" HeaderText="Map View" runat="server" TabIndex="1">
<HeaderTemplate>
Map View
</HeaderTemplate>
<ContentTemplate>
<div style="position: relative; width: 700px; height: 450px;" id="mapDiv" " />
</div>
<br />
</ContentTemplate>
</asp:TabPanel>
</asp:tabcontainer>

:)