This is a migrated thread and some comments may be shown as answers.

PanelBar - Collapse image is not visible

7 Answers 133 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Shouvik
Top achievements
Rank 1
Shouvik asked on 03 Dec 2013, 06:08 AM
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


7 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 03 Dec 2013, 11:05 AM
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.
0
Shouvik
Top achievements
Rank 1
answered on 03 Dec 2013, 12:28 PM
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
0
Shinu
Top achievements
Rank 2
answered on 04 Dec 2013, 10:49 AM
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.
0
Shouvik
Top achievements
Rank 1
answered on 04 Dec 2013, 12:11 PM
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
0
Kate
Telerik team
answered on 09 Dec 2013, 09:53 AM
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.
0
Shouvik
Top achievements
Rank 1
answered on 10 Dec 2013, 11:07 AM

 

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
0
Kate
Telerik team
answered on 12 Dec 2013, 04:59 PM
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.
Tags
PanelBar
Asked by
Shouvik
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Shouvik
Top achievements
Rank 1
Kate
Telerik team
Share this question
or