Bunch's Blog

One day I'll have a catchy subtitle, one day
posts - 77, comments - 89, trackbacks - 0

My Links

News

Tag Cloud

Archives

Green

Loading Data on a Ajax TabPanel Click

Here is one way to have data load only when a TabPanel is clicked. In my example I have an aspx page with a TabContainer, two TabPanels both with their own ObjectDataSources that fill GridViews. The first tab’s ObjectDataSource and GridView will run on the page load and that is fine since it would be the first thing a user sees. The overall idea is to have the ObjectDataSource for the second tab to not run on the page load and then have the GridView on the second tab databind only when the tab is clicked (this happens in ActiveTabChanged).

First set the datasource to not select on the intial page load like:

 

Protected Sub odsTab2_Selecting(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.ObjectDataSourceSelectingEventArgs) Handles odsTab2.Selecting

   If Not Page.IsPostBack Then e.Cancel = True

End Sub

-or-

protected void odsTab2_Selecting(object sender, ObjectDataSourceSelectingEventArgs e)
    {
        if (!Page.IsPostBack) e.Cancel = true;
    }

 

Then set the TabContainer’s autopostback property to True and add in the following code behind (note that the ClientID will vary based on your code):

 

Protected Sub TabContainer1_ActiveTabChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles TabContainer1.ActiveTabChanged

   Dim tabID As String

   tabID = TabContainer1.ActiveTab.ClientID

   If tabID = "ctl00_ContentPlaceHolder1_TabContainer1_tpTab2" Then

      gvTab2.DataBind()

   End If

-or-

protected void TabContainer1_ActiveTabChanged(object sender, EventArgs e)
    {
        string tabID;
        tabID = TabContainer1.ActiveTab.ClientID;
        if (tabID == "ctl100_ContentPlaceHolder1_TabContainer1_tpTab2")
        {
            gvTab2.DataBind();
        }
    }

End Sub

Technorati Tags: ,,,,
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati

Print | posted on Friday, May 15, 2009 10:48 AM |

Feedback

Gravatar

# re: Loading Data on a Ajax TabPanel Click

Wow! Thanks for posting this!
10/21/2009 5:17 AM | blueyybaby
Gravatar

# re: Loading Data on a Ajax TabPanel Click

Hi,

thanks for the post.

I have a data grid inside an Ajax tab panel inside a container.
I cannot find where to cancel the loading of the data in the second tab - this: odsTab2_Selecting(object sender, ObjectDataSourceSelectingEventArgs e)

Where should I cancel the loading please (in which method - I do not have any OnSelecting methods available)?

Thanks,
Ioana
6/24/2010 8:09 AM | Ioana
Post A Comment
Title:
Name:
Email:
Website:
Comment:
Verification:
 
 

Powered by: