Telerik Forums
UI for ASP.NET AJAX Forum
or
Ask question
All Questions
Unanswered
Answered
1,279 questions
11 answers
271 views
JavaScript error when programatically opening panels
Hello.  I have created a page with a PanelBar and three RadPanelItems.  I am using the code from one of the samples where only one panel is opened and the other two disabled.  You fill out text boxes and  you click on the Next button and it will close the current panel, enable and open the next panel.  When the next panel is opened, I am getting the following JS error:
An invalid or illegal string was specified" code: "12}h.insertRule(f[b]+"}",b+1);
This is only hapenning on firefox
It seems like it is injecting CSS code into the styles.  Here is my code:

ASPX:
<%@ Page Title="" Language="C#" MasterPageFile="~/MSD.Master" AutoEventWireup="true" 
    Theme="AdGeo" CodeBehind="MemberRegistration.aspx.cs" Inherits="MSD_web.MemberRegistration" %> 
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="HeadHolder" runat="server"> 
<script type="text/javascript"> 
    function ValidateCombo(source, arguments) { 
        var panelbar = $find("<%= RadPanelBar1.ClientID %>"); 
        var item = panelbar.findItemByValue("AccountInformation"); 
        var secretQuestion = item.findControl("cmbSecretQuestion"); 
 
        if (secretQuestion._text == 'Choose a secret question ->') 
            arguments.IsValid = false; 
        else 
                    arguments.IsValid = true; 
 
    } 
