PanelBar - Collapse image is not visible

8 posts, 0 answers
  1. Shouvik
    Shouvik avatar
    7 posts
    Member since:
    Dec 2013

    Posted 03 Dec 2013 Link to this post

    Hi Telerik team,
    I am using Telerik version 2013.1.220.40.
    I am unable to view the Collapse image of the RadPanelbar.
    I am trying to dynamically add a RadGrid in a RadPanelbar(created at runtime as well).
    Please see the below code for more clarification:

    Dim radPanelBarForGrids As New RadPanelBar()
    Dim panelItem As RadPanelItem = New RadPanelItem()
    panelItem.Text = drv("trcNum")
    panelItem.Expanded = True
    Dim panelForItems As New Panel() 'Created a new panel
    panelForItems.Controls.Add(escrowGrid) 'Added the grid in the panel
    panelItem.Controls.Add(panelForItems) 'Added the panel in RadPanelItem
    radPanelBarForGrids.ExpandMode = PanelBarExpandMode.FullExpandedItem
    radPanelBarForGrids.Width = Unit.Percentage(100)
    radPanelBarForGrids.Items.Add(panelItem) 'Added the RadPanelItem in RadPanelBar
    phMultiGrids.Controls.Add(radPanelBarForGrids) ' Added the RadPanelBar in a PlaceHolder

    Please see the attached image where I am unable to view the Collapse icon in my webapp.
    I need to implement this fucntionality at the earliest.
    So hoping for a quick response from you folks.

    Thanks in Advance.

    Shouvik


  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 03 Dec 2013 Link to this post

    Hi Shouvik,

    Please try the following code snippet which works fine at my end.

    ASPX:
    <telerik:RadPanelBar ID="RadPanelBar1" runat="server" ExpandMode="MultipleExpandedItems">
        <Items>
            <telerik:RadPanelItem Text="Item1" runat="server">
                <Items>
                    <telerik:RadPanelItem Text="Item1.1" runat="server">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
        </Items>
    </telerik:RadPanelBar>

    VB:
    Protected Sub Page_Init(sender As Object, e As System.EventArgs)
        DefineGridStructure()
    End Sub
    Private Sub DefineGridStructure()
        Dim grid As New RadGrid()
        grid.ID = "RadGrid1"
        grid.DataSourceID = "SqlDataSource1"
        grid.Skin = "Vista"
        grid.Width = Unit.Percentage(100)
        grid.PageSize = 15
        grid.AllowPaging = True
        grid.PagerStyle.Mode = GridPagerMode.NextPrevAndNumeric
        grid.AutoGenerateColumns = False
        'Add Customers table 
        grid.MasterTableView.Width = Unit.Percentage(100)
        grid.MasterTableView.DataKeyNames = New String() {"CustomerID"}
        Dim boundColumn As New GridBoundColumn()
        boundColumn.DataField = "CustomerID"
        boundColumn.HeaderText = "Customer ID"
        grid.MasterTableView.Columns.Add(boundColumn)
        boundColumn = New GridBoundColumn()
        boundColumn.DataField = "ContactName"
        boundColumn.HeaderText = "Contact Name"
        grid.MasterTableView.Columns.Add(boundColumn)
        RadPanelBar1.Items(0).Controls.Add(grid)
    End Sub

    Please provide your code it it doesn't help.
    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shouvik
    Shouvik avatar
    7 posts
    Member since:
    Dec 2013

    Posted 03 Dec 2013 Link to this post

    Hi Shinu,
    Thanks for the response.
    I have multiple grids(changes dynamically) for which i will have to add PanelItems respectively.
    So, I don't have the liberty to add panel items at the design time.
    My main concern is Expand/Collapse image is not showing up.
    Is it that, I am missing some .js or .css files for this to work out?

    Please let me know your inputs.

    Thanks,
    Shouvik
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Dec 2013 Link to this post

    Hi Shouvik,

    The RadPanelBar Expand/Collapse Image will automatically come when we are adding one Item inside the RadPanelBar. So there is no need of any JS/CSS file. 

    Thanks,
    Shinu.
  6. Shouvik
    Shouvik avatar
    7 posts
    Member since:
    Dec 2013

    Posted 04 Dec 2013 Link to this post

    Hi Shinu,
    I was able to find the solution. Thank you so much.
    But if you see the attached image, there are some unwanted arrows which is showing up in my page.
    I have no clue where these are coming from?

    Please find the attached image.


    Thanks,
    Shouvik
  7. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 09 Dec 2013 Link to this post

    Hi Shouvik,

    Can you provide a live url that we can inspect from our side and check what is causing the look that you currently get?

    Regards,
    Kate
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  8. Shouvik
    Shouvik avatar
    7 posts
    Member since:
    Dec 2013

    Posted 10 Dec 2013 Link to this post

     

    Hi Kate,
    I am sorry I don't have any live URL to share.
    But I can share the aspx and aspx.vb code
    Aspx page code:
    <asp:PlaceHolder ID="phMultiGrids" runat="server" >
                        <telerik:RadPanelBar  ID="radPanelBarForGrids" runat="server"  AllowCollapseAllItems="True" RegisterWithScriptManager="True"
                            ExpandAnimation-Type="InOutBounce" CollapseAnimation-Type="InBounce" ExpandMode="MultipleExpandedItems"
                            EnableEmbeddedSkins ="True" OnClientItemClicking="ClientSideGridLoaing" >  
                    </telerik:RadPanelBar>
                </asp:PlaceHolder>

    aspx.vb code
    For Each drv As DataRowView In dv
    escrowGrid = DirectCast(LoadControl("~/MiscUCs/ucEscrowRecsGrid.ascx"), ucEscrowRecsGrid)
        With escrowGrid
           .TractGID = tractGID
           .BindDG()
         End With
         panelItem.Expanded = True
         panelItem.Value = String.Empty
         panelSubItem.Controls.Add(escrowGrid)
         panelItem.Items.Add(panelSubItem)
         radPanelBarForGrids.Width = Unit.Percentage(100)
         radPanelBarForGrids.Items.Add(panelItem)
     
    Next
    I am dynamically adding Panel item to each grid(usercontrol).
    Everything is working fine but those unwanted arrows which I mentioned in my previous post is causing a problem.
    The image was also attached in my previous post.


    Please let me know if you require any other details.

    Thanks,
    Shouvik
  9. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 12 Dec 2013 Link to this post

    Hello Shouvik,

    Unfortunately the code that you provided is not sufficient to replicate the issue from my side. However, here are few suggestions that you may find helpful in your case. What I believe to be the issue in your scenario are the different styles that might be coming either from the RadGrid or any other custom style that you apply to your application. For this reason you can try inspecting the elements that you have on the page with the FireBug tool (that is for FireFox browsers) and check which style is interfering with the look of the RadPanelBar control. then you can either remove it or overwrite it and change it in a appropriate way.

    Regards,
    Kate
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017