PanelBar - Collapse image is not visible

[Shouvik]

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

[Shinu]

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.

[Shouvik]

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

[Shinu]

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.

[Shouvik]

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

[Kate]

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

[Shouvik]

 

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

[Kate]

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