Ajaxcontroltoolkit tabcontainer

  • Thread starter Thread starter Peter
  • Start date Start date
P

Peter

ASP.NET 3.5

I hava an Ajaxcontroltoolkit Tabcontainer on my web page and what I am
trying to do is NOT to load all of the data in the Tab Control at the
page_load event.
I want to load data after user clicks on the tab.

How can I create a event on the client side to load the data from the
server?
I've looked at the OnActiveTabChanged property, but that works only on the
post back. I've tried to set the TabControl to AutoPostback, but it's too
slow, I can usually click on serveral tabs before the firstone filres the
click event and that's without loading any data.

I've looked at the onclickentactivetabchanged event, but how do I pass which
Tab was just clicked?


Thank You


Peter
 
Hello,

You can use "get_activeTabIndex" method of tabcontainer behavior to get the
active tab index.


$find("TabContainer1").get_activeTabIndex();


In OnClientActiveTabChanged client event, you can use ASP.Net Ajax to
communicate with Web Method or Page Method to get the data from server and
update the related content via JavaScript DOM. With this approach, I think
it will be better/faster than with doing postback.

Please try the below sample.

<script runat="server" type="text/C#">
[System.Web.Services.WebMethod]
public static string GetContextMethod(int TabIndex) //This is Page
Method, you can also use Web Method for it.
{
string text = "text" + TabIndex.ToString();
return text;
}

</script>
<script type="text/javascript">
function changeActiveTab() {
var index = $find("TabContainer1").get_activeTabIndex(); //get the
current tab index
PageMethods.GetContextMethod(index, onsuccess); //call page method
via Ajax


}
function onsuccess(result) {
var newdata = result;
var index = $find("TabContainer1").get_activeTabIndex();//get the
current tab index
$find("TabContainer1").get_tabs()[index].get_element().innerHTML =
newdata;//update the related tab content

}

</script>

<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="Server"
EnablePartialRendering="true" ID="ScriptManager1"
EnablePageMethods="true"/>
<ajaxToolkit:TabContainer runat="server" ID="TabContainer1"
OnClientActiveTabChanged="changeActiveTab"
ActiveTabIndex="0">
<ajaxToolkit:TabPanel runat="server" ID="TabPanel1"
HeaderText="TabPanel1">
<ContentTemplate>
TabPanel1
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="TabPanel2"
HeaderText="TabPanel2">
<ContentTemplate>
TabPanel2
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="TabPanel3"
HeaderText="TabPanel3">
<ContentTemplate>
TabPanel3
<asp:Label ID="Label1" runat="server"
Text="Label"></asp:Label>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</form>
</body>


To get the further information about Ajax with Web Service you can check
http://dotnetslackers.com/columns/ajax/ASPNETAjaxWebService.aspx.


AjaxControlToolkit is following Microsoft Public License (Ms-PL), which is
out of the support boundaries of our managed newsgroups. Please post it to
http://forums.asp.net/1022.aspx if you'd like. It is not managed, but this
forum will provide support for AjaxControlToolkit professionally.
AjaxControlToolkit License:
http://www.codeplex.com/AjaxControlToolkit/license
MSDN Newsgroup Support Boundary:
http://blogs.msdn.com/msdnts/archive/2006/11/08/msdn-service-introduction.as
px


Sincerely,

Vince Xu

Microsoft Online Support


==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#notifications.

MSDN Managed Newsgroup support offering is for non-urgent issues where an
initial response from the community or a Microsoft Support Engineer within
2 business day is acceptable. Please note that each follow up response may
take approximately 2 business days as the support professional working with
you may need further investigation to reach the most efficient resolution.
The offering is not appropriate for situations that require urgent,
real-time or phone-based interactions. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/en-us/subscriptions/aa948874.aspx
==================================================
 
Thank You very much I will try this!


Vince Xu said:
Hello,

You can use "get_activeTabIndex" method of tabcontainer behavior to get
the
active tab index.


$find("TabContainer1").get_activeTabIndex();


In OnClientActiveTabChanged client event, you can use ASP.Net Ajax to
communicate with Web Method or Page Method to get the data from server and
update the related content via JavaScript DOM. With this approach, I think
it will be better/faster than with doing postback.

Please try the below sample.

<script runat="server" type="text/C#">
[System.Web.Services.WebMethod]
public static string GetContextMethod(int TabIndex) //This is Page
Method, you can also use Web Method for it.
{
string text = "text" + TabIndex.ToString();
return text;
}

</script>
<script type="text/javascript">
function changeActiveTab() {
var index = $find("TabContainer1").get_activeTabIndex(); //get the
current tab index
PageMethods.GetContextMethod(index, onsuccess); //call page method
via Ajax


}
function onsuccess(result) {
var newdata = result;
var index = $find("TabContainer1").get_activeTabIndex();//get the
current tab index
$find("TabContainer1").get_tabs()[index].get_element().innerHTML =
newdata;//update the related tab content

}

</script>

