As showed on the piece of code bellow, I have a TabStrip with a multipage. When the page first loads, a grid is loaded. When the user clicks a row from the grid, a new tab opens with the details of that row.
If I put the RadPageView to 100% height the grid is cut off as it's not adapting to the height of the grid. If I put a static value, it doesn't adapt to different window sizes.
I tried to correct this issue using the javascript posted bellow. While it works when I resize the window, when the page first loads, it's not resizing. If you check the line 9. of the JS, you can see that on the (document).ready I try to force the new size but nothing happens.
You can see what is happening on the 2 files I attached. Is there anyway I can resolve this issue?
<
telerik:RadTabStrip
ID
=
"tabContactsList"
runat
=
"server"
MultiPageID
=
"ContactsPagesViews"
Orientation
=
"HorizontalTop"
SelectedIndex
=
"0"
>
</
telerik:RadTabStrip
>
<
telerik:RadMultiPage
ID
=
"ContactsPagesViews"
ScrollBars
=
"Auto"
Height
=
"100%"
RenderMode
=
"Lightweight"
runat
=
"server"
OnPageViewCreated
=
"ContactsPagesViews_PageViewCreated"
SelectedIndex
=
"0"
>
<
telerik:RadPageView
ID
=
"RadPageView1"
runat
=
"server"
Height
=
"100%"
>
<
telerik:RadGrid
runat
=
"server"
ID
=
"RadGrid1"
DataSourceID
=
"dtContactsList"
AllowFilteringByColumn
=
"True"
AllowPaging
=
"True"
AutoGenerateColumns
=
"False"
Height
=
"100%"
BorderWidth
=
"0px"
AllowSorting
=
"True"
Style
=
"outline: none"
EnableLinqExpressions
=
"False"
ShowGroupPanel
=
"true"
FilterMenu-Enabled
=
"true"
FilterType
=
"Classic"
OnItemCommand
=
"RadGrid1_ItemCommand"
OnItemDataBound
=
"RadGrid1_ItemDataBound"
>
<
ExportSettings
><
Pdf
PageWidth
=
""
></
Pdf
></
ExportSettings
>
<
ClientSettings
Scrolling-AllowScroll
=
"false"
Scrolling-UseStaticHeaders
=
"true"
Selecting-AllowRowSelect
=
"true"
EnablePostBackOnRowClick
=
"true"
AllowDragToGroup
=
"true"
EnableRowHoverStyle
=
"true"
>
<
Selecting
AllowRowSelect
=
"True"
/>
<
Scrolling
AllowScroll
=
"True"
UseStaticHeaders
=
"True"
SaveScrollPosition
=
"true"
FrozenColumnsCount
=
"2"
></
Scrolling
>
</
ClientSettings
>
<
PagerStyle
Mode
=
"NumericPages"
PageSizeControlType
=
"None"
></
PagerStyle
>
<
MasterTableView
TableLayout
=
"Fixed"
Width
=
"100%"
ClientDataKeyNames
=
"ID"
PageSize
=
"16"
>
<
Columns
>
<
telerik:GridTemplateColumn
UniqueName
=
"CheckBoxTemplateColumn"
AllowFiltering
=
"false"
>
<
ItemStyle
Width
=
"40px"
/>
<
HeaderStyle
Width
=
"40px"
/>
<
ItemTemplate
>
<
asp:CheckBox
ID
=
"CheckBox1"
runat
=
"server"
OnCheckedChanged
=
"ToggleRowSelection"
AutoPostBack
=
"True"
/>
</
ItemTemplate
>
<
HeaderTemplate
>
<
asp:CheckBox
ID
=
"headerChkbox"
runat
=
"server"
OnCheckedChanged
=
"ToggleSelectedState"
AutoPostBack
=
"True"
/>
</
HeaderTemplate
>
</
telerik:GridTemplateColumn
>
<
telerik:GridBoundColumn
DataField
=
"Id"
DataType
=
"System.Int32"
HeaderText="<%$ Resources:ContactManager.aspx, lblContactManagerId_HeaderText %>" AllowFiltering="false" UniqueName="Id" Display="false" HeaderStyle-Width="25px">
<
ColumnValidationSettings
>
<
ModelErrorMessage
Text
=
""
/>
</
ColumnValidationSettings
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"Name"
FilterControlAltText
=
"Filter Name column"
HeaderText="<%$ Resources:ContactManager.aspx, lblContactManagerName_HeaderText %>" SortExpression="Name" UniqueName="Name" DataType="System.String">
<
ColumnValidationSettings
>
<
ModelErrorMessage
Text
=
""
/>
</
ColumnValidationSettings
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"City"
DataType
=
"System.String"
FilterControlAltText
=
"Filter City column"
HeaderText="<%$ Resources:ContactManager.aspx, lblContactManagerCity_HeaderText %>" SortExpression="City" UniqueName="City" ItemStyle-Width="15%" HeaderStyle-Width="15%">
<
ColumnValidationSettings
>
<
ModelErrorMessage
Text
=
""
/>
</
ColumnValidationSettings
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"Country.Name"
DataType
=
"System.String"
FilterControlAltText
=
"Filter Country column"
HeaderText="<%$ Resources:ContactManager.aspx, lblContactManagerCountry_HeaderText %>" SortExpression="Country" UniqueName="Country" ItemStyle-Width="15%" HeaderStyle-Width="15%">
<
ColumnValidationSettings
>
<
ModelErrorMessage
Text
=
""
/>
</
ColumnValidationSettings
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"Address"
FilterControlAltText
=
"Filter Address column"
HeaderText="<%$ Resources:ContactManager.aspx, lblContactManagerAddress_HeaderText %>" SortExpression="Address" UniqueName="Address" DataType="System.String" ItemStyle-Width="25%" HeaderStyle-Width="25%">
<
ColumnValidationSettings
>
<
ModelErrorMessage
Text
=
""
/>
</
ColumnValidationSettings
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"Phone"
DataType
=
"System.String"
FilterControlAltText
=
"Filter Phone column"
HeaderText="<%$ Resources:ContactManager.aspx, lblContactManagerPhone_HeaderText %>" SortExpression="Phone" UniqueName="Phone" ItemStyle-Width="10%" HeaderStyle-Width="10%">
<
ColumnValidationSettings
>
<
ModelErrorMessage
Text
=
""
/>
</
ColumnValidationSettings
>
</
telerik:GridBoundColumn
>
</
Columns
>
</
MasterTableView
>
<
FilterMenu
CssClass
=
"RadFilterMenu_CheckList"
>
</
FilterMenu
>
</
telerik:RadGrid
>
</
telerik:RadPageView
>
</
telerik:RadMultiPage
>
<
asp:ObjectDataSource
ID
=
"dtContactsList"
runat
=
"server"
DeleteMethod
=
"DeleteContact"
SelectMethod
=
"GetAllContacts"
TypeName
=
"LCG.Web.IAMS.AWA.Pages.ContactManager"
>
<
SelectParameters
>
<
asp:ControlParameter
ControlID
=
"ctl00$ContentPlaceHolder1$RadTreeView1"
Name
=
"priorityId"
PropertyName
=
"SelectedValue"
Type
=
"Int32"
/>
</
SelectParameters
>
</
asp:ObjectDataSource
>
<telerik:RadScriptBlock runat=
"server"
ID=
"RadScriptBlock1"
>
<script type=
"text/javascript"
>
$(document).ready(
function
() {
$(window).resize(
function
() {
ResizePage($find(
'<%= ContactsPagesViews.ClientID %>'
))
});
ResizePage($find(
'<%= ContactsPagesViews.ClientID %>'
))
});
function
ResizePage(multiPage) {
for
(i = 0; i < multiPage.get_pageViews().get_count() ; i++) {
var
pageView = multiPage.get_pageViews().getPageView(i);
pageView.get_element().style.height = ($(window).height() - 80) +
'px'
;
}
}
</script>
</telerik:RadScriptBlock>
Thank you.