Questions on UI for ASP.NET AJAX Forum

2 answers

298 views

Disabling RadPanelItem in codebehind disables all controls in RadPanelItem?

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?

PanelBar

answered on 13 Apr 2023

2 answers

206 views

Unable to collapse PanelBar

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!

PanelBar

answered on 29 Dec 2022

0 answers

222 views

Hide or Show Items in the PanelBar

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?

PanelBar

asked on 18 Aug 2022

1 answer

189 views

Radpanelbar: add image control to Item, not using templates

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);

        }
    }

}

PanelBar

updated answer on 04 May 2022

1 answer

81 views

RadPanelBar - Text disappears when zooming out in browser

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

PanelBar

answered on 26 Jan 2022

0 answers

87 views

DateTimePicker control inside PanelBar

Nevermind

DatePicker

PanelBar

updated question on 24 Jan 2022

1 answer

125 views

sliding radpanel start in open position

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

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

PanelBar

answered on 19 Nov 2021

1 answer

616 views

Is it possible to change the PanelBar color dynamically based on a value?

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

PanelBar

answered on 27 Nov 2020

3 answers

141 views

RADPanelBar and ScriptManager

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?

PanelBar

answered on 15 Sep 2020

1 answer

164 views

Wrong visibility on RenderMode Lightweight

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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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>