or
<%@ Page Title="" Language="vb" AutoEventWireup="false" CodeBehind="p_TabShifing.aspx.vb" Inherits="MySolution.p_TabShifing" %>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
id
=
"aspHead"
runat
=
"server"
>
<
title
runat
=
"server"
id
=
"aspTitle"
>Tab Shifting Demo</
title
>
<
style
type
=
"text/css"
>
.divTitleBar {
overflow: hidden;
position: relative;
height: 25px;
background: #FFFFFF;
font: bold 16pt arial;
text-align: center;
}
.divMenuBar {
overflow: visible;
height: 27px;
border-bottom: solid 3px #FFFFFF;
background-color: #336699;
font: bold 10pt arial;
}
.divTabStrip {
overflow: hidden;
position: relative;
height: 22px;
overflow: hidden;
padding-top: 4px;
vertical-align: middle;
background-color: #B0C4DE;
}
.lpFull {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
text-align: center;
z-index: 9999;
}
.tabsContainer, .rspTabsContainer {
background: #B0C4DE !important;
border-right: #336699 1px solid !important;
}
.Navigation_Title {
font-size: 10pt;
padding: 5px 9px 5px 21px;
color: #FFFFFF;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
height: 15px;
background: #336699 url(../Telerik/PanelBar/ArrowDownWhite.gif) no-repeat 9px 9px !important;
}
.RadPanelBar_B .rpTemplate {
background: #B0C4DE !important;
}
.RadPanelBar_B .rpRootGroup .rpText {
background-position: 35px 9px;
margin-left: 17px !important;
margin-right: 2px !important;
padding-left: 47px !important;
}
.RadPanelBar_B .rpRootGroup .rpExpandable .rpText {
background-position: 35px 9px;
}
.RadPanelBar_B .rpRootGroup .rpExpandable:Hover .rpText {
background-position: 35px 9px;
}
.RadPanelBar_B .rpRootGroup .rpExpanded .rpText {
background-position: 35px 9px;
}
</
style
>
<
script
language
=
"javascript"
type
=
"text/javascript"
>
function ajaxStartReq(s, e) {
}
function ajaxEndResp(s, e) {
}
function spl_Loaded(s, e) {
s.get_element().style.visibility = 'inherit';
}
</
script
>
</
head
>
<
body
>
<
form
id
=
"aspForm"
runat
=
"server"
>
<
telerik:RadStyleSheetManager
runat
=
"server"
ID
=
"styleMgr"
EnableStyleSheetCombine
=
"false"
>
</
telerik:RadStyleSheetManager
>
<
telerik:RadScriptManager
runat
=
"server"
ID
=
"scrptMgr"
AsyncPostBackTimeout
=
"600"
EnableScriptCombine
=
"false"
ScriptMode
=
"Release"
>
<
Scripts
>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.Core.js"
/>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQuery.js"
/>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQueryInclude.js"
/>
</
Scripts
>
</
telerik:RadScriptManager
>
<
div
runat
=
"server"
id
=
"divHdr"
class
=
"divTitleBar"
>
Tab Shifting Demo
</
div
>
<
div
class
=
"divMenuBar"
>
</
div
>
<
telerik:RadAjaxManager
ID
=
"axMgr"
runat
=
"server"
EnablePageHeadUpdate
=
"False"
UpdatePanelsRenderMode
=
"Inline"
ClientEvents-OnRequestStart
=
"ajaxStartReq"
ClientEvents-OnResponseEnd
=
"ajaxEndResp"
DefaultLoadingPanelID
=
"axLP"
>
</
telerik:RadAjaxManager
>
<
telerik:RadAjaxLoadingPanel
runat
=
"server"
ID
=
"RadAjaxLoadingPanel1"
IsSticky
=
"true"
CssClass
=
"lpFull"
BackgroundPosition
=
"Center"
Transparency
=
"45"
BackColor
=
"Gainsboro"
InitialDelayTime
=
"600"
>
<
img
src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
alt="Loading..." />
</
telerik:RadAjaxLoadingPanel
>
<
telerik:RadSplitter
runat
=
"server"
ID
=
"splM"
SkinID
=
"BlueBT"
OnClientLoad
=
"spl_Loaded"
VisibleDuringInit
=
"false"
>
<
telerik:RadPane
runat
=
"server"
ID
=
"pNav"
SkinID
=
"pLNav"
Height
=
"100%"
>
<
telerik:RadAjaxPanel
runat
=
"server"
ID
=
"rapBody"
>
<
telerik:RadAjaxPanel
runat
=
"server"
ID
=
"rapNav"
>
<
div
id
=
"DivSLZone"
runat
=
"server"
style="float: left; clear: none; width: 22px;
height: 100%;"
class
=
"tabsContainer"
>
<
telerik:RadSlidingZone
ID
=
"slZone"
runat
=
"server"
SlideDirection
=
"Right"
ClickToOpen
=
"true"
Width
=
"22"
>
<
telerik:RadSlidingPane
ID
=
"slPaneLoc"
Title
=
"Slider Panel"
runat
=
"server"
Width
=
"240"
EnableDock
=
"false"
Height
=
"100%"
MinWidth
=
"100"
Style
=
"z-index: 1;"
>
<
telerik:RadAjaxPanel
runat
=
"server"
ID
=
"rapLoc"
>
Slider Panel
</
telerik:RadAjaxPanel
>
</
telerik:RadSlidingPane
>
</
telerik:RadSlidingZone
>
</
div
>
</
telerik:RadAjaxPanel
>
<
div
runat
=
"server"
id
=
"divNav"
class
=
"Navigation_Title"
>
Fake Root Panel
</
div
>
<
div
id
=
"divPnlBar"
runat
=
"server"
>
<
telerik:RadPanelBar
runat
=
"server"
ID
=
"pbPnlBar"
CssClass
=
"RadPanelBar_B"
Height
=
"96%"
Width
=
"100%"
Style
=
"width: auto; position: static; border: 0;"
BackColor
=
"Transparent"
ExpandMode
=
"FullExpandedItem"
>
<
CollapseAnimation
Type
=
"OutQuint"
/>
<
ExpandAnimation
Type
=
"InQuint"
/>
<
Items
>
<
telerik:RadPanelItem
Text
=
"Pane 1"
Expanded
=
"true"
>
<
Items
>
<
telerik:RadPanelItem
>
<
ItemTemplate
>
<
telerik:RadAjaxPanel
runat
=
"server"
ID
=
"rapAjax"
>
Panel 1
</
telerik:RadAjaxPanel
>
</
ItemTemplate
>
</
telerik:RadPanelItem
>
</
Items
>
</
telerik:RadPanelItem
>
<
telerik:RadPanelItem
Text
=
"Panel 2"
>
<
Items
>
<
telerik:RadPanelItem
>
<
ItemTemplate
>
<
telerik:RadAjaxPanel
runat
=
"server"
ID
=
"rapAjax"
>
Panel 2
</
telerik:RadAjaxPanel
>
</
ItemTemplate
>
</
telerik:RadPanelItem
>
</
Items
>
</
telerik:RadPanelItem
>
<
telerik:RadPanelItem
Text
=
"Panel 3"
>
<
Items
>
<
telerik:RadPanelItem
>
<
ItemTemplate
>
<
telerik:RadAjaxPanel
runat
=
"server"
ID
=
"rapAjax"
>
Panel 3
</
telerik:RadAjaxPanel
>
</
ItemTemplate
>
</
telerik:RadPanelItem
>
</
Items
>
</
telerik:RadPanelItem
>
</
Items
>
</
telerik:RadPanelBar
>
</
div
>
</
telerik:RadAjaxPanel
>
</
telerik:RadPane
>
<
telerik:RadSplitBar
runat
=
"server"
ID
=
"sBar1"
CollapseMode
=
"Forward"
EnableResize
=
"true"
/>
<
telerik:RadPane
runat
=
"server"
ID
=
"pContent"
Scrolling
=
"none"
BackColor
=
"white"
>
<
telerik:RadAjaxLoadingPanel
ID
=
"axLP"
runat
=
"server"
IsSticky
=
"true"
BackgroundPosition
=
"Center"
Transparency
=
"45"
BackColor
=
"Gainsboro"
Style="top: 0; left: 0; height: 100%;
z-index: 0 !important;">
<
table
style
=
"height: 100%; width: 100%"
border
=
"0"
>
<
tr
>
<
td
width
=
"100%"
align
=
"center"
valign
=
"middle"
>
<
img
src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
alt="Loading..." style="border: 0px;" />
</
td
>
</
tr
>
</
table
>
</
telerik:RadAjaxLoadingPanel
>
<
div
class
=
"divTabStrip"
>
<
telerik:RadTabStrip
runat
=
"server"
ID
=
"tsPage"
Height
=
"40px"
SelectedIndex
=
"0"
PerTabScrolling
=
"True"
ClickSelectedTab
=
"True"
ScrollChildren
=
"True"
ScrollButtonsPosition
=
"Middle"
MultiPageID
=
"RadMultiPage1"
OnClientTabSelected
=
"ToggleDockPane"
>
<
Tabs
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Tab 1"
Value
=
"t1"
Width
=
"100px"
PageViewID
=
"pv1"
>
</
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Tab 2"
Value
=
"t2"
Width
=
"100px"
PageViewID
=
"pv2"
>
</
telerik:RadTab
>
</
Tabs
>
</
telerik:RadTabStrip
>
</
div
>
<
telerik:RadMultiPage
runat
=
"server"
ID
=
"RadMultiPage1"
SelectedIndex
=
"0"
>
<
telerik:RadPageView
runat
=
"server"
ID
=
"pv1"
>
Tab 1
</
telerik:RadPageView
>
<
telerik:RadPageView
runat
=
"server"
ID
=
"pv2"
>
Tab 2
</
telerik:RadPageView
>
</
telerik:RadMultiPage
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
form
>
</
body
>
</
html
>
<
script
language
=
"javascript"
type
=
"text/javascript"
>
function ToggleDockPane(sender, args) {
var tabStrip = $find("<%= Me.tsPage.ClientID %>");
var slidingZone = $find("<%= Me.slZone.ClientID %>");
var expandedPaneId = slidingZone.get_expandedPaneId();
if (args.get_tab().get_value() == "t2") {
if (expandedPaneId == null || expandedPaneId != "slPaneLoc") {
slidingZone.expandPane("slPaneLoc");
}
} else {
slidingZone.collapsePane("slPaneLoc");
}
}
</
script
>
Imports
Telerik.Web.UI
Public
Class
p_TabShifing
Inherits
System.Web.UI.Page
Private
Sub
Page_Load(sender
As
Object
, e
As
System.EventArgs)
Handles
Me
.Load
Ajaxify()
End
Sub
Private
Sub
tsPage_TabClick(sender
As
Object
, e
As
Telerik.Web.UI.RadTabStripEventArgs)
Handles
tsPage.TabClick
System.Threading.Thread.Sleep(3000)
End
Sub
Private
Sub
Ajaxify()
Dim
axSett
As
AjaxSetting =
New
AjaxSetting(
Me
.tsPage.UniqueID)
axSett.UpdatedControls.Add(
New
AjaxUpdatedControl(
Me
.tsPage.UniqueID,
Me
.axLP.UniqueID))
axSett.UpdatedControls.Add(
New
AjaxUpdatedControl(
Me
.RadMultiPage1.UniqueID,
String
.Empty))
axMgr.AjaxSettings.Add(axSett)
End
Sub
End
Class
function doClear() {
var dataSource = [];
$find('<%=radGridAppointment.ClientID %>').get_masterTableView().set_dataSource(dataSource);
$find('<%=radGridAppointment.ClientID %>').get_masterTableView().dataBind();
}
The radGridAppointment does being cleared successfully, but how come the default NoRecordsTemplate (No records to display.) is not shown? I need the this template to be shown as well, instead of clearing the grid only.