<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="Server"
EnablePartialRendering="true" ID="ScriptManager1"
EnablePageMethods="true"/>
<ajaxToolkit:TabContainer runat="server" ID="TabContainer1"
OnClientActiveTabChanged="changeActiveTab"
ActiveTabIndex="0">
<ajaxToolkit:TabPanel runat="server" ID="TabPanel1"
HeaderText="TabPanel1">
<ContentTemplate>
TabPanel1
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="TabPanel2"
HeaderText="TabPanel2">
<ContentTemplate>
TabPanel2
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="TabPanel3"
HeaderText="TabPanel3">
<ContentTemplate>
TabPanel3
<asp:Label ID="Label1" runat="server"
Text="Label"></asp:Label>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</form>
</body>


To get the further information about Ajax with Web Service you can check
http://dotnetslackers.com/columns/ajax/ASPNETAjaxWebService.aspx.


AjaxControlToolkit is following Microsoft Public License (Ms-PL), which is
out of the support boundaries of our managed newsgroups. Please post it to
http://forums.asp.net/1022.aspx if you'd like. It is not managed, but this
forum will provide support for AjaxControlToolkit professionally.
AjaxControlToolkit License:
http://www.codeplex.com/AjaxControlToolkit/license
MSDN Newsgroup Support Boundary:
http://blogs.msdn.com/msdnts/archive/2006/11/08/msdn-service-introduction.as
px


Sincerely,

Vince Xu

Microsoft Online Support


==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#notifications.

MSDN Managed Newsgroup support offering is for non-urgent issues where an
initial response from the community or a Microsoft Support Engineer within
2 business day is acceptable. Please note that each follow up response may
take approximately 2 business days as the support professional working
with
you may need further investigation to reach the most efficient resolution.
The offering is not appropriate for situations that require urgent,
real-time or phone-based interactions. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/en-us/subscriptions/aa948874.aspx
==================================================
Click to expand...
 
The problem is I have GridView on one of the Tabs, would using JavaScript
DOM instead a postback still will be a good idea to populate the GridView?

Vince Xu said:
Hello,

You can use "get_activeTabIndex" method of tabcontainer behavior to get
the
active tab index.


$find("TabContainer1").get_activeTabIndex();


In OnClientActiveTabChanged client event, you can use ASP.Net Ajax to
communicate with Web Method or Page Method to get the data from server and
update the related content via JavaScript DOM. With this approach, I think
it will be better/faster than with doing postback.

Please try the below sample.

<script runat="server" type="text/C#">
[System.Web.Services.WebMethod]
public static string GetContextMethod(int TabIndex) //This is Page
Method, you can also use Web Method for it.
{
string text = "text" + TabIndex.ToString();
return text;
}

</script>
<script type="text/javascript">
function changeActiveTab() {
var index = $find("TabContainer1").get_activeTabIndex(); //get the
current tab index
PageMethods.GetContextMethod(index, onsuccess); //call page method
via Ajax


}
function onsuccess(result) {
var newdata = result;
var index = $find("TabContainer1").get_activeTabIndex();//get the
current tab index
$find("TabContainer1").get_tabs()[index].get_element().innerHTML =
newdata;//update the related tab content

}

</script>

<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="Server"
EnablePartialRendering="true" ID="ScriptManager1"
EnablePageMethods="true"/>
<ajaxToolkit:TabContainer runat="server" ID="TabContainer1"
OnClientActiveTabChanged="changeActiveTab"
ActiveTabIndex="0">
<ajaxToolkit:TabPanel runat="server" ID="TabPanel1"
HeaderText="TabPanel1">
<ContentTemplate>
TabPanel1
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="TabPanel2"
HeaderText="TabPanel2">
<ContentTemplate>
TabPanel2
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="TabPanel3"
HeaderText="TabPanel3">
<ContentTemplate>
TabPanel3
<asp:Label ID="Label1" runat="server"
Text="Label"></asp:Label>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</form>
</body>


To get the further information about Ajax with Web Service you can check
http://dotnetslackers.com/columns/ajax/ASPNETAjaxWebService.aspx.


AjaxControlToolkit is following Microsoft Public License (Ms-PL), which is
out of the support boundaries of our managed newsgroups. Please post it to
http://forums.asp.net/1022.aspx if you'd like. It is not managed, but this
forum will provide support for AjaxControlToolkit professionally.
AjaxControlToolkit License:
http://www.codeplex.com/AjaxControlToolkit/license
MSDN Newsgroup Support Boundary:
http://blogs.msdn.com/msdnts/archive/2006/11/08/msdn-service-introduction.as
px


Sincerely,

Vince Xu

Microsoft Online Support


==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#notifications.

MSDN Managed Newsgroup support offering is for non-urgent issues where an
initial response from the community or a Microsoft Support Engineer within
2 business day is acceptable. Please note that each follow up response may
take approximately 2 business days as the support professional working
with
you may need further investigation to reach the most efficient resolution.
The offering is not appropriate for situations that require urgent,
real-time or phone-based interactions. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/en-us/subscriptions/aa948874.aspx
==================================================
Click to expand...
 
Back
Top