Telerik Forums
UI for ASP.NET AJAX Forum
2 answers
193 views
I have a RadPanelBar with an RadPanelItem collection declared in the markup (it's not built dynamically).  On the page load in the codebehind, I disable all but the first panel item.  I disable panel items like this:

RadPanelBar1.FindItemByValue("Quantity").Enabled = false;

Then, when a RadGrid row is double-clicked in first, enabled RadPanelItem, I use the RadGrid's client-side API to enable the next panel item via Javascript.  The Javascript performs as expected and enables the panel item, but all of the controls within the newly enabled panel are disabled.

I just discovered this after making a modification to a page.  Previously, we set these panels to disabled via Javascript using the following code:

panel.findItemByValue("PriceStructure").disable();

This disabled only the panel item itself and not the controls within the panel item.  However, now we need to disable these in the codebehind, but all the controls within the item become disabled.

How do I keep this from happening when disabling panel items in the codebehind?
Attila Antal
Telerik team
 answered on 13 Apr 2023
2 answers
152 views
I have been trying for a couple of days now to get my PanelBar working with databound items, where the item template consists of a user control.  Here is my code:

<telerik:RadPanelBar runat="server" ID="pbSupplierAgreements" AllowCollapseAllItems="true"                 OnItemDataBound="pbSupplierAgreements_ItemDataBound" ExpandMode="SingleExpandedItem"                        Width="100%" DataValueField="ID" DataTextField="SupplierCode" DataTextFormatString="Supplier: {0}">
  <ItemTemplate>
    <telerik:RadPanelItem>
      <Items>
        <telerik:RadPanelItem>
          <ItemTemplate>
            <e:SupplierAgreementView ID="SupplierView" runat="server" />
          </ItemTemplate>
        </telerik:RadPanelItem>
      </Items>
    </telerik:RadPanelItem>
  </ItemTemplate>
</telerik:RadPanelBar>

When the OnItemDataBound is called I bind the data item to the SupplierAgreementView control.

The problem is that this renders the control and data ok , but the panel bar items are all expanded but I can't collapse them and there is no collapse button on the panel bar item headers.

Please help!
Attila Antal
Telerik team
 answered on 29 Dec 2022
0 answers
142 views
I have a PanelBar that is tied to a sql server stored procedure. In my stored procedure, I am working out the users who should see certain panel items, so I have a field called "Item_Visible". Is there a way to get each item to pull from what I am returning in my stored procedure are mark the items visibility based on that field? 
Angela
Top achievements
Rank 1
Iron
 asked on 18 Aug 2022
1 answer
80 views

Hello

I am looking for a way to add a control to my radpanelbarItems.
I would like to keep all the "free" functionalities of the panelbaritem (img, hoverimage, text, expand/collapse , default styling etc) so i prefer not using templates.

I populate the radpanelbar from codebehind as demonstrated in attached code.

My first try is simply to add the control and move it in place using css.  But unfortunately the content area of the panelbaritem keeps it height, smashing the layout of the panels.


any hint would be highly appreciated , either to making the attached example work or a different approach.

kind regards

Mark


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>   

    <style>
        .myimg {
            position: relative !important;
            top: -30px !important;
            left: 100px !important;
        }
    </style>

</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>
            </Scripts>
        </telerik:RadScriptManager>
    
            <div>

            <telerik:RadPanelBar ID="RadPanelBar1" runat="server" ExpandMode="SingleExpandedItem" Skin="Bootstrap" Width="300">
                <Items>
                </Items>
            </telerik:RadPanelBar>

        </div>
    </form>
</body>
</html>




using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

public partial class test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        FillPanels();
    }

    protected void FillPanels()
    {

        for (int i = 0; i < 10; i++)
        {
            RadPanelItem ProductPanel = new RadPanelItem { Text = "P" + i.ToString(), Expanded = false, ImageUrl = "/images/prod_notok.png", Value = "P" + i.ToString() };

            //add control try
ProductPanel.Controls.Add(new Image { ImageUrl = @"/images/pdf.png",CssClass="myimg",ID="img" + i.ToString() }); for (int h = 0; h < 3; h++) { RadPanelItem SubPanel = new RadPanelItem { Text = "S" + i.ToString() + h.ToString(), ImageUrl = "/images/notok.png", Expanded = false, Value = "S" + h.ToString() + i.ToString() }; ProductPanel.Items.Add(SubPanel); } RadPanelBar1.Items.Add(ProductPanel); } } }