</script> 
</asp:Content> 
<asp:Content ID="Content4" ContentPlaceHolderID="MainContentPlaceHolder" runat="server"> 
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" > 
        <telerik:RadPanelBar runat="server" ID="RadPanelBar1" ExpandMode="SingleExpandedItem" 
            Width="740px" Skin="Forest" > 
            <Items> 
                <telerik:RadPanelItem Expanded="True" Text="Step 1: Account Information" runat="server" 
                    Selected="true"> 
                    <Items> 
                        <telerik:RadPanelItem Value="AccountInformation"  runat="server"> 
                            <ItemTemplate> 
                                <div class="text" style="background-color: #edf9fe"> 
                                    <ul class="formList" id="accountInfo"> 
                                        <li> 
                                            <asp:Label ID="FirstNameLabel" runat="server" AssociatedControlID="FirstName" CssClass="formLabel">First Name*:Account Name:</asp:Label> 
                                            <telerik:RadTextBox ID="FirstName" runat="server" EmptyMessage="Your first name" Width="200px" 
                                                Skin="AdGeo" EnableEmbeddedSkins="false"  > 
                                            </telerik:RadTextBox> 
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="FirstName" 
                                                CssClass="error" ErrorMessage="First Name is required." ToolTip="First Name is required." 
                                                ValidationGroup="SubmitGroup">*</asp:RequiredFieldValidator> 
                                             
                                        </li> 
                                        <li> 
                                            <asp:Label ID="LastNameLabel" runat="server" AssociatedControlID="LastName" CssClass="formLabel">Last Name*:Password:</asp:Label> 
                                            <telerik:RadTextBox ID="LastName" runat="server" EmptyMessage="Enter last name" Skin="AdGeo" 
                                                EnableEmbeddedSkins="false" Width="200px" > 
                                            </telerik:RadTextBox> 
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="LastName" 
                                                CssClass="error" ErrorMessage="Last Name is required." ToolTip="Last Name is required." 
                                                ValidationGroup="SubmitGroup">*</asp:RequiredFieldValidator> 
                                            
                                        </li> 
                                        <li> 
                                            <asp:Label ID="EmailLabel" runat="server" AssociatedControlID="Email" CssClass="formLabel">E-mail address*:Confirm Password:</asp:Label> 
                                            <telerik:RadTextBox ID="Email" runat="server" EmptyMessage="Enter e-mail address" 
                                                Skin="AdGeo" EnableEmbeddedSkins="false" Width="200px" > 
                                            </telerik:RadTextBox> 
                                            <asp:RequiredFieldValidator ID="EmailRequired" runat="server" ControlToValidate="Email" 
                                                CssClass="error" ErrorMessage="E-mail is required." ToolTip="E-mail is required." 
                                                ValidationGroup="SubmitGroup">*</asp:RequiredFieldValidator> 
                                            
                                        </li> 
                                        <li> 
                                            <asp:Label ID="PhoneLabel" runat="server" AssociatedControlID="Phone" CssClass="formLabel">Phone number:Email:</asp:Label> 
                                            <telerik:RadMaskedTextBox ID="Phone" runat="server" Mask="(###) ###-####" Width="200px" 
                                                Skin="AdGeo" EnableEmbeddedSkins="false"> 
                                            </telerik:RadMaskedTextBox> 
                                             
                                        </li> 
                                        <li> 
                                            <asp:Label ID="CellPhoneLable" runat="server" AssociatedControlID="CellPhone" CssClass="formLabel">Cell Phone:</asp:Label> 
                                            <telerik:RadMaskedTextBox ID="CellPhone" runat="server" Mask="(###) ###-####" Width="200px" 
                                                Skin="AdGeo" EnableEmbeddedSkins="false"> 
                                            </telerik:RadMaskedTextBox> 
                                        </li> 
                                        <li> 
                                            <asp:Label ID="Label10" runat="server" AssociatedControlID="cmbSecretQuestion" CssClass="formLabel">Security Question*:</asp:Label> 
                                            <telerik:RadComboBox ID="cmbSecretQuestion" runat="server" Style="margin-right: 5px;" 
                                                Skin="AdGeo" EnableEmbeddedSkins="false" Width="200px" 
                                                BorderColor="#000066" BorderWidth="1px" MaxHeight="100px"> 
                                                <ExpandAnimation Type="Linear" /> 
                                                <Items> 
                                                    <telerik:RadComboBoxItem Text="Choose a secret question ->" Value="" /> 
                                                    <telerik:RadComboBoxItem Text="What is your mother's maiden name?" /> 
                                                    <telerik:RadComboBoxItem Text="What year did you graduate from high school?" /> 
                                                    <telerik:RadComboBoxItem Text="What was your highschool's mascot?" /> 
                                                    <telerik:RadComboBoxItem Text="What was your first pet's name?" /> 
                                                    <telerik:RadComboBoxItem Text="What was your first car?" /> 
                                                    <telerik:RadComboBoxItem Text="Where was your father born?" /> 
                                                </Items> 
                                            </telerik:RadComboBox> 
                                            <asp:CustomValidator ID="CustomValidator4" runat="server" ControlToValidate="cmbSecretQuestion" 
                                                ErrorMessage="Please choose a secret question." ToolTip="Secret question is required." 
                                                ValidationGroup="SubmitGroup" CssClass="error" 
                                                ClientValidationFunction="ValidateCombo">*</asp:CustomValidator> 
                                        </li> 
                                        <li> 
                                                <asp:Label ID="Label11" runat="server" AssociatedControlID="SecretAnswer" CssClass="formLabel">Security Answer*:</asp:Label> 
                                                <telerik:RadTextBox ID="SecretAnswer" runat="server" TextMode="SingleLine" Skin="AdGeo" 
                                                    EnableEmbeddedSkins="false" Width="200px" > 
                                                </telerik:RadTextBox> 
                                                <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="SecretAnswer" 
                                                    ErrorMessage="Secret Answer is required." ToolTip="Secret answer is required." 
                                                    ValidationGroup="SubmitGroup" CssClass="error">*</asp:RequiredFieldValidator> 
                                        </li> 
                                        
                                    </ul> 
                                    <br /> 
                                    <asp:ValidationSummary ID="ValidationSummary1" runat="server" Font-Italic="True" ValidationGroup="SubmitGroup" /> 
                                    <br /> 
                                    <asp:Literal ID="ErrorMessage" runat="server" EnableViewState="False"></asp:Literal> 
                                    <asp:Button runat="server" ID="nextButton" OnClick="nextButton_Click" Text="Next" 
                                        CssClass="nextButton" ValidationGroup="SubmitGroup" /><br /> 
                                    <br /> 
                                </div> 
                            </ItemTemplate> 
                        </telerik:RadPanelItem> 
                    </Items> 
                </telerik:RadPanelItem> 
                <telerik:RadPanelItem Expanded="false" Enabled="false" Text="Step 2: Options" runat="server" 
                    Selected="false"> 
                    <Items> 
                        <telerik:RadPanelItem Value="AccountInformation" runat="server"> 
                            <ItemTemplate> 
                                <div class="text" style="background-color: #edf9fe"> 
                                    <ul class="formList" id="accountInfo"> 
                                        <li> 
                                            <asp:Label runat="server" ID="nameLabel" >Account Name:First Name*:</asp:Label> 
                                             
                                        </li> 
                                        <li> 
                                            <asp:Label runat="server" ID="Label1" >Password:Last Name*:</asp:Label> 
                                             
                                        </li> 
                                        <li> 
                                            <asp:Label runat="server" ID="Label2" >Confirm Password:E-mail address*:</asp:Label> 
                                           
                                        </li> 
                                        <li class="lastListItem"> 
                                            <asp:Label runat="server" ID="Label3" >Email:Phone number:</asp:Label> 
                                            
                                        </li> 
                                        <li> 
                                            <asp:Label ID="CellPhoneLable" runat="server" CssClass="formLabel">Cell Phone:</asp:Label> 
                                            
                                        </li> 
                                        <li> 
                                            <asp:Label ID="Label10" runat="server" AssociatedControlID="cmbTimeRange"  
                                                CssClass="formLabel">Best time to call:</asp:Label> 
                                            <telerik:RadComboBox ID="cmbTimeRange" runat="server"  
                                                BorderColor="#000066" BorderWidth="1px" EnableEmbeddedSkins="false"  
                                                MaxHeight="100px" Skin="AdGeo" Style="margin-right: 5px;" Width="200px"> 
                                                <ExpandAnimation Type="Linear" /> 
                                                <Items> 
                                                    <telerik:RadComboBoxItem Text="Select your desired call time -&gt;" Value="" /> 
                                                    <telerik:RadComboBoxItem Text="6:00 AM to 8:00 AM" /> 
                                                    <telerik:RadComboBoxItem Text="8:00 AM to 10:00 AM" /> 
                                                    <telerik:RadComboBoxItem Text="10:00 AM to 12:00 PM" /> 
                                                    <telerik:RadComboBoxItem Text="12:00 PM to 2:00 PM" /> 
                                                    <telerik:RadComboBoxItem Text="2:00 PM to 4:00 PM" /> 
                                                    <telerik:RadComboBoxItem Text="4:00 PM to 6:00 PM" /> 
                                                    <telerik:RadComboBoxItem Text="6:00 PM to 8:00 PM" /> 
                                                    <telerik:RadComboBoxItem Text="8:00 PM to 10:00 PM" /> 
                                                    <telerik:RadComboBoxItem Text="10:00 PM to 12:00 AM" /> 
                                                </Items> 
                                            </telerik:RadComboBox> 
                                             
                                        </li> 
                                         
                                    </ul> 
                                    <br /> 
                                     
                                    <asp:Literal ID="ErrorMessage" runat="server" EnableViewState="False"></asp:Literal> 
                                     
                                    <asp:Button runat="server" ID="nextButton" Text="Next" OnClick="nextButton_Click" CssClass="nextButton7"   /> 
                                     
                                    <br /> 
                                    <br /> 
                                    <br /> 
                                </div> 
                            </ItemTemplate> 
                        </telerik:RadPanelItem> 
                    </Items> 
                </telerik:RadPanelItem> 
                <telerik:RadPanelItem Enabled="False" Text="Step 3: Terms of use" runat="server"> 
                    <Items> 
                        <telerik:RadPanelItem Value="Register" runat="server"> 
                            <ItemTemplate> 
                                <div class="text" style="background-color: #edf9fe"> 
                                    <ul class="formList" id="termsOfUse"> 
                                        <li class="lastListItem"> 
                                            <img src="Images/terms.gif" alt="sample terms" width="550" height="224" /> 
                                            <br /> 
                                            <br /> 
                                            <asp:CheckBox runat="server" ID="termsCheckBox" /><asp:Label ID="Label7" runat="server" 
                                                CssClass="checkboxLabel" AssociatedControlID="termsCheckBox">I agree to the Terms &amp; Conditions</asp:Label> 
                                            <asp:CustomValidator runat="server" ValidationGroup="registerGroup" ErrorMessage="You should agree with the terms and conditions.!" 
                                                ClientValidationFunction="validateTerms" ID="termsValidator" Text="*" /> 
                                            <br /> 
                                            <asp:Button runat="server" ID="registerButton" ValidationGroup="registerGroup" Text="Register" 
                                                CssClass="nextButton" /> 
                                            <br /> 
                                            <br /> 
                                        </li> 
                                    </ul> 
                                </div> 
                            </ItemTemplate> 
                        </telerik:RadPanelItem> 
                    </Items> 
                </telerik:RadPanelItem> 
            </Items> 
            <CollapseAnimation Duration="100" Type="None" /> 
            <ExpandAnimation Duration="100" Type="None" /> 
        </telerik:RadPanelBar> 
    </telerik:RadAjaxPanel> 
