Programming Journal C#, Java, SQL and to a lesser extent HTML, CSS, XML, and regex. I made this so other programmers could benefit from my experience.

Wednesday, February 27, 2008

Lazy Load Panel Courtesy of TabContainer and UpdatePanel

Here is how I implemented a Lazy load Panel. This is a nifty way to have a mini-menu of tabs without some big data transfer happening all at once. The ASP.NET render after complete model makes incremental rendering a necessary task of the developer or else the users will take a hike. This is my adaptation of Matt Burseth's example that should be helpful to avoid the LESSTHAN%= and LESSTHAN%# problems that I had. Remember to put the js in the form tag (probably below the ScriptManager). Two parts below are the ASPX and Code Behind. ASPX:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Lazy Load Panel Page</title>

</head>
<body>
<form id="form1" runat="server">
<ajax:ScriptManager ID="ScriptManager1" runat="server">
</ajax:ScriptManager>
<script type="text/javascript" language="javascript">
//var _updateProgressDiv;

function pageLoad(sender, args) {
// register for our eveents
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);

//_updateProgressDiv = $get('ActionProgress');
}
function beginRequest(sender, args) {
// get the gridview element
var tabContainer = $get('<%= this.tcTest.ClientID %>');
alert(tabContainer);
// make it visible
// _updateProgressDiv.style.display='';
}
function endRequest(sender, args) {
// make it invisible
// _updateProgressDiv.style.display='none';
}

function clientActiveTabChanged(sender, args) {
// see if table elements for the grids exist yet
var isTab1Loaded = $get('<%= this.gv1.ClientID %>');
var isTab2Loaded = $get('<%= this.gv2.ClientID %>');
var isTab3Loaded = $get('<%= this.gv3.ClientID %>');

// if tab does not exist and it is the active tab, trigger the async-postback
alert(isTab1Loaded + ',' + isTab2Loaded + ',' + isTab3Loaded + ':' + sender.get_activeTabIndex());
if (!isTab1Loaded && sender.get_activeTabIndex() == 0) {
// load tab1
// alert('fire1');
__doPostBack('<%= btn1Trigger.UniqueID %>', '');
}
if (!isTab2Loaded && sender.get_activeTabIndex() == 1 ) {
// load tab2
// alert('fire2');
__doPostBack('<%= btn2Trigger.UniqueID %>', '');
}
if (!isTab3Loaded && sender.get_activeTabIndex() == 2 ) {
// load tab3
// alert('fire3');
__doPostBack('<%= btn3Trigger.UniqueID %>', '');
}
}
</script>
<input id="btn1Trigger" runat="server" type="button" style="display:none" onserverclick="btn1Trigger_Click" />
<input id="btn2Trigger" runat="server" type="button" style="display:none" onserverclick="btn2Trigger_Click" />
<input id="btn3Trigger" runat="server" type="button" style="display:none" onserverclick="btn3Trigger_Click" />

<div>
<ajaxc:TabContainer ID="tcTest" runat="server" OnClientActiveTabChanged="clientActiveTabChanged" ActiveTabIndex="0">
<ajaxc:TabPanel ID="tp1" runat="server" HeaderText="TabPanel1">
<ContentTemplate>
<ajax:UpdatePanel ID="upnl1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
1<br />
<asp:GridView ID="gv1" runat="server" Visible="true" DataSourceID="sqlLicStatus">
</asp:GridView>
</ContentTemplate>
<Triggers>
<ajax:AsyncPostBackTrigger ControlID="btn1Trigger" />
</Triggers>
</ajax:UpdatePanel>
</ContentTemplate>
</ajaxc:TabPanel>

<ajaxc:TabPanel ID="tp2" runat="server" HeaderText="TabPanel2">
<ContentTemplate>
<ajax:UpdatePanel ID="upnl2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
2<br />
<asp:GridView ID="gv2" runat="server" Visible="False" DataSourceID="sqlCondition" >
</asp:GridView>
</ContentTemplate>
<Triggers>
<ajax:AsyncPostBackTrigger ControlID="btn2Trigger" />
</Triggers>
</ajax:UpdatePanel>
</ContentTemplate>
</ajaxc:TabPanel>

<ajaxc:TabPanel ID="tp3" runat="server" HeaderText="TabPanel3">
<ContentTemplate>
<ajax:UpdatePanel ID="upnl3" runat="server" UpdateMode="Conditional">
<ContentTemplate>
3<br />
<asp:GridView ID="gv3" runat="server" Visible="False" DataSourceID="sqlCondition" >
</asp:GridView>
</ContentTemplate>
<Triggers>
<ajax:AsyncPostBackTrigger ControlID="btn3Trigger" />
</Triggers>
</ajax:UpdatePanel>
</ContentTemplate>
</ajaxc:TabPanel>

</ajaxc:TabContainer>
</div>





<asp:SqlDataSource ID="sqlLicStatus" runat="server"
ProviderName="System.Data.Bar"
DataSourceMode="DataReader"
ConnectionString="foo"
SelectCommand="SELECT foo FROM Validations WHERE bar=102 ORDER BY Code;">
</asp:SqlDataSource>
<asp:SqlDataSource ID="sqlCondition" runat="server"
ProviderName="System.Data.Foo"
DataSourceMode="DataReader"
ConnectionString="foo"
SelectCommand="SELECT foo FROM Validations WHERE bar=18 ORDER BY Code;">
</asp:SqlDataSource>
</form>
</body>
</html>
Code Behind:

/// <summary>
/// Lazy load TabPanel in a TabContainer
/// The update panel contents are fetched if client trigger is fired.
/// The client trigger is fired if the target tab is active and the
/// target GridView is not active (visible).
/// </summary>
public partial class Samples_LazyPanel : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void btn1Trigger_Click(object sender, EventArgs args)
{
this.gv1.Visible = true;
this.gv1.DataBind();
}
protected void btn2Trigger_Click(object sender, EventArgs args)
{
this.gv2.Visible = true;
this.gv2.DataBind();
}
protected void btn3Trigger_Click(object sender, EventArgs args)
{
this.gv3.Visible = true;
this.gv3.DataBind();
}
}

5 comments:

Anonymous said...

Hi !.
You may , perhaps very interested to know how one can manage to receive high yields .
There is no need to invest much at first. You may commense to receive yields with as small sum of money as 20-100 dollars.

AimTrust is what you need
The company incorporates an offshore structure with advanced asset management technologies in production and delivery of pipes for oil and gas.

Its head office is in Panama with affiliates everywhere: In USA, Canada, Cyprus.
Do you want to become really rich in short time?
That`s your chance That`s what you wish in the long run!

I`m happy and lucky, I began to get real money with the help of this company,
and I invite you to do the same. It`s all about how to choose a proper partner utilizes your funds in a right way - that`s the AimTrust!.
I make 2G daily, and my first deposit was 1 grand only!
It`s easy to get involved , just click this link http://umetocehig.fcpages.com/amiropex.html
and go! Let`s take our chance together to become rich

Anonymous said...

guarantees its program to work or your money back! Check out Unlock3giphone.net now, and you can have your iphone unlocked in a matter of minutes.
________________
[url=http://www.unlock-iphone.org]unlock iphone 3g[/url]

Anonymous said...

I would like to exchange links with your site www.blogger.com
Is this possible?

Anonymous said...

hey


Just saying hello while I look through the posts I'm trying to find out how to make an e-mail list with out having to spend a wad of cash on some training course


hopefully this is just what im looking for, looks like i have a lot to read Im trying to find a way to build an e-mail list.

Anonymous said...

Hi,

I begin on internet with a directory