Attila Antal
Telerik team
 updated answer on 04 May 2022
1 answer
30 views

Regardless of browser, when you zoom out to text size 80% or less the text in the RadPanelBar disappears. 

Is there a way to make the text visible regardless of the zoom level?

/POE

Vessy
Telerik team
 answered on 26 Jan 2022
0 answers
35 views
Nevermind
Peter
Top achievements
Rank 1
 updated question on 24 Jan 2022
1 answer
65 views

I made a sliding panal as your example but with a little deferent that the panel in (OCX) user Control , it work fine but the problem is that it start in an open position , i want it to start closed and be opened when i click the button . my code is :

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

       <%-- <script src="scripts.js" type="text/javascript"></script>--%>
 <%-- /**/--%>

        <script type="text/javascript">
            Sys.Application.add_load(function() {

                demo.rightPanel = $get('<%=RadPanelBar2.ClientID %>');
              <%--  demo.rightButton = $get('<%=rightbutton.ClientID %>');--%>
                demo.rightButton = document.getElementById("rightbutton");

              <%--  demo.rightButton = $find("<%=rightbutton.ClientID %>");--%>

                demo.initialize();
            });
        </script>
    </telerik:RadScriptBlock>

<div class="right-pane">
            <input type="image" id="rightbutton" class="button" src="../images/ElmosamenIcon.png" />

   <%--  <telerik:RadButton RenderMode="Lightweight" ID="rightbutton" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox"
                        Width="53px" Height="53px" AutoPostBack="false" ForeColor="Black" Checked="true" >
                        <ToggleStates>
                            <telerik:RadButtonToggleState ImageUrl="../images/ElmosamenIcon.png" HoveredImageUrl="../images/ElmosamenIcon.png"
                                Text="Play" Selected="true"></telerik:RadButtonToggleState>
                            <telerik:RadButtonToggleState ImageUrl="../images/ElmosamenIconclosed.png" HoveredImageUrl="../images/ElmosamenIconclosed.png"
                                Text="Pause"></telerik:RadButtonToggleState>
                        </ToggleStates>
                    </telerik:RadButton>--%>

            <div class="sliding-pane">
            <telerik:RadPanelBar RenderMode="Lightweight" ID="RadPanelBar2" runat="server"  Width="200px"  skin="BlackMetroTouch" Height="605px"  ExpandMode="FullExpandedItem" 
             DataSourceID="SqlDataSource1" DataFieldID="id" DataFieldParentID="ParentId" DataTextField="Text" DataNavigateUrlField="HyperLink" ViewStateMode="Enabled">
            <DataBindings>
                <telerik:RadPanelItemBinding  Depth="0" ImageUrl="ImageURL"  Expanded="true"  />
            </DataBindings>
        </telerik:RadPanelBar>


            </div>
        </div>

 

with  a java script code as

(function () {
    var demo = window.demo = window.demo || {};



    demo.initialize = function () {


        var rightPanel = demo.rightPanel;
        var rightButton = demo.rightButton;

        if (rightPanel) {
            SetUpAnimation(rightButton, Telerik.Web.UI.jSlideDirection.left, rightPanel);
        }
    }

    window.SetUpAnimation = function (button, direction, element) {
        element.style.position = "relative";

        var expanded = true;

        var expandAnimation = new Telerik.Web.UI.AnimationSettings({});
        var collapseAnimation = new Telerik.Web.UI.AnimationSettings({});

        var slide = new Telerik.Web.UI.jSlide(element, expandAnimation, collapseAnimation, false);

        slide.initialize();

        slide.set_direction(direction);

        button.onclick = function () {
            element.parentNode.style.visibility = "visible";
            element.parentNode.style.display = "block";
            if (!expanded) {
                slide.expand();
            }
            else {
                slide.collapse();
            }
            expanded = !expanded;
            return false;
        }
    };
}())

I also try to use a Rad button with type  ToggleButton  to change the button image when i click the button , it work well but the problem it is appear in the left side of the sliding panel

 

                                                        
Vessy
Telerik team
 answered on 19 Nov 2021
1 answer
455 views

 

I have a panel bar in my application. The use case with my application is, I wanted to change the color of Panel bar when my project goes through various stages, Ex: Stage 1,2,3,4. May be like

For Stage 1: Red,