</asp:Content> 
 

CS file:
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
 
namespace MSD_web 
{ 
    public partial class MemberRegistration : System.Web.UI.Page 
    { 
         
        protected void Page_Load(object sender, EventArgs e) 
        { 
            
        } 
 
        protected void nextButton_Click(object sender, EventArgs e) 
        { 
            GoToNextItem(); 
        } 
 
        private void GoToNextItem() 
        { 
            int selectedIndex = RadPanelBar1.SelectedItem.Index; 
 
            RadPanelBar1.Items[selectedIndex + 1].Selected = true; 
            RadPanelBar1.Items[selectedIndex + 1].Expanded = true; 
            RadPanelBar1.Items[selectedIndex + 1].Enabled = true; 
            RadPanelBar1.Items[selectedIndex].Expanded = false; 
 
        } 
 
         
    } 
} 
 
PanelBar
JeffSM
Top achievements
Rank 2
Iron
Veteran
Iron
 answered on 30 May 2018
12 answers
207 views
Up Down Arrow Indicator RadPanelBar
I'm working with the RadPanelBar, and I am writing to ask if the Up Down Arrow indicator of a parent RadPanelItem can be wired up to a click event;

Clicking on a parent-level RadPanelItem (or child-level RadPanelItem) initiates a click event - however if the Up Down Arrow Indicator on the right part of the RadPanelItem is clicked, no event is registered in the C# code-behind;

Any insight is appreciated;
PanelBar
Waseem
Top achievements
Rank 1
 answered on 28 May 2018
2 answers
95 views
Find Value of Combobox in RadPanel
I am trying to do a redirect in codebehind based on the value a user has selected in a combobox.  Can someone please tell me how to access the value? Using VB.NET please!

