Saturday, March 24, 2012

How do I add an image button to a tab on a AJAX TabControl dynamically at runtime

How do I add an image button to a tab dynamically at runtime so that it replicates the codebehind version :-

<

ajaxToolkit:TabPanelrunat="server"ID="tabA"HeaderText=""><HeaderTemplate><asp:ImageButtonrunat="server"ID="refreshTabA"ImageUrl="./img/Refresh.gif"OnClick="refreshTabA_OnClick"/><spanstyle="">Tab A</span></HeaderTemplate>

I am building my Tabs on my TabControl dynamically and in each of the tabs I have a ReportViewer control. (So I can display multiple reports on a page 1 tab per report), this bit works ok which adds the tab and the tab title and the report, just the image button on the tab I'm missing.

TabPanel tabPanel =newTabPanel(); // Create Tab dynanically

tabPanel.ID =

"tab" + ReportName;

tabPanel.HeaderText = DisplayName;

ReportViewer reportViewer =newReportViewer(); // Create report

tabPanel.Controls.Add(reportViewer);// Add report dynamically to TabTabContainer1.Tabs.Add(tabPanel);// Add Tab to Tab Container

After much searching on the web I think I have found a solution

// Create Tab dynanically

TabPanel tabPanel =newTabPanel();

// Assign a new header template with the image and report Info which is a simple

class holding ReportName and DisplayName

tabPanel.HeaderTemplate =

newDynamicallyCreatedTemplate(ListItemType.Header, reportConfig);

Then create your Template Class

1 public class DynamicallyCreatedTemplate : ITemplate
2 {
3 //A variable to hold the type of ImageButton.
4 ListItemType _itemType;
5 ReportInfo _reportInfo;
6
7 //Constructor where we define the template type and column name.
8 public DynamicallyTemplate(ListItemType itemType, ReportInfo reportInfo)
9 {
10 //Stores the template type.
11 _itemType = itemType;
12 _reportInfo = reportInfo;
13 }
14
15 public void InstantiateIn(System.Web.UI.Control container)
16 {
17 try
18 {
19 switch (_itemType)
20 {
21 case ListItemType.Header:
22
23 // First Add the Image Button
24 ImageButton imgButton =new ImageButton();
25 imgButton.ID ="img" + _reportInfo.ReportName;
26 imgButton.ImageUrl = @."./img/Refresh.gif";
27 imgButton.Click +=new ImageClickEventHandler(refreshTabA_OnClick);
28 imgButton.ToolTip ="Refresh";
29 container.Controls.Add(imgButton);
30
31 // Then add the Tab Label
32 Literal header_ltrl =new Literal();
33 header_ltrl.Text =" " + _reportInfo.DisplayName;
34 container.Controls.Add(header_ltrl);
35 break;
36 case ListItemType.Item:break;
37 }
38 }
39 catch
40 {
41 }
42 }
43 }


hi all,

i have 3 tabs in my tabcontainer generated dynamically.

for each tab header i need to have a different active image and deactive image

eg

tab1 (active1.gif, inactive1.gif)

tab2 (active2.gif ,inactive2.gif)

has anyone tried out this.

Pls help

Thanks.

No comments:

Post a Comment