Adding Panels Programatically

[lkeel]

Hello all,

I am having several problems trying to add panels to a tabstrip.

Configuration:
Telerik.Web.UI.dll 2008.2.1001.35
VS2008
ASP.NET 3.5

Scenario:  I have a tabstrip that will have a panel bar in it, in each panel there will be a grid control.  I am adding the panels and grids within a server event. 

My aspx looks basically like:
...
                <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="radMP" SelectedIndex="0">
                    <Tabs>
                        <telerik:RadTab runat="server" Text="Identify">
                        </telerik:RadTab>
                    </Tabs>
                </telerik:RadTabStrip>
                
                
                <telerik:RadMultiPage ID="radMP" runat="server" CssClass="pageView"  SelectedIndex="0">
                    <telerik:RadPageView ID="pvIdentify" runat="server" >
                       
                        <telerik:RadPanelBar ID="pbIdentifyResults" runat="server" Skin="Vista" CssClass="panelBar" ExpandMode="FullExpandedItem"
                            EnableViewState="true">
                            <CollapseAnimation Duration="100" Type="None" />
                            <ExpandAnimation Duration="100" Type="None" />
                        </telerik:RadPanelBar>
                    </telerik:RadPageView>
                </telerik:RadMultiPage>
...
My css:
...

.pageView
{
    border: 1px solid #898c95;
    overflow: visible;
}

.panelBar
{
    width: 100%;
}

.indentifyGrid
{
    padding: 0em 1em 1em 1em;
    width: 100%;
    overflow: scroll;
}
...


My code basically looks like:
private void Identify()
{
...
              RadGrid rg = new RadGrid();
              rg.ID = "identify" + l.Title;
              rg.AllowPaging = false;
              rg.AllowFilteringByColumn = true;
              rg.AllowAutomaticDeletes = false;
              rg.AllowAutomaticInserts = false;
              rg.AllowAutomaticUpdates = false;
              rg.AllowMultiRowEdit = false;
              rg.Skin = Profile.GridSkin;
              rg.CssClass = "indentifyGrid";
              rg.AutoGenerateColumns = true;
              GridHyperLinkColumn link = new GridHyperLinkColumn();
              link.HeaderText = "View";
              link.DataTextField = "extents";
              link.DataTextFormatString = "<a href=\"#\" onclick=\"javascript:ViewTheme({0});return true;\">View On Map</a>";
              link.Visible = true;
              link.AllowFiltering = false;
              link.SortExpression = "";
              rg.Columns.Add(link);
              rg.Columns[0].ItemStyle.Width = new Unit("7em");


              SqlDataSource sds = Utilities.SpatialDataSource(sql);
              sds.DataSourceMode = SqlDataSourceMode.DataReader;
              sds.SelectCommandType = SqlDataSourceCommandType.Text;

              rg.DataSource = sds;
              rg.DataBind();
             
              RadPanelItem panel = new RadPanelItem(l.Title);
              panel.Attributes.Add("rowcnt", rg.Items.Count.ToString());
              panel.Expanded = true;

              RadPanelItem item = new RadPanelItem();
              item.Expanded = true;
              item.Value = l.Title;
              item.Controls.Add(rg);
              panel.Items.Add(item);
              this.pbIdentifyResults.Items.Add(panel);
...
}

Now my list of problems:

1. I could not get the items to expand and collapse properly with adding the items directly to the panelbar.  So I found this link: http://www.telerik.com/community/forums/thread/b311D-bgdgdd.aspx that told me to add a panel, then add another panel to that.  The problem now is that I still can't get the panels to expand.  I see them with the Expand\Collapse icon, but they won't do anything when I click on them.  I have looked at the response on the page and the html is there, just that the panelbar is hiding it.
2. This is really a styling issue that I think is only kind of related.  When I was using just a single panel right on the panelbar, I could see my grid, but it extended off the end of the page while my panelbar was only 300px or so wide.  What I really want is to have the panels extend all the way across the page (ie: width: 100%) and have the grid be contained within there.  If the grid needs to extend past that, it should have scrollbars at the bottom.  Can anyone tell me what I have wrong in my css that is causing the panelbar not to extend to the width of the page?

I know this is kind of long, but I hope I have given enough detail to get the appropriate help.

Thanks in advance,
Lee

[lkeel]

As a follow-up, I decided to try some of the other cool functionality that I saw in the demos.  I thought I would try and add a Tooltip to the items for show row count.  But I don't see my Tooltips. 

Here is my new aspx:

                <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="radMP" SelectedIndex="0">
                    <Tabs>
                        <telerik:RadTab runat="server" Text="Identify">
                        </telerik:RadTab>
                    </Tabs>
                </telerik:RadTabStrip>
                
                
                <telerik:RadMultiPage ID="radMP" runat="server" CssClass="pageView"  SelectedIndex="0">
                    <telerik:RadPageView ID="pvIdentify" runat="server" >
                        <asp:Label ID="lblNoIdentifyPerformed" runat="server"  Visible ="true"><%=ConfigurationManager.AppSettings["noidentifyperformed"] %></asp:Label>
                        <asp:Label ID="lblNoFeats" runat="server"  Visible ="false"><%=ConfigurationManager.AppSettings["noidentifyfeats"] %></asp:Label>
                        
                        <telerik:RadPanelBar ID="pbIdentifyResults" runat="server" Skin="Vista" CssClass="panelBar" ExpandMode="FullExpandedItem"
                            EnableViewState="true">
                            <CollapseAnimation Duration="100" Type="None" />
                            <ExpandAnimation Duration="100" Type="None" />
                            <ItemTemplate>
                                <telerik:RadToolTip runat="server" ID="toolTip" Sticky="false" ManualClose="false"
                                    CssClass="inspectPanelBarToolTip" RelativeTo="Element" OffsetX="10" OffsetY="0"
                                    ShowCallout="false">
                                        <dl>
                                            <dt>There were </dt>
                                            <dd><%#Container.Attributes["rowcnt"] %></dd>
                                            <dt> rows found in theme </dt>
                                            <dd><%#Container.Text %></dd>
                                        </dl>
                                    </telerik:RadToolTip>
                            </ItemTemplate>
                        </telerik:RadPanelBar>
                    </telerik:RadPageView>
                </telerik:RadMultiPage>

Here is my updated styles:

dt, dl, dd
{
    margin:0;
    padding:0;
}
dt
{
    float:left;
    font-weight:bold;
    padding-right:10px;
    width:80px;
}
dl
{
    width:90%;
    margin-left: 5px;
    float:left;
}

I should also mention that I am testing this in FF 3.0.3, so maybe there is a problem with FF???  I don't think this is the case because the demos work fine, but just throwing it out there.

Thanks again.
Lee

[Paul]

Hello Lee,

Unfortunately, the provided information does not help us much in reproducing the error. I'm afraid we could not be of much help unless we reproduce the issue on our side. It will be best if you can send us a simple running project (incl. your custom skin, CSS, images, DB backup if needed and so on) demonstrating the problem (and step-by-step instructions on doing so). In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.

Sincerely yours,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[lkeel]

Paul,

I have a sample website that I would gladly send you if you could tell me how to upload a zip file or if you would send me an email address so that I can fwd this website to you.  Please advise asap so that I can get everything sent to you in a timely manner.

Thanks,
Lee

[Paul]

Hello Lee,

Please refer to the attached screenshot for details on the matter.

All the best,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.