I am using the RadPanelBar to display a selection of reports to the user. The reports are in categories, and the number of categories and reports depends upon the user. The RadPanelBar is data bound at run time. It is part of a div that also contains a search box and a filter for the reports (data bound check list).
Because the screen resolution varies based on the user, I need to dynamically resize the RadPanelBar. I am doing so through javascript, and it generally works fine. The RadPanelBar conforms to the initial screen size, and scales with the resize. And so long as only the expand/collapse arrows are clicked, it maintains the new size. The problem is that as soon as any item is click, it reverts back to the default size. After that, if the screen is resized, or the expand/collapse arrows are used to fully collapse the RadPanelBar, it will return to the correct size.
I tried to fix this by wrapping the RadPanelBar in a RadAjaxPanel and added the ForceResize to ClientEvents-OnResponseEnd; that did not work.
Currently I have added additional JavaScript to wait one second after the item click, and then call ForceResize again. That alone did nothing, so I added code to collapse and expand the item; that partially worked, but does not restore it to the full size.
My page is part of a larger project, and is on a MasterPageFile, if that makes any difference.
Here is the javascript I am using for the resize:
And here is a abbreviated version of the ASPX:
I tried to implement the instructions in the support KB here. But the javascript threw an error on InitFullExpandOpera(), and after I removed that line, it did nothing.
This thread suggests using the panel bar's repaint; but I cannot find any documentation or examples, and my attempts to extrapolate from other repaint examples have only resulted in errors.
The version of Telerik.Web.UI I am using is 2013.3.1114.45.
Has anyone encountered this issue, and have you found a way to fix it?
Because the screen resolution varies based on the user, I need to dynamically resize the RadPanelBar. I am doing so through javascript, and it generally works fine. The RadPanelBar conforms to the initial screen size, and scales with the resize. And so long as only the expand/collapse arrows are clicked, it maintains the new size. The problem is that as soon as any item is click, it reverts back to the default size. After that, if the screen is resized, or the expand/collapse arrows are used to fully collapse the RadPanelBar, it will return to the correct size.
I tried to fix this by wrapping the RadPanelBar in a RadAjaxPanel and added the ForceResize to ClientEvents-OnResponseEnd; that did not work.
Currently I have added additional JavaScript to wait one second after the item click, and then call ForceResize again. That alone did nothing, so I added code to collapse and expand the item; that partially worked, but does not restore it to the full size.
My page is part of a larger project, and is on a MasterPageFile, if that makes any difference.
Here is the javascript I am using for the resize:
function ForceResize() {
var height = getDocHeight() - 275;
if (height <
250
)
height
=
250
;
var
reportCategoryPb
=
document
.getElementById("<%= this.ReportCategoryPb.ClientID %>");
if (reportCategoryPb) {
reportCategoryPb.style.height = height + 'px';
reportCategoryPb.Height = parseInt(height);
}
}
function PanelResize() {
ForceResize();
var reportCategoryPb = document.getElementById("<%= this.ReportCategoryPb.ClientID %>");
if (reportCategoryPb) {
var item = $find("<%= this.ReportCategoryPb.ClientID %>").get_expandedItem();
if (item) {
item.collapse();
item.expand();
}
}
}
function resizeTrigger() {
setTimeout("PanelResize()", 1250);
}
$(document).ready(function () {
ForceResize();
});
$(window).resize(function () {
ForceResize();
});
And here is a abbreviated version of the ASPX:
<
telerik:RadAjaxPanel
ID
=
"ReportUI_Ajax"
runat
=
"server"
ClientEvents-OnResponseEnd
=
"ForceResize"
>
<
div
id
=
"ReportCombinedListDiv"
style
=
"width: 25%; height: 100%; float: left; border: 1px solid #CCC; padding: 5px;"
>
<
asp:Label
ID
=
"ReportCombinedListLbl"
runat
=
"server"
Font-Size
=
"Large"
Font-Bold
=
"true"
Text
=
"Reports"
/>
<
br
/>
<
hr
/>
<
br
/>
<
trm:TrmSearchBox
runat
=
"server"
ID
=
"ReportListSearch"
TargetControlID
=
"ReportListPb"
DataTextField
=
"ReportName"
DataValueField
=
"ReportId"
/>
<
asp:Label
ID
=
"ReportTypeLabel"
runat
=
"server"
Text
=
"Report Types"
Font-Size
=
"Larger"
Font-Bold
=
"true"
/>
<
br
/>
<
telerik:RadListBox
ID
=
"ReportTypeFilter"
runat
=
"server"
CheckBoxes
=
"true"
OnItemCheck
=
"ReportFilter_ItemCheck"
BorderColor
=
"White"
AutoPostBack
=
"true"
DataTextField
=
"Name"
DataValueField
=
"ReportTypeId"
Style
=
"height: 60px;"
CssClass
=
"multiColumn"
Width
=
"100%"
/>
<
br
/>
<
telerik:RadPanelBar
ID
=
"ReportCategoryPb"
runat
=
"server"
ExpandMode
=
"FullExpandedItem"
OnItemClick
=
"ReportCategoryPb_ItemClick"
Height
=
"325px"
Width
=
"100%"
AllowCollapseAllItems
=
"true"
>
</
telerik:RadPanelBar
>
</
div
>
</
telerik:RadAjaxPanel
>
I tried to implement the instructions in the support KB here. But the javascript threw an error on InitFullExpandOpera(), and after I removed that line, it did nothing.
This thread suggests using the panel bar's repaint; but I cannot find any documentation or examples, and my attempts to extrapolate from other repaint examples have only resulted in errors.
The version of Telerik.Web.UI I am using is 2013.3.1114.45.
Has anyone encountered this issue, and have you found a way to fix it?