Resources » Code Snippets » AJAX

AJAX tab control in asp.net


Posted Date: 07-Jul-2010  Last Updated:   Category: AJAX    
Author: Member Level: Gold    Points: 6


how to use ajax tab control with asp.net



Here i am describing a simple example how to use tab control in asp.net
Step 1:You have to ajax control in asp.net tools.
Step 2:Drag and drop tab control from ajax control tool kit
Step 3:Write the code as given below.


< ajaxToolkit:TabPanel ID="tabFirst" runat="server" Width="111px" >
< HeaderTemplate>
First Tab Header name
< /HeaderTemplate>
< ContentTemplate>
< br />
< asp:GridView ID="gvEmpDetail" runat="server" DataKeyNames="EmpId" AllowPaging="True" PageSize="12"
AutoGenerateColumns="False" OnPageIndexChanging="gvEmpDetail_PageIndexChanging"
OnRowDataBound="gvEmpDetail_RowDataBound" TabIndex="2" Width="697px" OnRowCancelingEdit="gvEmpDetail_RowCancelingEdit"
OnRowEditing="gvEmpDetail_RowEditing" OnRowUpdating="gvEmpDetail_RowUpdating"
ShowFooter="True" OnRowCommand="gvEmpDetail_RowCommand" OnRowDeleting="gvEmpDetail_RowDeleting">
< Columns>
< asp:TemplateField HeaderText="Sr. No">
< ItemTemplate>
< asp:Label ID="lblSrNo" runat="server"> </asp:Label>
< /ItemTemplate>
< ItemStyle HorizontalAlign="Center" Width="50px" />
< /asp:TemplateField>
< asp:TemplateField HeaderText="EmpId" Visible="False">
< ItemTemplate>
< asp:Label ID="lblEmpId" runat="server" Text=' <%# Bind("EmpId") %>'> </asp:Label>
< /ItemTemplate>
< FooterTemplate>
< asp:Label ID="lblFooterEmpId" runat="server"> </asp:Label>
< /FooterTemplate>
< /asp:TemplateField>
< asp:TemplateField HeaderText="Emp">
< ItemTemplate>
< asp:Label ID="lblEmp" runat="server" Text=' <%# Bind("Emp") %>'> </asp:Label>
< /ItemTemplate>
< EditItemTemplate>
< asp:TextBox ID="txtEmp" runat="server" Text=' <%# Bind("Emp") %> '> </asp:TextBox>
< /EditItemTemplate>
< FooterTemplate>
< asp:TextBox ID="txtNewEmp" runat="server" Visible="false"> </asp:TextBox>
< /FooterTemplate>
< FooterStyle HorizontalAlign="Left" />
< ItemStyle HorizontalAlign="Left" />
< /asp:TemplateField>
< asp:TemplateField HeaderText="Edit">
< ItemTemplate>
< asp:ImageButton ID="ImgYes" runat="server" ImageUrl="~/Image/img_edit.png" CommandName="Edit" />
< /ItemTemplate>
< EditItemTemplate>
< asp:ImageButton ID="LinkButton1" runat="server" CausesValidation="True" CommandName="Update"
ImageUrl="~/Image/update.png" Text="Update" />
< asp:ImageButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Cancel"
ImageUrl="~/Image/cancel.png" Text="Cancel" />
< /EditItemTemplate>
< FooterTemplate>
< asp:ImageButton ID="ButtonAdd" runat="server" ImageUrl="~/Image/row_add.png" CommandName="AddNew"
ToolTip="Add New" />
< asp:ImageButton ID="lbtnAdd" runat="server" CausesValidation="True" CommandName="Add"
ImageUrl="~/Image/add.png" Visible="false" Text="Add" />
< asp:ImageButton ID="lbtnCancel" runat="server" CausesValidation="False" CommandName="Cancel"
ImageUrl="~/Image/cancel.png" Visible="false" Text="Cancel" />
< /FooterTemplate>
< FooterStyle HorizontalAlign="Center" Width="120px" />
< ItemStyle HorizontalAlign="Center" Width="120px" />
< /asp:TemplateField>
< asp:TemplateField HeaderText="Delete">
< ItemTemplate>
< asp:ImageButton ID="ImgDelete" runat="server" ImageUrl="~/Image/img_delete.png"
CommandName="Delete" OnClientClick="return ConfirmDelete();" />
< /ItemTemplate>
< ItemStyle HorizontalAlign="Center" Width="80px" />
< /asp:TemplateField>
< /Columns>
< /asp:GridView>
< asp:Label ID="exceptionMessage" runat="server" ForeColor="Red" Width="498px"> </asp:Label>
< /ContentTemplate>
< /ajaxToolkit:TabPanel>

