I am implementing a one time password with google authenticator for login page. After checking the user id and password is correct, I need to hidden the login box and show the QR code, OTP textbox and submit button. I saw sample using Panel.visible = true/false to switch. It is work in Page_Load to set default Panel_GoogleAuth.visible = false, but it is not work in the login button onClick event. It can't show the Panel_GoogleAuth and just hidden the login button but not the whole Panel_Login. Does anyone know why?

My reference: Sample

aspx:

<asp:Panel ID="Panel_GoogleAuth" runat="server" Font-Names="Arial" Font-Size="12pt" HorizontalAlign="Center" Width="1024px">
    <div class="row">
        <div class="col-3"></div>

        <div class="col-5">
            <fieldset class="TOTP">
                <asp:Label ID="lblScanQRCode" runat="server" Style="padding-top: 4px">Sceen the QR Code in Google Authenticator</asp:Label>
                <br />

                <asp:Image ID="imgQRCode" runat="server" Width="200" Height="200" />
                <asp:HiddenField ID="hfSecretKey" runat="server" />
                <br />
                <asp:TextBox ID="txtOTP" runat="server" placeholder="Enter One-Time-Password"></asp:TextBox>
                <asp:Button ID="btnVerify" runat="server"Text="Verify OTP" />
                <br /><br />
                <asp:Label ID="lblMessage" runat="server"></asp:Label>
            </fieldset>
        </div>
    </div>
</asp:Panel>


<telerik:RadAjaxPanel ID="StaffPanel" runat="server" Width="99%">
    <div id="wrap-content">
        <asp:Panel ID="Panel_Login" runat="server" Font-Names="Arial" Font-Size="12pt" HorizontalAlign="Center" Width="1024px">
            <asp:Login ID="LoginUser" Class="Login" runat="server" EnableViewState="false" RenderOuterTable="false">
                <div class="accountInfo">
                    <div class="row">
                        <div>
                            <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">Staff ID:</asp:Label>
                        </div>
                        <div>
                            <asp:TextBox ID="UserName" runat="server" CssClass="textEntry" Width="114%" Height="20"></asp:TextBox>
                        </div>
                    </div>

                    <div class="row">
                        <div>
                            <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password" Style="padding-top: 4px">Password</asp:Label>
                        </div>
                        <div>
                            <asp:TextBox ID="Password" runat="server" CssClass="passwordEntry" TextMode="Password" Width="114%" Height="20"></asp:TextBox>
                        </div>
                    </div>

                    <div class="row">
                        <telerik:RadButton ID="btnLogin" runat="server" Text="Login" OnClick="RadButton_LoginCheck_Click" RenderMode="Lightweight" Width="93%" Font-Size="X-Large" Skin="Silk" Height="35px" Font-Names="Arial"></telerik:RadButton>
                    </div>
                </div>
            </asp:Login>
        </asp:Panel>
    </div>
</telerik:RadAjaxPanel>

aspx.vb:

Protected Sub btnLogin_Click(sender As Object, e As System.EventArgs) Handles btnLogin.Click
    If staffIDRegex.Match(checkStaffId).Success Then
        Panel_Login.Visible = False
        Panel_GoogleAuth.Visible = True
    End If
End Sub

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

        }
    }

}

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

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

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