|
In this article we will explore how to do lazy loading in Tab. It won't be good idea to load the content of all the tab on page load, it would be good to load it when a particular tab is selected.
Let's see how we can do this.
Step1 : Register ajaxcontrol toolkit on the page.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
Step 2: Create three tabcontainer with three tabpanels. Place gridview in each tabpanel. Keep entire tabcontainer along with tabpanel and gridview in the updatepanel. Autpostback needs to be set true and Tabcontainer1_ActiveTabChanged method needs to be called on OnActiveTabChanged
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" OnActiveTabChanged="Tabcontainer1_ActiveTabChanged" AutoPostBack="true" OnClientActiveTabChanged="onUpdating" Width="500px">
<ajaxToolkit:TabPanel runat="server" HeaderText="Department" ID="Department">
<ContentTemplate>
<div style="height: 480px;">
<asp:GridView ID="gvDept" runat="server" AutoGenerateColumns="False" CellPadding="5" Font-Name="verdana" Font-Size="10pt" onselectstart="return false;" BorderStyle="Solid">
<RowStyle BackColor="#99CCFF" />
<Columns>
<asp:BoundField DataField="DepartmentId" HeaderText="Department Id" ItemStyle-VerticalAlign="Top" ItemStyle-Width="120px" />
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-VerticalAlign="Top" ItemStyle-Width="120px" />
<asp:BoundField DataField="GroupName" HeaderText="Group Name" ItemStyle-VerticalAlign="Top" ItemStyle-Width="120px" />
<asp:BoundField DataField="ModifiedDate" HeaderText="Modified Date" ItemStyle-VerticalAlign="Top" ItemStyle-Width="120px" />
</Columns>
<HeaderStyle HorizontalAlign="Left" BackColor="#003366" ForeColor="#ffffff" Font-Bold="true" Font-Size=".75em" />
</asp:GridView>
</div>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" HeaderText="Address" ID="Address">
<ContentTemplate>
<div style="height: 480px;">
<asp:GridView ID="gvAddress" runat="server" AutoGenerateColumns="False" CellPadding="5" Font-Name="verdana" Font-Size="10pt" onselectstart="return false;" BorderStyle="Solid">
<RowStyle BackColor="#99CCFF" />
<Columns>
<asp:BoundField DataField="AddressID" HeaderText="Address Id" ItemStyle-VerticalAlign="Top" ItemStyle-Width="120px" />
<asp:BoundField DataField="AddressLine1" HeaderText="Address" ItemStyle-VerticalAlign="Top" ItemStyle-Width="120px" />
<asp:BoundField DataField="City" HeaderText="City" ItemStyle-VerticalAlign="Top" ItemStyle-Width="120px" />
<asp:BoundField DataField="PostalCode" HeaderText="PostalCode" ItemStyle-VerticalAlign="Top" ItemStyle-Width="120px" />
</Columns>
<HeaderStyle HorizontalAlign="Left" BackColor="#003366" ForeColor="#ffffff" Font-Bold="true" Font-Size=".75em" />
</asp:GridView>
</div>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" HeaderText="Contact" ID="Contact">
<ContentTemplate>
<div style="height: 480px;">
<asp:GridView ID="gvContact" runat="server" AutoGenerateColumns="False" CellPadding="5" Font-Name="verdana" Font-Size="10pt" onselectstart="return false;" BorderStyle="Solid">
<RowStyle BackColor="#99CCFF" />
<Columns>
<asp:BoundField DataField="ContactID" HeaderText="Contact Id" ItemStyle-VerticalAlign="Top" ItemStyle-Width="120px" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" ItemStyle-VerticalAlign="Top" ItemStyle-Width="120px" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" ItemStyle-VerticalAlign="Top" ItemStyle-Width="120px" />
<asp:BoundField DataField="Phone" HeaderText="Phone" ItemStyle-VerticalAlign="Top" ItemStyle-Width="120px" />
</Columns>
<HeaderStyle HorizontalAlign="Left" BackColor="#003366" ForeColor="#ffffff" Font-Bold="true" Font-Size=".75em" />
</asp:GridView>
</div>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</ContentTemplate>
</asp:UpdatePanel>
Step 3: Place a updateprogress to show the waiting image on the tab while data is retrieve from server.
<asp:UpdateProgress ID="updProgressTab" AssociatedUpdatePanelID="UpdatePanel1" runat="server">
<ProgressTemplate>
<div style="background:White">
<asp:Image ID="imgLoading" runat="server" ImageUrl="ajaxload.gif" Width="34px" />Refreshing...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
Step 4: Place below javascript in the aspx page. It will place the update prgress on center of the tab.
< script language="javascript" type="text/javascript">
function onUpdating() {
var updateProgressDiv = document.getElementById('updProgressTab');
var tabCont = document.getElementById('TabContainer1');
var tabContainerBounds = Sys.UI.DomElement.getBounds(tabCont);
var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv);
var x = tabContainerBounds.x + Math.round(tabContainerBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
var y = tabContainerBounds.y + Math.round(tabContainerBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);
x = x - 40;
y = y - 40;
Sys.UI.DomElement.setLocation(updateProgressDiv, x, y);
}
</ script>
Step 5: Load the first tab data on page_load
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
LoadDepartMent();
}
Step 6: Tabcontainer1_ActiveTabChanged will be executed whenever tab will be changed. The respective tab data will be loaded based on the activetabid
protected void Tabcontainer1_ActiveTabChanged(object sender, EventArgs e)
{
string tabName = TabContainer1.ActiveTab.ID;
switch (tabName)
{
case "Department":
LoadDepartMent();
break;
case "Address":
LoadAddress();
break;
case "Contact":
LoadContact();
break;
}
}
Step 7: Now write method LoadDepartMent, LoadAddress and LoadContact to load data from different table from database.
private void LoadDepartMent()
{
string strQuery = "SELECT TOP 10 * FROM HumanResources.Department";
gvDept.DataSource = GetData(strQuery);
gvDept.DataBind();
}
private void LoadAddress()
{
string strQuery = "SELECT TOP 13 * FROM Person.Address";
gvAddress.DataSource = GetData(strQuery);
gvAddress.DataBind();
}
private void LoadContact()
{
string strQuery = "SELECT TOP 15 * FROM Person.Contact";
gvContact.DataSource = GetData(strQuery);
gvContact.DataBind();
}
private DataTable GetData(string strQuery)
{
DataTable dtDept = null;
using (SqlConnection con = new SqlConnection("Data Source=(local);Initial Catalog=AdventureWorks;Integrated Security=SSPI"))
{
con.Open();
using (SqlDataAdapter sqlAdapter = new SqlDataAdapter(strQuery, con))
{
dtDept = new DataTable();
sqlAdapter.Fill(dtDept);
}
}
return dtDept;
}
Live Demo
This ends the article of lazy loading of tab.
|