< ajaxToolkit:TabPanel ID="tabEmpInfo" runat="server" >
< HeaderTemplate>
Emp Information
< /HeaderTemplate>
< ContentTemplate>
< br />
< asp:GridView ID="gvEmpInfo" runat="server" AllowPaging="True" AutoGenerateColumns="False" PageSize="12"
OnPageIndexChanging="gvEmpInfo_PageIndexChanging" OnRowDataBound="gvEmpInfo_RowDataBound"
TabIndex="2" Width="697px" OnRowCancelingEdit="gvEmpInfo_RowCancelingEdit" OnRowEditing="gvEmpInfo_RowEditing"
OnRowUpdating="gvEmpInfo_RowUpdating" ShowFooter="True" OnRowCommand="gvEmpInfo_RowCommand"
OnRowDeleting="gvEmpInfo_RowDeleting" DataKeyNames="EmpInfoId">
< Columns>
< asp:TemplateField HeaderText="Sr. No">
< ItemTemplate>
< asp:Label ID="lblSrNo" runat="server"> </asp:Label>
< /ItemTemplate>
< ItemStyle HorizontalAlign="Center" Width="50px" />
< /asp:TemplateField>
< /Columns>
< /asp:GridView>
< asp:Label ID="exceptionEmpInfo" runat="server" ForeColor="Red" Width="498px"> < /ContentTemplate>
< /ajaxToolkit:TabPanel>

--------------------------------------------------------------------------------------------------------------------------------
protected void Page_Load(object sender, EventArgs e)
{
exceptionMessage.Text = "";
exceptionMessageEmpInfo.Text = "";

if (!IsPostBack)
{
tabInstitue.Enabled = true;
tabDegree.Enabled = true;
tabBoardUniversity.Enabled = true;
TabCont1.ActiveTabIndex = 0;
GridViewEmpDetail();
GridViewEmpInfo();
}
}

protected void GridViewEmpDetail()
{
try
{
Ds = objEmpDetailBLL.GetEmpDetailData();
if (Ds.Tables[0].Rows.Count > 0)
{
gvEmpDetail.DataSource = Ds;
gvEmpDetail.DataBind();
}
else
{
ShowNoResultFound(Ds.Tables[0], gvEmpDetail);
}
}
catch (Exception ex)
{
exceptionMessage.Text = ex.Message;
}
}
protected void GridViewEmpInfo()
{
try
{
Ds = objEmpInfoBLL.GetEmpInfoData();
if (Ds.Tables[0].Rows.Count > 0)
{
gvEmpInfo.DataSource = Ds;
gvEmpInfo.DataBind();
}
else
{
ShowNoResultFound(Ds.Tables[0], gvEmpInfo);
}
}
catch (Exception ex)
{
exceptionEmpInfo.Text = ex.Message;
}
}


Did you like this resource? Share it with your friends and show your love!

Responses to "AJAX tab control in asp.net"

No responses found. Be the first to respond...

Feedbacks      

Post Comment:




  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:   Sign In to fill automatically.
    Email: (Will not be published, but required to validate comment)



    Type the numbers and letters shown on the left.


    Submit Article     Return to Article Index

    Subscribe to Subscribers
    Active Members
    TodayLast 7 Daysmore...

    Awards & Gifts
    Talk to Webmaster Tony John

    Online Members

    Ashutosh Jha
    More...
    Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India