WebPart Development - AJAX Tab control – Tab contents not displaying

ASaikov — Wed, 01 Jul 2009 05:39:37 GMT

I found something very interesting the other day when playing around with the AJAX tab control in a custom WebPart.

I created a WebPart that displays some data using the AJAX tabcontrol and found some interesting gotchas when working with it.

Firstly I found that databinding and adding tabs to the the tab container has to be done in a specific order, otherwise no data appears.

Here is the offending code:

//Tab1
this.m_Tab1Items = this.GetTab1Data();
this.m_Tab1View = new Repeater();
this.m_Tab1View.DataSource = this.m_Tab1Items;
this.m_Tab1View.DataBind(); 
this.tabs[0].Controls.Add(this.m_Tab1View);
                
//Tab2 
this.m_Tab2Items = this.GetTab2Data();
this.m_Tab2View = new Repeater();
this.m_Tab2View.DataSource = this.m_Tab2Items;
this.m_Tab2View.DataBind(); 
this.tabs[1].Controls.Add(this.m_Tab2View);

All looks ok.

But the weird thing is that no data was appearing. I viewed the source of the page and there is actual content but no data was being displayed. Very Weird!

After much tinkering about I changed the code to what is shown below and voila! it works.

//Tab1
this.m_Tab1Items = this.GetTab1Data();
this.m_Tab1View = new Repeater();
this.m_Tab1Items.DataSource = this.m_Tab1Items;
this.m_Tab1View.DataBind(); 

                
//Tab2 
this.m_Tab2Items = this.GetTab2Data();
this.m_Tab2View = new Repeater();
this.m_Tab2Items.DataSource = this.m_Tab2Items;
this.m_Tab2View.DataBind(); 


//add tabs
this.tabs[0].Controls.Add(this.m_Tab1View);
this.tabs[1].Controls.Add(this.m_Tab2View);

It seems that the AJAX tab control is quite particular in the way it displays data.

So the order seems to be.

Retrieve the data
Bind the data to the DataSource of a repeater control
Add the Repeater control to the tab
Add the tab to the tab container.

Bingo!!!

Hopefully this saves you hours of debugging and troubleshooting!

SharePoint Technologies...from the field : AJAX

WebPart Development - AJAX Tab control – Tab contents not displaying