Hide <li> element of RadPanelItem

8 posts, 0 answers
  1. Tonino
    Tonino avatar
    107 posts
    Member since:
    Nov 2007

    Posted 12 Nov 2013 Link to this post

    Hello!

    I have a RadPanelBar with some items. Now I would like to hide some RadPanelItems using 
    style="display: none;" (instead of Visible=false) as I need the data inside RadPanelItem on postpack.
    The RadPanelItem hides as expected, but there are still <li> elements visible.

    Is there a way to hide this <li> elements too?

    Regards,
    Tonino.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 13 Nov 2013 Link to this post

    Hi Tonino,

    Please have a look into the code snippet to hide the List element of RadPanelItem and show the List element  on RadButton OnClick event.

    ASPX:
    <telerik:RadPanelBar ID="RadPanelBar1" runat="server">
        <Items>
            <telerik:RadPanelItem Text="PanelItem1" runat="server">
            </telerik:RadPanelItem>
            <telerik:RadPanelItem Text="PanelItem2" runat="server" Style="display: none;">
                <ItemTemplate>
                    <ul id="List1" runat="server" style="display: none;">
                        <li>List 1 </li>
                        <li>List 2</li>
                        <li>List 3</li>
                    </ul>
                </ItemTemplate>
            </telerik:RadPanelItem>
        </Items>
    </telerik:RadPanelBar>
    <telerik:RadButton ID="RadButton1" runat="server" Text="Show PanelItem" OnClick="RadButton1_Click">
    </telerik:RadButton>

    C#:
    protected void RadButton1_Click(object sender, EventArgs e)
    {
        RadPanelItem item = RadPanelBar1.FindItemByText("PanelItem2");
        item.Style.Add("display", "block");
        System.Web.UI.HtmlControls.HtmlGenericControl list = (System.Web.UI.HtmlControls.HtmlGenericControl)item.FindControl("List1");
        list.Style.Add("display", "block");
    }

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tonino
    Tonino avatar
    107 posts
    Member since:
    Nov 2007

    Posted 14 Nov 2013 Link to this post

    Hi Shinu

    Thanks for your reply!

    Your code works as expected. I forgot to mention that I am using the classic RadPanelItem..

    I replaced the controls in your code with the classic controls and the problem occurs there.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadPanelBarClassic.aspx.cs" Inherits="RadPanelBar" %>
     
    <%@ Register Assembly="RadPanelbar.Net2" Namespace="Telerik.WebControls" TagPrefix="radP" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
     
           <radP:RadPanelBar ID="RadPanelBar1" runat="server">
              <Items>
                 <radP:RadPanelItem Text="PanelItem1" runat="server">
                 </radP:RadPanelItem>
                 <radP:RadPanelItem Text="PanelItem2" runat="server" Style="display: none;">
                    <ItemTemplate>
                       <ul id="List1" runat="server" style="display: none;">
                          <li>List 1 </li>
                          <li>List 2</li>
                          <li>List 3</li>
                       </ul>
                    </ItemTemplate>
                 </radP:RadPanelItem>
              </Items>
           </radP:RadPanelBar>
     
           <asp:Button ID="ShowPanelItem" runat="server" Text="Show PanelItem" OnClick="ShowPanelItem_Click" />
           <asp:Button ID="HidePanelItem" runat="server" Text="Hide PanelItem" OnClick="HidePanelItem_Click" />
     
        </div>
        </form>
    </body>
    </html>

    Attached you find a picture that shows that the hidden PanelBarItem is still using some space. Upgrading to the new telerik controls is not an option for now.

    Regards,
    Tonino.
  5. Mário
    Mário avatar
    10 posts
    Member since:
    Jun 2014

    Posted 17 Jun 2014 Link to this post

    Hello,

    About the RadPanelItem. I could use a little help.

    I want to do a simple thing: when I click in a RadPanelItem, a new RadPanelItem will be created under the clicked one. When I click in the new RadPanelItem, it desappears and shows the content of the first RadPanelItem clicked.
                                            
    I have this to indicate what I am trying to do:

    <telerik:RadPanelItem ImageUrl="Images/Menu/NovosProcessos.gif" Text="Processos Novos" Value="NovosProcessos.aspx" Selected="true" />
    <telerik:RadPanelItem ImageUrl="Images/Menu/ProcessosPendentes.gif" Text="Os Meus Processos" Value="ListaProcessos.aspx?Pesquisa=0" />
    <%--<telerik:RadPanelItem ImageUrl="Images/Botao/back.gif" Text="Voltar ao Processo" Value="ListaProcessos.aspx?Pesquisa=0" Visible="false"/>--%>

    And this for a beggining, which is not working for me:

    protected void RadPanelbar1_ItemClick(object sender, RadPanelBarEventArgs e)
    {
        if (e.Item.Owner is RadPanelItem)
        {
            RadPanelItem parentItem = (RadPanelItem)e.Item.Owner;
     
            switch (parentItem.Text)
            {
                case "Os Meus Processos":
                    RadPanelItem NewItem = new RadPanelItem();
                    NewItem.Text = "New " + e.Item.Text;
                    //Adds item to the Items Collection of the item's owner
                    e.Item.Owner.Items.Add(NewItem);
                    break;
            }
        }
    }

    If you could help i would vastly appreciate.
    Thanks,
    Mário

     
  6. Mário
    Mário avatar
    10 posts
    Member since:
    Jun 2014

    Posted 17 Jun 2014 Link to this post

    Ok, i noted some wrong references above but it's not working anyway:

    protected void RadPanelbar1_ItemClick(object sender, RadPanelBarEventArgs e)
    {
        if (e.Item.Owner is RadPanelItem)
        {
            RadPanelItem parentItem = (RadPanelItem)e.Item.Owner;
     
            switch (parentItem.Text)
            {
                case "Os Meus Processos":
                    RadPanelItem NewItem = new RadPanelItem();
                    NewItem.Text = "New " + parentItem.Text;
                    //Adds item to the Items Collection of the item's owner
                    parentItem.Items.Add(NewItem);
                    break;
            }
        }
    }
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 18 Jun 2014 in reply to Mário Link to this post

    Hi Mário,

    Please try the below sample code snippet to add a new RadPanelItem dynamically.

    ASPX:
    <telerik:RadPanelBar ID="rpnlDemo" runat="server" OnItemClick="rpnlDemo_ItemClick">
        <Items>
            <telerik:RadPanelItem ImageUrl="Images/Menu/NovosProcessos.gif" Text="Processos Novos" Value="NovosProcessos.aspx" Selected="true" />
            <telerik:RadPanelItem ImageUrl="Images/Menu/ProcessosPendentes.gif" Text="Os Meus Processos" Value="ListaProcessos.aspx?Pesquisa=0" />
        </Items>
    </telerik:RadPanelBar>

    C#:
    protected void rpnlDemo_ItemClick(object sender, Telerik.Web.UI.RadPanelBarEventArgs e)
    {
        RadPanelItem panelItem = (RadPanelItem)e.Item;
        switch (panelItem.Text)
        {
            case "Processos Novos":
                RadPanelItem NewItem = new RadPanelItem();
                NewItem.Text = "New " + e.Item.Text;
                panelItem.Items.Add(NewItem);
                break;
            case "Os Meus Processos":
                RadPanelItem NewItem1 = new RadPanelItem();
                NewItem1.Text = "New " + e.Item.Text;
                panelItem.Items.Add(NewItem1);
                break;
        }
    }

    Thanks,
    Princy.
  8. Mário
    Mário avatar
    10 posts
    Member since:
    Jun 2014

    Posted 18 Jun 2014 Link to this post

    Thanks Prince.

    But, besides i had shown the intention in creating a RadPanelItem dinamically by the snipped i provided, this isn't what i really want to do.

    I really want to use the Visible property or semething alike.

    Like i explained, now in a new way: when I click in a RadPanelItem, a new RadPanelItem will be MADE VISIBLE under the clicked one. When I click in the new RadPanelItem, it will be MADE INVISIBLE and shows the content of the first RadPanelItem clicked.

    So, i want something like this:

    <telerik:RadPane runat="server" ID="contentPane" Scrolling="none">
                    <telerik:RadSplitter runat="server" ID="RadSplitter2" BorderStyle="None" PanesBorderSize="0">
                        <telerik:RadPane runat="Server" ID="leftPane" Width="240px" MinWidth="240" MaxWidth="600"
                            Scrolling="None">
                            <telerik:RadPanelBar runat="server" ID="RadPanelBar1" Width="100%" Height="100%" ExpandMode="FullExpandedItem"
                                OnClientItemClicked="onItemClicking" OnItemClick="rpnl_ItemClick">
                                <Items>
                                    <telerik:RadPanelItem Text="Processos" ImageUrl="~/Images/Menu/Processos_Big.png" Expanded="true">
                                        <Items>
                                            <telerik:RadPanelItem ImageUrl="Images/Menu/NovosProcessos.gif" Text="Processos Novos" Value="NovosProcessos.aspx" Selected="true" />
                                            <telerik:RadPanelItem ImageUrl="Images/Menu/ProcessosPendentes.gif" Text="Os Meus Processos" Value="ListaProcessos.aspx?Pesquisa=0" />
                                            <telerik:RadPanelItem ImageUrl="Images/Botao/back.gif" Text="Voltar ao Processo" Value="ListaProcessos.aspx?Pesquisa=0" Visible="false"/>
                                            <telerik:RadPanelItem ImageUrl="Images/Menu/PesquisarProcessos.gif" Text="Pesquisa Processos" Value="ListaProcessos.aspx?Pesquisa=1">
                                                <Items>
                                                    <telerik:RadPanelItem>
                                                        <ItemTemplate>
                                                            <table width="100%">
                                                                <tr>...

    And for start i'm using this:

    protected void rpnl_ItemClick(object sender, Telerik.Web.UI.RadPanelBarEventArgs e)
    {
        RadPanelItem panelItem = (RadPanelItem)e.Item.Owner;
        switch (panelItem.Text)
        {
            case "Os Meus Processos":
                panelItem.Items.FindItemByText("Voltar ao Processo").Visible = true;
                break;
        }
    }

    But the rpnl_ItemClick event overides the default/defined value of the RadPanelItem for every RadPanelItem.

    So, the "links"/values in the RadPanelItem don't work anymore. And the RadPanelItem i want to make visible is not shown visible.

    So, i don't actually know what to do. It seams like a very simple thing. Click in a RadPanelItem and make another visible. Clicking the new one visible loads the "link"/value of the first RadPanelItem that was clicked. Just this.

    If you could give further help i apreciate. I'm new at this.

    Thank you,
    Mário








  9. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 19 Jun 2014 in reply to Mário Link to this post

    Hi Mário,

    Please have a look into the sample code snippet which will show the ChildPanelItem by clicking on the ParentPanelItem and hide it when again clicking on the ChildPanelItem.

    ASPX:
    <telerik:RadPanelBar ID="rpnlDemo" runat="server" OnItemClick="rpnlDemo_ItemClick">
        <Items>
            <telerik:RadPanelItem ImageUrl="Images/Menu/NovosProcessos.gif" Text="Processos Novos" Value="NovosProcessos.aspx" Selected="true">
                <Items>
                    <telerik:RadPanelItem Text="New Processos Novos" Visible="false">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem ImageUrl="Images/Menu/ProcessosPendentes.gif" Text="Os Meus Processos" Value="ListaProcessos.aspx?Pesquisa=0">
                <Items>
                    <telerik:RadPanelItem Text="New Os Meus Novos" Visible="false">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
        </Items>
    </telerik:RadPanelBar>

    C#:
    protected void rpnlDemo_ItemClick(object sender, Telerik.Web.UI.RadPanelBarEventArgs e)
    {
        RadPanelItem panelItem = (RadPanelItem)e.Item;
        switch (panelItem.Text)
        {
            case "Processos Novos":
                panelItem.Items.FindItemByText("New Processos Novos").Visible = true;
                break;
            case "Os Meus Processos":
                panelItem.Items.FindItemByText("New Os Meus Novos").Visible = true;
                break;
            default:
                panelItem.Visible = false;
                break;
        }
    }

    Let me know if you have any concern.
    Thanks,
    Princy.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017