Hi all,
I see a lot of implementations and other chatter about this, but I never see full solutions. I've been at it this afternoon, but not for the first time. The best way to go, I found, is a splitter with 2 stacked panes. The top pane containing the radTabStrip, the bottom (body) pane with height=100% containing the RadMultiPage.
Problem is that in my application the user can select the skin. The top pane can be set to height=40px, but with a Touch skin this is not enough. Also, I now have a RadTabStrip with two rows, so the height is heigher.
so, the top pane should ajust it's height to the RadTabStrip, the bottom pane should fille up the splitter.
I have this kind of working using:
height: auto !important; for the top pane (useing CssClass)
but all kind of problem start happening here. The RadMultiPage is not showing, or there are no scrollbars while the height is heigher than screen.
I've also tried javascript. problem here is that RadTabStrip.offsetHeight always returnes the wrong offset the first time. in black skin ie it always returns 76px at load (all kinds of onClientLoad tried, splitter, pane, page and Splitter's OnClientResized, OnClientLoaded)
while the real offsetHeight = 53px. This happens with the glow skin to: 101 in stead of 63.
The second time (postback or resize browser) it returns the correct value.
So... What's the best appraotch?
ps: in my secenario there is always a postback. The splitter and script code are in a usercontrol that loads after a postback.
Erik
the aspx code:
I see a lot of implementations and other chatter about this, but I never see full solutions. I've been at it this afternoon, but not for the first time. The best way to go, I found, is a splitter with 2 stacked panes. The top pane containing the radTabStrip, the bottom (body) pane with height=100% containing the RadMultiPage.
Problem is that in my application the user can select the skin. The top pane can be set to height=40px, but with a Touch skin this is not enough. Also, I now have a RadTabStrip with two rows, so the height is heigher.
so, the top pane should ajust it's height to the RadTabStrip, the bottom pane should fille up the splitter.
I have this kind of working using:
height: auto !important; for the top pane (useing CssClass)
but all kind of problem start happening here. The RadMultiPage is not showing, or there are no scrollbars while the height is heigher than screen.
I've also tried javascript. problem here is that RadTabStrip.offsetHeight always returnes the wrong offset the first time. in black skin ie it always returns 76px at load (all kinds of onClientLoad tried, splitter, pane, page and Splitter's OnClientResized, OnClientLoaded)
while the real offsetHeight = 53px. This happens with the glow skin to: 101 in stead of 63.
The second time (postback or resize browser) it returns the correct value.
So... What's the best appraotch?
ps: in my secenario there is always a postback. The splitter and script code are in a usercontrol that loads after a postback.
Erik
the aspx code:
<
style
type
=
"text/css"
>
.SystemSettingsTable
{
border: 0;
}
.SystemSettingsTable tr
{
height: 35px;
}
.AutoHeightPane
{
height: auto !important;
}
.FullHeightPane
{
height: 100% !important;
}
</
style
>
<
telerik:RadScriptBlock
ID
=
"RadCodeBlock_Proovit_NetBas_Modules_SystemModules_SystemSettings"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
//
<![CDATA[
//alert('AA');
//var myPane = $get('<%= RadPane1.ClientID %>');
//var myMultipage = $get('<%= RadMultiPage1.ClientID %>');
//var myTabStrip = $get('<%= tabStrip1.ClientID %>');
//alert(myTabStrip.offsetHeight);
//alert('AAx');
$(document).ready(function () {
//var myPane = $get('<%= RadPane1.ClientID %>');
//var myMultipage = $get('<%= RadMultiPage1.ClientID %>');
var myTabStrip = $get('<%= tabStrip1.ClientID %>');
//alert(myTabStrip.offsetHeight);
//var newHeight = (myPane.offsetHeight - myTabStrip.offsetHeight);
//var myGrid = $get('<%= tbl_AccountSettings_Gerneral.ClientID %>');
//myMultipage.style.height = newHeight + 'px';
//myGrid.style.height = (newHeight - 60) + 'px';
// Within the ready function...
//Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (sender, args) {
// alert('CC');
//});
});
function TestOffsetHeight(sender, Args) {
alert(sender.id);
var myTabStrip = $get('<%= tabStrip1.ClientID %>');
alert(myTabStrip.offsetHeight);
}
//]]>
</
script
>
</
telerik:RadScriptBlock
>
<
telerik:RadSplitter
ID
=
"RadSplitter_Module"
BorderSize
=
"0"
BorderStyle
=
"None"
PanesBorderSize
=
"0"
Width
=
"100%"
Height
=
"100%"
Orientation
=
"Horizontal"
VisibleDuringInit
=
"false"
LiveResize
=
"False"
runat
=
"Server"
OnClientResized
=
"TestOffsetHeight"
OnClientLoaded
=
"TestOffsetHeight"
>
<
telerik:RadPane
ID
=
"RadPane1"
Width
=
"100%"
Scrolling
=
"None"
CssClass
=
"AutoHeightPane"
runat
=
"server"
>
<
telerik:RadTabStrip
ID
=
"tabStrip1"
runat
=
"server"
Style
=
"width: 100%;"
MultiPageID
=
"RadMultiPage1"
SelectedIndex
=
"0"
OnClientLoad
=
"TestOffsetHeight"
>
<
Tabs
>
<
telerik:RadTab
Text
=
"Account Settings"
Selected
=
"True"
runat
=
"server"
>
<
Tabs
>
<
telerik:RadTab
Text
=
"General"
Selected
=
"True"
PageViewID
=
"RadPageView_AccountSettings_Gerneral"
runat
=
"server"
/>
<
telerik:RadTab
Text
=
"Page2"
PageViewID
=
"RadPageView_AccountSettings_Page2"
runat
=
"server"
/>
</
Tabs
>
</
telerik:RadTab
>
<
telerik:RadTab
Text
=
"User Group Settings"
runat
=
"server"
>
<
Tabs
>
<
telerik:RadTab
Text
=
"General"
PageViewID
=
"RadPageView_UserGroupSettings_Gerneral"
runat
=
"server"
/>
<
telerik:RadTab
Text
=
"Menu"
PageViewID
=
"RadPageView_UserGroupSettings_Menu"
runat
=
"server"
/>
</
Tabs
>
</
telerik:RadTab
>
</
Tabs
>
</
telerik:RadTabStrip
>
</
telerik:RadPane
>
<
telerik:RadPane
ID
=
"RadPane2"
Width
=
"100%"
Height
=
"100%"
CssClass
=
"FullHeightPane"
Scrolling
=
"None"
BorderColor
=
"Red"
BorderStyle
=
"Solid"
BorderWidth
=
"1px"
BackColor
=
"Yellow"
runat
=
"server"
>
<
telerik:RadMultiPage
ID
=
"RadMultiPage1"
Height
=
"100%"
CssClass
=
"FullHeightPane"
SelectedIndex
=
"0"
ScrollBars
=
"Both"
runat
=
"server"
>
<
telerik:RadPageView
ID
=
"RadPageView_AccountSettings_Gerneral"
Selected
=
"True"
runat
=
"server"
>
<
table
id
=
"tbl_AccountSettings_Gerneral"
border
=
"0"
cellpadding
=
"0"
cellspacing
=
"0"
class
=
"SystemSettingsTable"
runat
=
"server"
>
<
colgroup
>
<
col
style
=
"white-space: nowrap;"
/>
<
col
style
=
"width: 15px;"
/>
<
col
style
=
"color: black;"
/>
</
colgroup
>
<
tr
>
<
td
>
<
nbui:Label
ID
=
"lbl_Account"
Text
=
"Account"
TextSurfix
=
":"
LanguageKey
=
"General.Account"
runat
=
"server"
/>3
</
td
>
<
td
>
</
td
>
<
td
>
<
telerik:RadDropDownTree
ID
=
"RadDropDownTree_Accounts"
AutoPostBack
=
"True"
DataTextField
=
"Name"
DataFieldID
=
"AccountId"
DataFieldParentID
=
"ParentAccountId"
DataValueField
=
"AccountId"
Width
=
"360px"
DefaultMessage
=
"(Please select...)"
ExpandNodeOnSingleClick
=
"false"
FullPathDelimiter
=
" » "
runat
=
"server"
>
<
DropDownSettings
Width
=
"360px"
Height
=
"400px"
/>
</
telerik:RadDropDownTree
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
nbui:Label
ID
=
"lbl_AccountMainUser"
Text
=
"Account's main user"
TextSurfix
=
":"
LanguageKey
=
"General.AccountsMainUser"
runat
=
"server"
/>
</
td
>
<
td
/>
<
td
>
<
telerik:RadDropDownList
ID
=
"rdl_SuperUser"
DataTextField
=
"FullNameLMF"
DataValueField
=
"ContactId"
DefaultMessage
=
"(Please select)"
Width
=
"360px"
DropDownWidth
=
"360"
DropDownHeight
=
"400"
runat
=
"server"
/>
</
td
>
</
tr
>
<
tr
>
<
td
colspan
=
"9"
>
<
telerik:RadButton
ID
=
"rbt_SaveAccountSettings"
Text
=
"Save Account Settings"
ButtonType
=
"LinkButton"
Font-Bold
=
"true"
Style
=
"margin-right: 20px;"
Icon-PrimaryIconCssClass
=
"rbSave"
runat
=
"server"
/>
</
td
>
</
tr
>
<
tr
>
<
td
colspan
=
"9"
>
<
hr
/>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
nbui:Label
ID
=
"lbl_UserGroup"
Text
=
"User group"
TextSurfix
=
":"
LanguageKey
=
"General.UserGroup"
runat
=
"server"
/>
</
td
>
<
td
>
</
td
>
<
td
>
<
telerik:RadDropDownTree
ID
=
"RadDropDownTree_UserGroups"
AutoPostBack
=
"True"
DataTextField
=
"Name"
DataFieldID
=
"UserGroupId"
DataFieldParentID
=
"ParentUserGroupId"
DataValueField
=
"UserGroupId"
Width
=
"360px"
DefaultMessage
=
"(Please select)"
ExpandNodeOnSingleClick
=
"False"
FullPathDelimiter
=
" » "
runat
=
"server"
>
<
DropDownSettings
Width
=
"360px"
Height
=
"400px"
AutoWidth
=
"Enabled"
/>
</
telerik:RadDropDownTree
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
nbui:Label
ID
=
"lbl_Options"
Text
=
"Options"
TextSurfix
=
":"
LanguageKey
=
"General.Options"
runat
=
"server"
/>
</
td
>
<
td
/>
<
td
>
<
telerik:RadButton
ID
=
"btn_HasMenu"
ToggleType
=
"CustomToggle"
ButtonType
=
"StandardButton"
AutoPostBack
=
"false"
Width
=
"100px"
runat
=
"server"
>
<
ToggleStates
>
<
telerik:RadButtonToggleState
Text
=
"Menu"
Value
=
"1"
/>
<
telerik:RadButtonToggleState
Text
=
"No Menu"
Value
=
"0"
/>
<
telerik:RadButtonToggleState
Text
=
"[Like Parent]"
Value
=
"^"
/>
</
ToggleStates
>
</
telerik:RadButton
>
<
telerik:RadButton
ID
=
"btn_HasLeftPanes"
ToggleType
=
"CustomToggle"
ButtonType
=
"StandardButton"
AutoPostBack
=
"false"
Width
=
"100px"
runat
=
"server"
>
<
ToggleStates
>
<
telerik:RadButtonToggleState
Text
=
"Left Panes"
Value
=
"1"
/>
<
telerik:RadButtonToggleState
Text
=
"No Left Panes"
Value
=
"0"
/>
<
telerik:RadButtonToggleState
Text
=
"[Like Parent]"
Value
=
"^"
/>
</
ToggleStates
>
</
telerik:RadButton
>
<
telerik:RadButton
ID
=
"btn_HasLeftNavigation"
ToggleType
=
"CustomToggle"
ButtonType
=
"StandardButton"
AutoPostBack
=
"false"
Width
=
"100px"
runat
=
"server"
>
<
ToggleStates
>
<
telerik:RadButtonToggleState
Text
=
"Left Navigation"
Value
=
"1"
/>
<
telerik:RadButtonToggleState
Text
=
"No Left Navigation"
Value
=
"0"
/>
<
telerik:RadButtonToggleState
Text
=
"[Like Parent]"
Value
=
"^"
/>
</
ToggleStates
>
</
telerik:RadButton
>
</
td
>
</
tr
>
<
tr
>
<
td
colspan
=
"9"
>
</
td
>
</
tr
>
<
tr
>
<
td
colspan
=
"9"
>
<
telerik:RadTreeList
ID
=
"RadTreeList_MenuRights"
DataKeyNames
=
"MenuItemId"
ParentDataKeyNames
=
"ParentMenuItemId"
Width
=
"800px"
Height
=
"600px"
AutoGenerateColumns
=
"false"
AllowMultiItemSelection
=
"true"
AllowSorting
=
"true"
AllowNaturalSort
=
"true"
runat
=
"server"
>
<
Columns
>
<
telerik:TreeListBoundColumn
DataField
=
"Caption"
UniqueName
=
"Caption"
HeaderText
=
"Caption"
HeaderStyle-Width
=
"100px"
ItemStyle-Wrap
=
"false"
/>
<
telerik:TreeListTemplateColumn
DataField
=
"Toggle"
UniqueName
=
"Toggle"
HeaderText
=
"Option"
HeaderStyle-Width
=
"120px"
HeaderStyle-HorizontalAlign
=
"Center"
ItemStyle-Wrap
=
"false"
ItemStyle-Height
=
"20px"
>
<
ItemTemplate
>
<
telerik:RadButton
ID
=
"btn_MenuItemToggleState"
ToggleType
=
"CustomToggle"
ButtonType
=
"StandardButton"
AutoPostBack
=
"false"
Width
=
"70px"
runat
=
"server"
>
<
ToggleStates
>
<
telerik:RadButtonToggleState
Text
=
"YES"
Value
=
"1"
/>
<
telerik:RadButtonToggleState
Text
=
"NO"
Value
=
"0"
/>
<
telerik:RadButtonToggleState
Text
=
"[Parent]"
Value
=
"^"
/>
</
ToggleStates
>
</
telerik:RadButton
>
[<
asp:Label
ID
=
"lbl_TestLabel"
Text
=
"?"
runat
=
"server"
/>]
</
ItemTemplate
>
</
telerik:TreeListTemplateColumn
>
<
telerik:TreeListBoundColumn
DataField
=
"Code"
UniqueName
=
"Code"
HeaderText
=
"Code"
HeaderStyle-Width
=
"100px"
ItemStyle-Wrap
=
"false"
/>
<
telerik:TreeListBoundColumn
DataField
=
"Name"
UniqueName
=
"Name"
HeaderText
=
"Name"
HeaderStyle-Width
=
"150px"
ItemStyle-Wrap
=
"false"
/>
<
telerik:TreeListBoundColumn
DataField
=
"MenuItemId"
UniqueName
=
"Id"
HeaderText
=
"Id"
HeaderStyle-Width
=
"40px"
HeaderStyle-HorizontalAlign
=
"Right"
HeaderStyle-ForeColor
=
"GrayText"
ItemStyle-HorizontalAlign
=
"Right"
ItemStyle-ForeColor
=
"GrayText"
ItemStyle-Font-Size
=
"Smaller"
/>
</
Columns
>
<
ClientSettings
>
<
Selecting
AllowItemSelection
=
"true"
AllowToggleSelection
=
"true"
UseSelectColumnOnly
=
"true"
/>
<
Scrolling
AllowScroll
=
"false"
SaveScrollPosition
=
"true"
UseStaticHeaders
=
"true"
ScrollHeight
=
"400px"
/>
</
ClientSettings
>
</
telerik:RadTreeList
>
</
td
>
</
tr
>
<
tr
>
<
td
colspan
=
"9"
>
<
telerik:RadButton
ID
=
"rbt_SaveUserGroupSettings"
Text
=
"Save User Group Settings"
ButtonType
=
"LinkButton"
Font-Bold
=
"true"
Style
=
"margin-right: 20px;"
Icon-PrimaryIconCssClass
=
"rbSave"
runat
=
"server"
/>
</
td
>
</
tr
>
</
table
>
</
telerik:RadPageView
>
<
telerik:RadPageView
ID
=
"RadPageView_AccountSettings_Page2"
runat
=
"server"
>
[RadPageView_AccountSettings_Page2]
</
telerik:RadPageView
>
<
telerik:RadPageView
ID
=
"RadPageView_UserGroupSettings_Gerneral"
runat
=
"server"
>
[RadPageView_UserGroupSettings_Gerneral]
</
telerik:RadPageView
>
<
telerik:RadPageView
ID
=
"RadPageView_UserGroupSettings_Menu"
runat
=
"server"
>
[RadPageView_UserGroupSettings_Menu]
</
telerik:RadPageView
>
</
telerik:RadMultiPage
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>