Stage 2: Orange,

Stage 3: Blue,

Stage 4: Green

Is this possible? If possible how to do it.

Thanks,

SC

 

 

 

 

 

Peter Milchev
Telerik team
 answered on 27 Nov 2020
3 answers
85 views
Hi,

We are working on a RadPanelBar upgrade initiative. We are currently using RadPanelbar.Net2 (v2.0.50727) and want to upgrade it to the latest version (Latest Version is 2020.2.617).

The problem we are facing at the moment is:

- RadPanelBar requires Script Manager added to the page. In our implementation RadPanelBar is added to Master Page and so it requires a form tag having Script Manager on it.
- Some of the child pages in our case don't have form on them but there are instances where Child pages do have form on them. So, in these cases application stops working because the child page form becomes nested.
- We tried to resolve nested form issue by dynamically creating Form from Code-behind but it is not working as per expectations.

Is there any possibility to use RadPanelBar without Script Manager - this way it will become the save as of v2.0.50727?
Peter Milchev
Telerik team
 answered on 15 Sep 2020
1 answer
111 views

I have a problem with this page, it does not display correctly:

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Prueba2.aspx.cs" Inherits="Prueba2" %>
 
<!DOCTYPE html>
 
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="~/Content/bootstrap-grid.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-reboot.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/font-awesome.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadCodeBlock runat="server">
        <script type="text/javascript">
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>
        </Scripts>
    </telerik:RadScriptManager>
 
    <telerik:RadAjaxManager ID="RadAjaxManagerEspecies" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="pnFecha">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="pnFecha" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" CssClass="loadingPanel" Transparency="20">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadWindowManager ID="rdwManager" runat="server">
    </telerik:RadWindowManager>
 
    <div class="container-fluid">
        <div class="card" runat="server">
            <div class="card-body">
                <telerik:RadTabStrip runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1" SelectedIndex="0">
                    <Tabs>
                        <telerik:RadTab runat="server" Text="Prueba" PageViewID="rpvFicha" Value="rpvFicha"></telerik:RadTab>
                    </Tabs>
                </telerik:RadTabStrip>
                <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" CssClass="card">
                    <telerik:RadPageView runat="server" ID="rpvFicha" CssClass="card-body">
                        <telerik:RadPanelBar runat="server" ID="rpnFicha" Width="100%" Style="margin-bottom: 0px">
                            <Items>
                                <telerik:RadPanelItem runat="server" Expanded="False" Text="Coordenadas" Visible="true" Value="habitats">
                                    <ContentTemplate>
                                        <telerik:RadTextBox ID="RadTextBox1" runat="server" Rows="3" MaxLength="3500" Wrap="false" Width="100%" TextMode="MultiLine"></telerik:RadTextBox>
                                    </ContentTemplate>
                                </telerik:RadPanelItem>
                            </Items>
                            <Items>
                                <telerik:RadPanelItem runat="server" Expanded="False" Text="Bibliografía" Visible="true" Value="bibliografia">
                                    <HeaderTemplate>
                                        <a class="rpExpandable">
                                            <span class="rpExpandHandle"></span>
                                        </a>
                                        <asp:Label Text="label1" ID="label1" runat="server" CssClass="rpText"> </asp:Label>
                                    </HeaderTemplate>
                                    <ContentTemplate>
                                        <telerik:RadTextBox ID="rdtSituacion" runat="server" Rows="3" MaxLength="3500" Wrap="false" Width="100%" TextMode="MultiLine"></telerik:RadTextBox>
                                    </ContentTemplate>
                                </telerik:RadPanelItem>
                            </Items>
                            <Items>
                                <telerik:RadPanelItem runat="server" Expanded="False" Text="Observaciones" Visible="true" Value="observaciones">
                                    <ContentTemplate>
                                        <telerik:RadTextBox ID="RadTextBox2" runat="server" Rows="3" MaxLength="3500" Wrap="false" Width="100%" TextMode="MultiLine"></telerik:RadTextBox>
                                    </ContentTemplate>
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelBar>
                    </telerik:RadPageView>
                </telerik:RadMultiPage>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

In my webconfig i have this configuration:

<add key="Telerik.Web.UI.RenderMode" value="lightweight" />

 

But if i change the rendermode from the panel to Classic  it is displayed well, What is the problem?

Thank you in advance

Vessy
Telerik team
 answered on 23 Jul 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?