Thanks!    

**UPDATE: How do I access the button as well?  Can someone give me a codebehind example please in VB.NET  

<telerik:RadPanelBar ID="RadPanelBar2" Runat="server" Width="100%" ExpandMode="SingleExpandedItem">
                    <Items>
                        <telerik:RadPanelItem runat="server" Text="PURCHASE ACCOUNT CREDITS">
                            <Items>
                                <telerik:RadPanelItem Value="AccountCredits" runat="server">
                                    <ItemTemplate>
                                        <table width="100%" border="0" cellspacing="2" cellpadding="2">
                                            <tr align="center">
                                                <td>How many credits would you like to purchase?</td>
                                            </tr>
                                            <tr align="center">
                                                <td>
                                                    <telerik:RadComboBox ID="cbxCredits" runat="server">
                                                        <Items>
                                                            <telerik:RadComboBoxItem runat="server" Text="$1.00 - 4 Credits" Value="1.00" />
                                                            <telerik:RadComboBoxItem runat="server" Text="$5.00 - 25 Credits" Value="5.00" />
                                                            <telerik:RadComboBoxItem runat="server" Text="$10.00 - 50 Credits" Value="10.00" />
                                                        </Items>
                                                    </telerik:RadComboBox>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center">
                                                    <telerik:RadButton ID="btnCheckout" runat="server" Text="CONTINUE TO CHECKOUT..."></telerik:RadButton>
                                                </td>
                                            </tr>
                                        </table>
                                    </ItemTemplate>
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelItem>
PanelBar
Dennis
Top achievements
Rank 2
 answered on 07 Feb 2018
2 answers
137 views
Expand Collapse images replacement issue

How can I replace expand/collapse images of Radpanel item with some other images when RenderMode="Lightweight" ?

On expand I need to show different image and On collapse I need to show another image.

 

Below solution is not working for me because I think skin file selector is not supporting.

 

<style>
    .t-i-expand-s:before, .t-i-expand-down:before, .p-i-expand-s:before, .p-i-expand-down:before, .p-i-arrow-chevron-down:before {
        content: "\e100" !important;
    }

    .t-i-expand-n:before, .t-i-expand-up:before, .p-i-expand-n:before, .p-i-expand-up:before, .p-i-arrow-chevron-up:before {
        content: "\e101" !important;
    }
</style>

 

 

Right now my selector is like

 

.RadPanelBar .rpExpandable .rpExpandHandle 

{

display : block;

}

 

 

PanelBar
Arpit
Top achievements
Rank 1
 answered on 15 Dec 2017
2 answers
258 views
How to remove scroll bar from Radpanel item
I am attaching the image. How can i remove scroll bar from radpanel items.
PanelBar
Arpit
Top achievements
Rank 1
 answered on 13 Dec 2017
2 answers
181 views
How to reset image icon size in Radpanel item
I am attaching the screenshot.How can i reset left side recycle Image icon size to Height =30 and Width=30
PanelBar
Arpit
Top achievements
Rank 1
 answered on 13 Dec 2017
1 answer
217 views
How to set RadPanelItem. Text property using c# code block

I have a problem with binding text property. How can i set the text property of the RadPanelItem?

    <telerik:RadPanelBar RenderMode="Lightweight" ID="RadPanelbar2" runat="server" ExpandMode="MultipleExpandedItems" Width="100%">
                                        <Items>
                                            <telerik:RadPanelItem runat="server" Value="1" Text='<%# String.Format("General info {0:000000}", Eval("Id")) %>'     Expanded="true">
                                                <Items>
                                                    <telerik:RadPanelItem runat="server">
                                                        <ItemTemplate>
                                                            <asp:FormView runat="server" ID="fvGeneral" DataSourceID="odsGeneral" DataKeyNames="TaskId" Width="100%" OnDataBound="fvGeneral_DataBound">
                                                                <ItemTemplate>

PanelBar
Rumen
Telerik team
 answered on 11 Dec 2017
14 answers
568 views
RadPanelBar with "Load on demand" items
I have a scenario where I would like to use User Controls as items of a my Panel Bar and I only want the contents for the User Controls to be loaded (i.e. made visible on the server-side) when the Panel Item that contains the control is expanded. I.e. I would like the contents of a Panel Item to be "loaded on demand". (I am aware that if a User Control is not visible, that the control "is processed" until the rendering stage of the page life cycle, but my aim with this "load on demand" functionality is to minimize the amount of HTML on the clients side until it is "really needed"/requested)

Do you guys have any examples of such a scenario? Or would you not suggest using a RadPanelBar for this?
PanelBar
Nagendra
Top achievements
Rank 1
 answered on 08 Dec 2017
2 answers
126 views
RadPanelBar Rendering

Hello,

I’m trying to DataBind a RadPanelBar but with no success.

Everything works fine when the RadPanelBar is not bound to data and we get the expected rendering. The moment the RadPanel gets bound to data only the parent RadPanelItem is displayed and the HTML in the Child RadPanelItem are not displayed. The RadPanelBar is bound to a Generic List. And I have also verified the exactitude of the dynamic data coming fetched from the DataBase.

