Share via

WebPart Development - AJAX Tab control – Tab contents not displaying

  • Article

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.

  1. Retrieve the data
  2. Bind the data to the DataSource of a repeater control
  3. Add the Repeater control to the tab
  4. Add the tab to the tab container.

Bingo!!!

Hopefully this saves you hours of debugging and troubleshooting!