Hi Sir, I'm using RadPanelBar in my project I've keep RadPanelBar HTML Code in UserControl for using it in different pages (See Sample Project : leftmenu.ascx) Problem 1 ======== Instead of loading UserControl(leftmenu.ascx) in client side like below <%@ Register TagPrefix="uc1" TagName="leftmenu" Src="~/leftmenu.ascx"%> //Register <uc1:leftmenu id="ucjsradleftmenu" runat="server"></uc1:leftmenu> //Placing User Control If i Load it in Page Load Dynamically as shown below UserControl leftuc = (UserControl)LoadControl("~/leftmenu.ascx"); placeleftmenu.Controls.Add(leftuc); Then If we select Concern Page using mouse where Dynamic Code Exist(Sample Project : RadComboBox.aspx) mouse selected(RadComboBox) not selecting properly Visual Studio used : Microsoft Visual Studio 2008 Version 9.0.30729.1 SP Dot Net Framework : Microsoft .NET Framework Version 3.5 SP1
Under the list of controls that will adjust with the device detection screen sizes and device types, the RadPanelBar is not listed. It would be handy if this control was able to automatically layout differently if there were more space. For example, on a wide screen monitor, the panels would be side by side, if there was room. And if the same page was viewed in a smaller screen size, the panels would stack and become collapsible as they are by default now.
Workaround: Set the TabIndex property for the RadPanelBar, e.g. TabIndex="1"
Hi, I would like to forward a feature request to you and support to resize the PanelBar dynamically you can found a video which demonstrate the functionality. We would like to support minimized navigation and provide more working space for those whose using smaller resolutions. Thanks in advanced, Daniel
Please consider adding a ClientVisible or Display property to panel bar items that we can set server side to control the initial visibility of items on the client. In the screenshot you can see the PanelBar and a menu to filter items to display. I like what I have except for the fact that I have to run javascript to filter items on each page load and async update based on the selected filter. RadGrid has a property Display for columns which allows the column to be sent to the client but not be visible initially. I just want something like that for the PanelBar. Thank you for your consideration.
With the latest version R1 2017 SP1 the image icon of RadButton is not aligned inside a content template of RadPanelbar. See the attached screenshot for more information and test the code: <%@ Page Language="C#" AutoEventWireup="true" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <telerik:RadScriptManager runat="server" ID="sm"></telerik:RadScriptManager> <style> body { font: 12px "segoe ui",arial,sans-serif; } </style> <telerik:RadPanelBar runat="server" ID="RadPanelBar1" Width="100%"> <Items> <telerik:RadPanelItem Text="Filtering and configuration" Expanded="True"> <ContentTemplate> <telerik:RadButton RenderMode="Lightweight" ID="RadButton_HierarchyLoadMode" Width="300px" runat="server" ButtonType="ToggleButton" Checked="true" ToggleType="CheckBox"> <ToggleStates> <telerik:RadButtonToggleState Text="Yes - Each comment will load only when clicked" PrimaryIconCssClass="p-i-checkbox rbToggleCheckbox" /> <telerik:RadButtonToggleState Text="No - All comments will be loaded when the report starts or the datasource is changed." PrimaryIconCssClass="p-i-checkbox-checked rbToggleCheckboxChecked" /> </ToggleStates> </telerik:RadButton> <telerik:RadButton RenderMode="Lightweight" ID="RadButton_SaveGridSettings" runat="server" Text="Save Grid Settings" Width="140px"> <Icon PrimaryIconCssClass="rbSave"></Icon> </telerik:RadButton> </ContentTemplate> </telerik:RadPanelItem> </Items> <ExpandAnimation Type="None" /> <CollapseAnimation Type="None" /> </telerik:RadPanelBar> </form> </body> </html> The problem is not reproducible with the R3 2016 build.
The issue is replicated when a PanelBar with ContentTemplate is focused and collapsed:
<p>
<a href="#" tabindex="1">Top Link</a>
</p>
<telerik:RadPanelBar ID="RadPanelBar1" RenderMode="Lightweight" runat="server" TabIndex="1">
<Items>
<telerik:RadPanelItem runat="server" Text="Apples">
<ContentTemplate>
<a href="#" tabindex="1">Something</a>
</ContentTemplate>
</telerik:RadPanelItem>
<telerik:RadPanelItem runat="server" Text="Oranges">
<ContentTemplate>
<a href="#" tabindex="1">Nothing</a>
</ContentTemplate>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelBar>
</div>
<p>
<a href="#" tabindex="1">Another thing</a>
</p>
From ADMIN:
Placing the following script under the ScriptManager can be used as a temporary workaround:
Telerik.Web.UI.RadPanelItem.prototype._moveToNextFocusable = function (e) {
var $focusableElements;
var $template;
var hasTemplate = this.get_templated() || (this.get_hasContentTemplate() && this.get_expanded());
if (hasTemplate && this.get_focused() && this.get_expanded()) {
$template = $(this.get_element()).find(".rpTemplate");
$focusableElements = $template.find("input,a,button,select,textarea").filter(el => !el.hasAttribute('disabled'));
$focusableElements.eq(0).focus();
e.preventDefault();
return false;
}
return true;
}