Can find the code behind & ASPX attached.

<P><%@ Page Title="" Language="C#" MasterPageFile="~/boris.Master" 
AutoEventWireup="true"<BR>    
CodeBehind="rejsekort_GUI_underside.aspx.cs" 
Inherits="Boris.rejsekort_GUI_underside" %></P>
<P><asp:Content ID="Content1" ContentPlaceHolderID="bottom" 
runat="server"><BR>    <div 
class="dashboardPanelbar"><BR>        
<telerik:RadPanelBar ID="panelBarDashboard" runat="server" Width="100%" 
EnableEmbeddedSkins="false"<BR>            
OnItemDataBound="panelBarDashboard_ItemDataBound" Skin="None" 
OnPreRender="panelBarDashboard_PreRender"<BR>            
CollapseDelay="100" ExpandDelay="100" BorderStyle="None" 
ExpandMode="SingleExpandedItem" 
AllowCollapseAllItems="true"><BR>            
<Items><BR>                
<telerik:RadPanelItem ImageUrl="Styles/Images/1318514913_clean.png" 
Text="Henrik Hansen - 
Person"<BR>                    
Expanded="true" CssClass="roundedRadPanelItemFirst" 
AccessKey="1"><BR>                    
<Items><BR>                        
<telerik:RadPanelItem><BR>                            
<ItemTemplate><BR>                                
<div 
class="dashboardPanelbarItems"><BR>                                    
<table 
class="mainTable"><BR>                                        
<tr><BR>                                            
<td style="width: 
50%"><BR>                                                
<div 
class="divRadPanelItemLeft"><BR>                                                    
<span 
class="spanRadPanelItemLegend">CARD</span><BR>                                                        
<table cellspacing="0" width="90%" 
class="leftTable"><BR>                                                        
<tr 
class="leftTableItemColor"><BR>                                                            
<td><BR>                                                                
Balance<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
300 
kr.<BR>                                                                
<%# 
Eval("CardBalance")%><BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
<a href="#">Reload 
Saldo</a><BR>                                                                
<br 
/><BR>                                                                
<a href="#">Saldo 
modification</a><BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr 
class="leftTableAlternateColor"><BR>                                                            
<td><BR>                                                                
Expiry 
date<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
14-06-2012<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
&nbsp;<BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr 
class="leftTableItemColor"><BR>                                                            
<td><BR>                                                                
Reload 
contract<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
300 kr.<br 
/><BR>                                                                
Min. 50 kr.<br 
/><BR>                                                                
2 
daglige<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
&nbsp;<BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr><BR>                                                            
<td 
colspan="3"><BR>                                                                
&nbsp;<BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr><BR>                                                            
<td colspan="3" 
align="right"><BR>                                                                
<telerik:RadButton ID="btnViewEditCard" runat="server" Text="View / Edit 
card" 
EnableEmbeddedSkins="false"<BR>                                                                    
Skin="ThalesSkin" OnClick="btnViewEditCard_Click" CommandArgument="1" 
AccessKey="n"<BR>                                                                    
OnPreRender="btnViewEditCard_PreRender"><BR>                                                                
</telerik:RadButton><BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr><BR>                                                            
<td 
colspan="3"><BR>                                                                
&nbsp;<BR>                                                            
</td><BR>                                                        
</tr><BR>                                                    
</table><BR>                                                
</div><BR>                                            
</td><BR>                                            
<td style="width: 
50%"><BR>                                                
<div 
class="divRadPanelItemRight"><BR>                                                    
<span 
class="spanRadPanelItemLegend">SETTINGS</span><BR>                                                    
<table cellspacing="0" width="90%" 
class="rightTable"><BR>                                                        
<tr 
class="rightTableItemColor"><BR>                                                            
<td><BR>                                                                
Passsengers<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
Adult: 2<br 
/><BR>                                                                
Children 13-17 : 2<br 
/><BR>                                                                
Dog : 
1<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
&nbsp;<BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr 
class="rightTableAlternateColor"><BR>                                                            
<td><BR>                                                                
Products on 
card<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
Season 
pass<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
<a href="#">View 
details</a><BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr 
class="rightTableItemColor"><BR>                                                            
<td><BR>                                                                
Current<BR>                                                                
<br 
/><BR>                                                                
discount 
level<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
East: 
4<BR>                                                                
<br 
/><BR>                                                                
West: 2<br 
/><BR>                                                                
Across : 
0<BR>                                                            
</td><BR>                                                            
<td 
valign="top"><BR>                                                                
<a href="#">View discount 
details</a><BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr 
class="rightTableAlternateColor"><BR>                                                            
<td><BR>                                                                
Until 
:<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
30-09-2011<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
&nbsp;<BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr><BR>                                                            
<td 
colspan="3"><BR>                                                                
&nbsp;<BR>                                                            
</td><BR>                                                        
</tr><BR>                                                    
</table><BR>                                                
</div><BR>                                            
</td><BR>                                        
</tr><BR>                                    
</table><BR>                                
</div><BR>                            
</ItemTemplate><BR>                        
</telerik:RadPanelItem><BR>                    
</Items><BR>                
</telerik:RadPanelItem><BR>                
<telerik:RadPanelItem ImageUrl="Styles/Images/1318514913_clean.png" 
Text="Henrik Hansen - 
Person"<BR>                    
Expanded="false" CssClass="roundedRadPanelItem" 
AccessKey="2"><BR>                    
<Items><BR>                        
<telerik:RadPanelItem><BR>                            
<ItemTemplate><BR>                                
<div 
class="dashboardPanelbarItems"><BR>                                    
<table 
class="mainTable"><BR>                                        
<tr><BR>                                            
<td style="width: 
50%"><BR>                                                
<div 
class="divRadPanelItemLeft"><BR>                                                    
<span 
class="spanRadPanelItemLegend">CARD</span><BR>                                                    
<table cellspacing="0" width="90%" 
class="leftTable"><BR>                                                        
<tr 
class="leftTableItemColor"><BR>                                                            
<td><BR>                                                                
Balance<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
300 
kr.<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
<a href="#">Reload 
Saldo</a><BR>                                                                
<br 
/><BR>                                                                
<a href="#">Saldo 
modification</a><BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr 
class="leftTableAlternateColor"><BR>                                                            
<td><BR>                                                                
Expiry 
date<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
14-06-2012<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
&nbsp;<BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr 
class="leftTableItemColor"><BR>                                                            
<td><BR>                                                                
Reload 
contract<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
300 kr.<br 
/><BR>                                                                
Min. 50 kr.<br 
/><BR>                                                                
2 
daglige<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
&nbsp;<BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr><BR>                                                            
<td 
colspan="3"><BR>                                                                
&nbsp;<BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr><BR>                                                            
<td colspan="3" 
align="right"><BR>                                                                
<telerik:RadButton ID="btnViewEditCard" runat="server" Text="View / Edit 
card" 
EnableEmbeddedSkins="false"<BR>                                                                    
Skin="ThalesSkin" OnClick="btnViewEditCard_Click" CommandArgument="2" 
AccessKey="n" 
/><BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr><BR>                                                            
<td 
colspan="3"><BR>                                                                
&nbsp;<BR>                                                            
</td><BR>                                                        
</tr><BR>                                                    
</table><BR>                                                
</div><BR>                                            
</td><BR>                                            
<td style="width: 
50%"><BR>                                                
<div 
class="divRadPanelItemRight"><BR>                                                    
<span 
class="spanRadPanelItemLegend">SETTINGS</span><BR>                                                    
<table cellspacing="0" width="90%" 
class="rightTable"><BR>                                                        
<tr 
class="rightTableItemColor"><BR>                                                            
<td><BR>                                                                
Passsengers<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
Adult: 2<br 
/><BR>                                                                
Children 13-17 : 2<br 
/><BR>                                                                
Dog : 
1<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
&nbsp;<BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr 
class="rightTableAlternateColor"><BR>                                                            
<td><BR>                                                                
Products on 
card<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
Season 
pass<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
<a href="#">View 
details</a><BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr 
class="rightTableItemColor"><BR>                                                            
<td><BR>                                                                
Current<BR>                                                                
<br 
/><BR>                                                                
discount 
level<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
East: 
4<BR>                                                                
<br 
/><BR>                                                                
West: 2<br 
/><BR>                                                                
Across : 
0<BR>                                                            
</td><BR>                                                            
<td 
valign="top"><BR>                                                                
<a href="#">View discount 
details</a><BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr 
class="rightTableAlternateColor"><BR>                                                            
<td><BR>                                                                
Until 
:<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
30-09-2011<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
&nbsp;<BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr><BR>                                                            
<td 
colspan="3"><BR>                                                                
&nbsp;<BR>                                                            
</td><BR>                                                        
</tr><BR>                                                    
</table><BR>                                                
</div><BR>                                            
</td><BR>                                        
</tr><BR>                                    
</table><BR>                                
</div><BR>                            
</ItemTemplate><BR>                        
</telerik:RadPanelItem><BR>                    
</Items><BR>                
</telerik:RadPanelItem><BR>                
<telerik:RadPanelItem ImageUrl="Styles/Images/1318514913_clean.png" 
Text="Henrik Hansen - 
Person"<BR>                    
Expanded="false" CssClass="roundedRadPanelItem" 
AccessKey="3"><BR>                    
<Items><BR>                        
<telerik:RadPanelItem><BR>                            
<ItemTemplate><BR>                                
<div 
class="dashboardPanelbarItems"><BR>                                    
<table 
class="mainTable"><BR>                                        
<tr><BR>                                            
<td style="width: 
50%"><BR>                                                
<div 
class="divRadPanelItemLeft"><BR>                                                    
<span 
class="spanRadPanelItemLegend">CARD</span><BR>                                                    
<table cellspacing="0" width="90%" 
class="leftTable"><BR>                                                        
<tr 
class="leftTableItemColor"><BR>                                                            
<td><BR>                                                                
Balance<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
300 
kr.<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
<a href="#">Reload 
Saldo</a><BR>                                                                
<br 
/><BR>                                                                
<a href="#">Saldo 
modification</a><BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr 
class="leftTableAlternateColor"><BR>                                                            
<td><BR>                                                                
Expiry 
date<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
14-06-2012<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
&nbsp;<BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr 
class="leftTableItemColor"><BR>                                                            
<td><BR>                                                                
Reload 
contract<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
300 kr.<br 
/><BR>                                                                
Min. 50 kr.<br 
/><BR>                                                                
2 
daglige<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
&nbsp;<BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr><BR>                                                            
<td 
colspan="3"><BR>                                                                
&nbsp;<BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr><BR>                                                            
<td colspan="3" 
align="right"><BR>                                                                
<telerik:RadButton ID="btnViewEditCard" runat="server" Text="View / Edit 
card" 
EnableEmbeddedSkins="false"<BR>                                                                    
Skin="ThalesSkin" OnClick="btnViewEditCard_Click" CommandArgument="3" 
AccessKey="n" 
/><BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr><BR>                                                            
<td 
colspan="3"><BR>                                                                
&nbsp;<BR>                                                            
</td><BR>                                                        
</tr><BR>                                                    
</table><BR>                                                
</div><BR>                                            
</td><BR>                                            
<td style="width: 
50%"><BR>                                                
<div 
class="divRadPanelItemRight"><BR>                                                    
<span 
class="spanRadPanelItemLegend">SETTINGS</span><BR>                                                    
<table cellspacing="0" width="90%" 
class="rightTable"><BR>                                                        
<tr 
class="rightTableItemColor"><BR>                                                            
<td><BR>                                                                
Passsengers<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
Adult: 2<br 
/><BR>                                                                
Children 13-17 : 2<br 
/><BR>                                                                
Dog : 
1<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
&nbsp;<BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr 
class="rightTableAlternateColor"><BR>                                                            
<td><BR>                                                                
Products on 
card<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
Season 
pass<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
<a href="#">View 
details</a><BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr 
class="rightTableItemColor"><BR>                                                            
<td><BR>                                                                
Current<BR>                                                                
<br 
/><BR>                                                                
discount 
level<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
East: 
4<BR>                                                                
<br 
/><BR>                                                                
West: 2<br 
/><BR>                                                                
Across : 
0<BR>                                                            
</td><BR>                                                            
<td 
valign="top"><BR>                                                                
<a href="#">View discount 
details</a><BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr 
class="rightTableAlternateColor"><BR>                                                            
<td><BR>                                                                
Until 
:<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
30-09-2011<BR>                                                            
</td><BR>                                                            
<td><BR>                                                                
&nbsp;<BR>                                                            
</td><BR>                                                        
</tr><BR>                                                        
<tr><BR>                                                            
<td 
colspan="3"><BR>                                                                
&nbsp;<BR>                                                            
</td><BR>                                                        
</tr><BR>                                                    
</table><BR>                                                
</div><BR>                                            
</td><BR>                                        
</tr><BR>                                    
</table><BR>                                
</div><BR>                            
</ItemTemplate><BR>                        
</telerik:RadPanelItem><BR>                    
</Items><BR>                
</telerik:RadPanelItem>            
<BR>            
</Items><BR>        
</telerik:RadPanelBar>      
<BR>        
<div><BR>            
<asp:Panel runat="server" 
ID="pnlPager"><BR>                
<asp:HyperLink ID="hlPrevious" Text="Previous" runat="server" NavigateUrl="#" 
Visible="false"></asp:HyperLink><BR>                
<asp:HyperLink ID="hlNext" Text="Next" runat="server" NavigateUrl="#" 
Visible="false"></asp:HyperLink><BR>            
</asp:Panel><BR>        
</div><BR>    </div></P>
<P>    <script language="javascript" 
type="text/javascript"></P>
<P>        function telerikModifications() 
{<BR>            /* Add 
images */<BR>            
var panelbar = document.getElementById("<%= panelBarDashboard.ClientID 
%>");<BR>            
var spanItems = 
panelbar.getElementsByTagName("span");<BR>            
var Images = 
"<%=Images%>"<BR>            
var ImagesCount = 
-1;<BR>            var 
arrImages = 
Images.split(",")<BR>            
var i = 0;<BR>            
for (i = 0; i < spanItems.length; i++) 
{<BR>                
if (spanItems[i].className == "<%=rpOut %>") 
{<BR>                    
ImagesCount++;<BR>                    
spanItems[i].innerHTML = spanItems[i].innerHTML + 
arrImages[ImagesCount];<BR>                
}</P>
<P>                
if (spanItems[i].className == "<%=rpText%>") 
{<BR>                    
spanItems[i].className = 
"";<BR>                
}<BR>            }</P>
<P>            /* Add 
Legends */<BR>            
/* <div class='roundedPanelItemLegend'>TEST TEST</div>,<div 
class='roundedPanelItemLegend'>TEST Test Test</div>,<div 
class='roundedPanelItemLegend'>TEST Test</div> should be 
dynamically<BR>            
created as shown above for the "Images" 
variable*/<BR>            
var ulItems = 
panelbar.getElementsByTagName("ul");<BR>            
i = 0;<BR>            for 
(i = 0; i < ulItems.length; i++) 
{<BR>                
if (ulItems[i].className.indexOf("rpRootGroup") != -1) 
{<BR>                    
var liItems = 
ulItems[i].getElementsByTagName("li");<BR>                    
var lis = 
"<%=Legends%>"<BR>                    
var lisCount = 
-1;<BR>                    
var arrlis = 
lis.split(",")<BR>                    
var x = 
0;<BR>                    
for (x = 0; x < liItems.length; x++) 
{<BR>                        
if (liItems[x].className == "rpItem rpFirst" || liItems[x].className == "rpItem" 
|| liItems[x].className == "rpItem rpLast") 
{<BR>                            
lisCount++;<BR>                            
liItems[x].innerHTML = arrlis[lisCount] + 
liItems[x].innerHTML;<BR>                        
}<BR>                    
}</P>
<P>                
}<BR>            
}<BR>        }</P>
<P><BR>        function 
telerikRadButtonModifications() 
{<BR>            var 
radPanel = document.getElementById("<%= panelBarDashboard.ClientID 
%>");<BR>            
var atags = 
radPanel.getElementsByTagName("a");<BR>            
i = 0;<BR>            for 
(i = 0; i < atags.length; i++) 
{<BR>                
if (atags[i].className.indexOf("RadButton") != -1) 
{<BR>                    
atags[i].removeAttribute("href");<BR>                    
var 
tindex;<BR>                    
tindex = 
atags[i].tabIndex;<BR>                    
var 
button;<BR>                    
button = 
atags[i].getElementsByTagName("input")[0];<BR>                    
button.setAttribute("tabIndex", 
tindex);<BR>                
}<BR>            
}<BR>        }</P>
<P>     </P>
<P>    </script><BR>    <script 
type="text/javascript" 
src="Scripts/Telerik.js?<%=Guid%>"></script><BR></asp:Content><BR></P><BR><BR>

Here is the code-behind used...

panelBarDashboard.DataTextField = 
"CardDisplayId";<BR>panelBarDashboard.DataFieldID = 
"CardInternalId";<BR>panelBarDashboard.DataFieldParentID = 
"ParentID";            
<BR>panelBarDashboard.DataSource = 
cardsDisplayed;<BR>panelBarDashboard.DataBind();<BR><BR>
Awaiting your valudable inputs.

Thanks & regards
Clement
PanelBar
Nagendra
Top achievements
Rank 1
 answered on 08 Dec 2017
1 answer
39 views
depth in itemdataboud

Is it possible to discover e.Item depth in itemdatabound?

 

Marc

PanelBar
Peter Milchev
Telerik team
 answered on 06 Dec 2017
Narrow your results
Done
Selected tags
PanelBar
Tags
Grid
General Discussions
Editor
Scheduler
ComboBox
Ajax
Window
TreeView
Menu
Calendar
Chart (Obsolete)
TabStrip
Input
Dock
ToolTip
Upload (Obsolete)
AsyncUpload
WebParts for SharePoint
FileExplorer
Splitter
ListBox
Chart (HTML5)
Rotator
ListView
Button
ToolBar
TreeList
Sharepoint Integration
FormDecorator
Filter
Slider
ScriptManager and StyleSheetManager
UI for ASP.NET AJAX in ASP.NET MVC
AutoCompleteBox
PivotGrid
Installer and VS Extensions
Spell
Documentation and Tutorials
ImageEditor
Captcha
RibbonBar
DropDownList
OrgChart
Visual Style Builder
DropDownTree
Gantt
ColorPicker
Notification
BinaryImage
SkinManager
TileList
Wizard
SearchBox
Spreadsheet
Map
ImageGallery
Rating
DatePicker
MediaPlayer
XmlHttpPanel
Diagram
Compression
DataPager
SiteMap
CloudUpload
LightBox
Gauge
PageLayout
AjaxLoadingPanel
Navigation
SocialShare
DataForm
Persistence Framework
ClientExportManager
ProgressArea
TagCloud
CheckBox
AjaxPanel
Barcode
ClientDataSource
NumericTextBox
PdfViewer
DateTimePicker
MultiColumnComboBox
MultiSelect
MaskedTextBox
RadioButtonList
Theme Builder
Styling
ProgressBar
DateInput
Chat
ODataDataSource
MonthYearPicker
Licensing
TimePicker
LinkButton
ToggleButton
Accessibility
Label
Localization
TreeMap
Security
DateRangePicker
ImageButton
InputManager
Timeline
Card
Drawer
PushButton
Ticker
Signature
Avatar
Switch
Breadcrumb
SplitButton
DragDropManager
Stepper
FloatingActionButton
Chip
ChipList
AIPrompt
Badge
+123 more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
1 2
3
4 5
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
Want to show your ninja superpower to fellow developers?
Learn how