I have an image button for login in my system. so as the most common thing i m having two text boxes txt_username and txt_password.
i have put required field validator for both the text boxes. and set the validation group "a" and respective control to validate for both of them. the source code for my ImageButton is as follows:-
<td align="right" class="simple_text"> </td>
<td align="left">
<asp:ImageButton ID="ImageButton1" runat="server" CausesValidation="true"
ImageUrl="~/images/signin_button.gif" onclick="ImageButton1_Click"
ValidationGroup="a" />
</td>
now I am fed up as when I run my application and click the ImageButton it doesn't respond to the validation at all and redirects to the next page. Can anyone say why is it so? this is the first time wherein the validators are not working.
this is source code:-
<td align="left"><table width="480" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="178" align="right" class="simple_text">User Name : </td>
<td width="302" align="left">
<asp:TextBox ID="txt_username" runat="server"
CssClass="text_box_username" Width="180px" AutoPostBack="True"
ontextchanged="txt_username_TextChanged" ValidationGroup="a"
CausesValidation="True"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txt_username" ErrorMessage="RequiredFieldValidator"
ValidationGroup="a">**</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="right" class="simple_text"> </td>
<td align="left"> </td>
</tr>
<tr>
<td align="right" class="simple_text">Password : </td>
<td align="left">
<asp:TextBox ID="txt_password" runat="server" CssClass="text_box_password"
TextMode="Password" Width="180px" ValidationGroup="a"
CausesValidation="True"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="txt_password" ErrorMessage="RequiredFieldValidator"
ValidationGroup="a">**</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="right" class="simple_text"> </td>
<td align="left"> </td>
</tr>
<tr>
<td align="right" class="simple_text"> </td>
<td align="left">
<asp:ImageButton ID="ImageButton1" runat="server" CausesValidation="true"
ImageUrl="~/images/signin_button.gif" onclick="ImageButton1_Click"
ValidationGroup="a" />
</td>
</tr>
</table></td>
</tr>
<tr>
<td align="left"> </td>
</tr>
<tr>
hi just paste this code will work surely for you
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<td align="left"><table width="480" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="178" align="right" class="simple_text">User Name : </td>
<td width="302" align="left">
<asp:TextBox ID="txt_username" runat="server"
Width="180px" AutoPostBack="True"
ValidationGroup="a"
CausesValidation="True" ontextchanged="txt_username_TextChanged"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txt_username" ErrorMessage="RequiredFieldValidator"
ValidationGroup="a">**</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="right" class="simple_text"> </td>
<td align="left"> </td>
</tr>
<tr>
<td align="right" class="simple_text">Password : </td>
<td align="left">
<asp:TextBox ID="txt_password" runat="server"
TextMode="Password" Width="180px" ValidationGroup="a"
CausesValidation="True"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="txt_password" ErrorMessage="RequiredFieldValidator"
ValidationGroup="a">**</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="right" class="simple_text"> </td>
<td align="left"> </td>
</tr>
<tr>
<td align="right" class="simple_text"> </td>
<td align="left">
<asp:ImageButton ID="ImageButton1" runat="server" CausesValidation="true"
ImageUrl="~/images/signin_button.gif" onclick="ImageButton1_Click"
ValidationGroup="a" />
</td>
</tr>
</table></td>
</tr>
<tr>
<td align="left"> </td>
</tr>
<tr>
</div>
</form>
</body>
</html>
Hope you provided the validationGroup property properly.
Specifying Validation Groups
How about this:
<asp:ImageButton runat="server" CausesValidation="true" ImageUrl="..." />
CausesValidation="true" might force the validation to run.
Related
I have checkboxlist within a table I am using. The checklist I need to line up with checkboxes in the second column. The spacing of each row of the textboxes(second row) is 26px. I can not find how to do spacing between items on checkbox list. Setting margins only does the outside of the list not items within.
I tried cellspacing but I cant get it quite lined up.
Update 2
<td style="vertical-align: top" rowspan="7" Width="175" style="padding: 0;">
<asp:CheckBoxList ID="cbtasklist" runat="server" CssClass="radiobutton">
<asp:ListItem Value="Task 1">Task 1</asp:ListItem>
<asp:ListItem Value="Task 2">Task 2</asp:ListItem>
<asp:ListItem Value="Task 3">Task 3</asp:ListItem>
<asp:ListItem>Task 4</asp:ListItem>
<asp:ListItem Value="Task 5">Task 5</asp:ListItem>
<asp:ListItem Value="Other1">Other</asp:ListItem>
<asp:ListItem Value="Other2">Other</asp:ListItem>
</asp:CheckBoxList>
</td>
<td class="auto-style187" style="vertical-align: top" colspan="2">
</td>
.auto-style187 {
height: 26px;
width: 357px;
}
Update 3:
Would it be easier to do a checkbox for each line so I can use the same CSS as the other column?
The reason for the checkbox list is for validation that 1 must be selected.
I hope you are looking for this
<form id="form1" runat="server">
<div style="width: 100%">
<table class="auto-style1">
<tr>
<td class="auto-style3">
<asp:CheckBoxList ID="CheckBoxList1" runat="server" Height="163px">
<asp:ListItem>a</asp:ListItem>
<asp:ListItem>b</asp:ListItem>
<asp:ListItem>c</asp:ListItem>
<asp:ListItem>d</asp:ListItem>
<asp:ListItem>e</asp:ListItem>
<asp:ListItem>f</asp:ListItem>
</asp:CheckBoxList>
</td>
<td class="auto-style8">
<table class="auto-style1">
<tr>
<td class="auto-style5">
<asp:TextBox ID="TextBox1" runat="server" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
</td>
<td>aaaa</td>
</tr>
<tr>
<td class="auto-style6">
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
<td class="auto-style7">aaaa</td>
</tr>
<tr>
<td class="auto-style5">
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</td>
<td>aaaa</td>
</tr>
<tr>
<td class="auto-style10">
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</td>
<td class="auto-style11">aaaa</td>
</tr>
<tr>
<td class="auto-style12">
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
</td>
<td class="auto-style13">aaaa</td>
</tr>
<tr>
<td class="auto-style5">
<asp:TextBox ID="TextBox6" runat="server" OnTextChanged="TextBox6_TextChanged"></asp:TextBox>
</td>
<td>aaaa</td>
</tr>
</table>
</td>
<td class="auto-style4"></td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td class="auto-style9"> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td class="auto-style9"> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style14"></td>
<td class="auto-style15"></td>
<td class="auto-style11"></td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td class="auto-style9"> </td>
<td> </td>
</tr>
</table>
</div>
</form>
see the image
I just took table inside a table .You can just remove the unwanted column as your desire
don't forget to edit the text box lineup its up to you
why don't you try with this on your CSS:
checkbox { padding-bottom: 10px; }
enter code![as you can see here the tabs are half eaten!][1] here
Hello, I have a problem with showing the tab stripe I don't know what is wrong with it. can any one help? when I run this the tabs are not fully shown I have three tabs and I tried this with different browsers but the issue persists.
below is a sample of the code:
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" BackColor="#62A5C8" BorderStyle="none" ForeColor="#ffffff" Height="450px" server="" Style=" background-color:#012F54; margin-top: 0px;" Width="100%" ScrollBars="Both" Font-Size="Medium"
ToolTip="Move between tabs to fill-in all information">
<asp:TabPanel runat="server" HeaderText="Student Information" ID="TabPanel1">
<ContentTemplate>
<asp:UpdatePanel ID="updatePanel1" runat="server">
<ContentTemplate>
<table class="auto-style15">
<tr>
<td class="auto-style27">
<br />
<span class="auto-style117">First Name:<br /> </span>
</td>
<td class="auto-style21">
<br />
<strong>
<asp:TextBox ID="TextBox1" runat="server" BorderColor="Black" BorderStyle="Solid" Height="23px" Width="198px" CssClass="auto-style116"></asp:TextBox>
</strong>
</td>
<td> </td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td class="auto-style21"> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style117">Last Name:</td>
<td class="auto-style24"><strong>
<asp:TextBox ID="TextBox2" runat="server" BorderStyle="Solid" Height="21px" Width="198px" BorderColor="Black" CssClass="auto-style116"></asp:TextBox>
</strong>
</td>
<td class="auto-style25"></td>
</tr>
<tr>
<td class="auto-style17"></td>
<td class="auto-style20"></td>
<td class="auto-style18"></td>
</tr>
<tr>
<td class="auto-style27" style="font-size: small; color: #043d5d">Student ID:</td>
<td class="auto-style21"><strong>
<asp:TextBox ID="TextBox3" runat="server" BorderStyle="Solid" Height="23px" Width="198px" BorderColor="Black" CssClass="auto-style116"></asp:TextBox>
</strong>
</td>
<td> </td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td class="auto-style21"> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style27" style="font-size: small; color: #043d5d">Department:</td>
<td class="auto-style21"><strong>
<asp:DropDownList ID="DropDownList1" runat="server" Height="27px" Width="295px" style="margin-left:7px;">
<asp:ListItem>Cardiac Technology</asp:ListItem>
<asp:ListItem>Clinical Laboratory Sciences</asp:ListItem>
</asp:DropDownList>
</strong>
</td>
<td> </td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td class="auto-style21"> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td class="auto-style21"> </td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td class="auto-style21"> </td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td class="auto-style21"> </td>
<td>
<asp:Button ID="Button1" runat="server" BackColor="#4DA3B0" BorderColor="#4DA3B0" Font-Bold="False" Font-Size="12pt" ForeColor="White" Height="36px" style="margin-left:10px;" Text="Next ►" Width="166px" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="TabPanel2" runat="server" HeaderText="Graduate Form">
<ContentTemplate>
**
Hi brother use below code
first add refrence at the top of the page
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
then use below code
<asp:ScriptManager runat="server" ID="sc">
</asp:ScriptManager>
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" BackColor="#62A5C8"
BorderStyle="none" ForeColor="#ffffff" Height="450px" server="" Style="background-color: #012F54;
margin-top: 0px;" Width="100%" ScrollBars="Both" Font-Size="Medium" ToolTip="Move between tabs to fill-in all information">
<asp:TabPanel runat="server" HeaderText="Student Information" ID="TabPanel1">
<ContentTemplate>
<table class="auto-style15">
<tr>
<td class="auto-style27">
<br />
<span class="auto-style117">First Name:<br />
</span>
</td>
<td class="auto-style21">
<br />
<strong>
<asp:TextBox ID="TextBox1" runat="server" BorderColor="Black" BorderStyle="Solid"
Height="23px" Width="198px" CssClass="auto-style116"></asp:TextBox>
</strong>
</td>
<td>
</td>
</tr>
<tr>
<td class="auto-style28">
</td>
<td class="auto-style21">
</td>
<td>
</td>
</tr>
<tr>
<td class="auto-style117">
Last Name:
</td>
<td class="auto-style24">
<strong>
<asp:TextBox ID="TextBox2" runat="server" BorderStyle="Solid" Height="21px" Width="198px"
BorderColor="Black" CssClass="auto-style116"></asp:TextBox>
</strong>
</td>
<td class="auto-style25">
</td>
</tr>
<tr>
<td class="auto-style17">
</td>
<td class="auto-style20">
</td>
<td class="auto-style18">
</td>
</tr>
<tr>
<td class="auto-style27" style="font-size: small; color: #043d5d">
Student ID:
</td>
<td class="auto-style21">
<strong>
<asp:TextBox ID="TextBox3" runat="server" BorderStyle="Solid" Height="23px" Width="198px"
BorderColor="Black" CssClass="auto-style116"></asp:TextBox>
</strong>
</td>
<td>
</td>
</tr>
<tr>
<td class="auto-style28">
</td>
<td class="auto-style21">
</td>
<td>
</td>
</tr>
<tr>
<td class="auto-style27" style="font-size: small; color: #043d5d">
Department:
</td>
<td class="auto-style21">
<strong>
<asp:DropDownList ID="DropDownList1" runat="server" Height="27px" Width="295px" Style="margin-left: 7px;">
<asp:ListItem>Cardiac Technology</asp:ListItem>
<asp:ListItem>Clinical Laboratory Sciences</asp:ListItem>
</asp:DropDownList>
</strong>
</td>
<td>
</td>
</tr>
<tr>
<td class="auto-style28">
</td>
<td class="auto-style21">
</td>
<td>
</td>
</tr>
<tr>
<td class="auto-style28">
</td>
<td class="auto-style21">
</td>
</tr>
<tr>
<td class="auto-style28">
</td>
<td class="auto-style21">
</td>
</tr>
<tr>
<td class="auto-style28">
</td>
<td class="auto-style21">
</td>
<td>
<asp:Button ID="Button1" runat="server" BackColor="#4DA3B0" BorderColor="#4DA3B0"
Font-Bold="False" Font-Size="12pt" ForeColor="White" Height="36px" Style="margin-left: 10px;"
Text="Next ►" Width="166px" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="TabPanel2" runat="server" HeaderText="Graduate Form">
<ContentTemplate>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
I have a simple form as you see, the DOB date of birth, field, I would like to have it
with a date picker, how is the best way for this?
tr>
<td>
<dx:ASPxLabel ID="ASPxLabel8" runat="server" Text="DOB:" Width="50px"></dx:ASPxLabel>
</td>
<td align="left">
</td>
<td>
<dx:ASPxTextBox ID="tbDOB" runat="server" Width="100px"></dx:ASPxTextBox>
</td>
<td align="right">
<dx:ASPxLabel ID="ASPxLabel9" runat="server" Text="Weight:" Width="50px"></dx:ASPxLabel>
</td>
<td align="left">
<dx:ASPxTextBox ID="tbWeight" runat="server" Width="100px"></dx:ASPxTextBox>
</td>
<td align="right">
<dx:ASPxLabel ID="ASPxLabel10" runat="server" Text="Height:" Width="50px"></dx:ASPxLabel>
</td>
<td align="left">
<dx:ASPxTextBox ID="tbHeight" runat="server" Width="100px"></dx:ASPxTextBox>
</td>
<td align="right">
<dx:ASPxLabel ID="ASPxLabel11" runat="server" Text="BP:" Width="50px"></dx:ASPxLabel>
</td>
<td align="left">
<dx:ASPxTextBox ID="tbBP" runat="server" Width="100px"></dx:ASPxTextBox>
</td>
<td align="right">
<dx:ASPxLabel ID="ASPxLabel12" runat="server" Text="Pulse:" Width="50px"></dx:ASPxLabel>
</td>
<td align="left">
<dx:ASPxTextBox ID="tbPulse" runat="server" Width="100px" ></dx:ASPxTextBox>
</td>
</tr>
very simple way to do this would be to use Jquery's built in datepicker like this:
<dx:ASPxTextBox ID="tbDOB" runat="server" Width="100px"></dx:ASPxTextBox>
and In the script tag:
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#tbDOB").datepicker();
});
</script>
DEMO: http://jsfiddle.net/WzLc3/3/
ALSO:
If you cannot use Jquery for your application, you can do this purely through asp.net but lightly more complicated by using the calander contorl.
here is a great tutorial for beginners to walk you through the steps,
http://www.dotnetfunda.com/articles/article746-how-to-create-a-date-picker-in-aspnet.aspx
I've got 5 required field validators on an aspx page.
With all validators active, none of the code behind any of the command buttons on the page will fire.
However, with ANY four out of five validators active, buttons all function ok.
Is there a limit to the amount of validators that can be used on a single page? Is there any other reason that this could be happening?
Help appreciated, thanks..
Daf.
Markup looks like this..
> <%# Page Title="" Language="C#" MasterPageFile="~/MasterPages/Admin.Master" AutoEventWireup="true" CodeBehind="RegisterUser.aspx.cs" Inherits="LectureQuestions.Interface.Admin.RegisterUser" %>
<asp:Content ID="Content1" ContentPlaceHolderID="PageTitle" runat="server">Register New User
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="TitleTxt" runat="server">Register New User
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<table ID="tblInputField" runat="server" width="100%" cellspacing="15">
<tr>
<td width="10%"></td>
<td width="20%">First Name</td>
<td width="60%">
<asp:TextBox ID="txtFirstName" runat="server" Width="98%"></asp:TextBox>
</td>
<td width="10%">
<asp:RequiredFieldValidator ID="txtFirstNameRequired" runat="server"
ControlToValidate="txtFirstName" ErrorMessage="*" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td width="10%"></td>
<td width="20%">Last Name</td>
<td width="60%">
<asp:TextBox ID="txtLastName" runat="server" Width="98%"></asp:TextBox>
</td>
<td width="10%">
<asp:RequiredFieldValidator ID="txtLastNameRequired" runat="server"
ControlToValidate="txtLastName" ErrorMessage="*" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td width="10%"></td>
<td width="20%">E-mail</td>
<td width="60%">
<asp:TextBox ID="txtEmail" runat="server" Width="98%"></asp:TextBox>
</td>
<td width="10%">
<asp:RequiredFieldValidator ID="txtEmailRequired" runat="server"
ControlToValidate="txtEmail" ErrorMessage="*" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td width="10%"></td>
<td width="20%">Phone</td>
<td width="60%">
<asp:TextBox ID="txtPhone" runat="server" Width="98%"></asp:TextBox>
</td>
<td width="10%">
<asp:RequiredFieldValidator ID="txtPhoneRequired" runat="server"
ControlToValidate="txtPhone" ErrorMessage="*" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td width="10%"></td>
<td width="20%">Password</td>
<td width="60%">
<asp:TextBox ID="txtPassword" runat="server" Width="98%"></asp:TextBox>
</td>
<td width="10%">
<asp:RequiredFieldValidator ID="txtPasswordRequired" runat="server"
ControlToValidate="txtPassword" ErrorMessage="*" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td width="10%"></td>
<td width="20%">User Type</td>
<td width="60%">
<asp:DropDownList ID="txtUserType" runat="server" Width="99.5%">
<asp:ListItem>-- Please Select --</asp:ListItem>
<asp:ListItem>Student</asp:ListItem>
<asp:ListItem>Lecturer</asp:ListItem>
<asp:ListItem>Admin</asp:ListItem>
</asp:DropDownList>
</td>
<td width="10%">
<asp:Label id="txtUserTypeValidation" runat="server" ForeColor="Red"></asp:Label>
</td>
</tr>
<tr>
<td width="10%"></td>
<td width="20%">Course</td>
<td width="60%">
<asp:DropDownList ID="txtCourse" runat="server" Width="99.5%">
</asp:DropDownList>
</td>
<td width="10%"></td>
</tr>
</table>
<table ID="tblAllValidationMsg" runat="server" width="100%" cellspacing="5">
<tr>
<td width="10%"></td>
<td width="80%" align="center">
<asp:Label id="allValidationMsg" runat="server" height="22px" ForeColor="Red"></asp:Label>
</td>
<td width="10%"></td>
</tr>
</table>
<table ID="tblCommandButtons" runat="server" width="100%" cellspacing="10">
<tr>
<td width="25%"></td>
<td width="25%" align="right">
<asp:Button class="navbutton" ID="btnRegister" runat="server"
Text="Register User" OnClick="btnRegister_Click" />
</td>
<td width="25%" align="left">
<asp:Button class="navbutton" ID="btnCancel" runat="server"
Text="Cancel" onclick="btnCancel_Click" />
</td>
<td width="25x%"></td>
</tr>
</table>
</asp:Content>
Answer:
No there is no limit to validations on the page.
Misc:
Pranay has provided the fix in his answer.
In the end, I placed a second regular expression validator on one of the fields for testing.
When I removed this validator, problem ceased. Don't know how or why; any advice on this welcome..
because I manually want to show the modal popup (this might be due to the fact that the controls inside the popup have to initialized according to the pressed button or row). Can anyone help me? The button NEVER goes to this EditBtn_Click method, it just aways show my panel.
Code:
protected void EditBtn_Click(object sender, EventArgs e)
{
LinkButton btn = (LinkButton)sender;
GridViewRow row = (GridViewRow)btn.NamingContainer;
int i = Convert.ToInt32(row.RowIndex);
string uid = (string)ManageStaffGrid.Rows[i].Cells[1].Text;
//bind panel
AjaxControlToolkit.ModalPopupExtender mpe = (AjaxControlToolkit.ModalPopupExtender)row.FindControl("EditBtn_ModalPopupExtender");
mpe.Show(); //show the modal popup extender
}
Design:
(from grid)
<ItemTemplate>
<asp:LinkButton ID="EditBtn" runat="server" onclick="EditBtn_Click">Edit</asp:LinkButton>
<asp:ModalPopupExtender ID="EditBtn_ModalPopupExtender" runat="server" CancelControlID="CancelBtn" Enabled="True" PopupControlID="UpdatePanel" TargetControlID="EditBtn">
</asp:ModalPopupExtender>
</ItemTemplate>
<asp:Panel ID="UpdatePanel" runat="server" Style="display: none" BackColor="White" GroupingText="Update User">
<div>
<table><tr>
<td style="width:12px"></td>
<td><asp:Label ID="lblLegend" runat="server" Text=""></asp:Label></td></tr></table>
<br />
<table>
<tr>
<td style="width:12px"></td>
<td style="width: 76px">
<asp:Label ID="lblName" runat="server" Text="Name"></asp:Label>
</td>
<td>
<asp:Label ID="lblStaffName" runat="server"></asp:Label>
</td>
<td>
</td>
</tr>
<tr>
<td style="width:12px"> </td>
<td style="width: 76px">
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td> </td>
<td style="width: 76px">
<asp:Label ID="lblUserId" runat="server" Text="User ID"></asp:Label>
</td>
<td>
<asp:Label ID="lblStaffUid" runat="server"></asp:Label>
</td>
<td>
</td>
</tr>
<tr>
<td> </td>
<td style="width: 76px">
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td> </td>
<td valign="top" style="width: 70px">
<asp:Label ID="lblSection" runat="server" Text="Section"></asp:Label>
</td>
<td>
<asp:ListBox ID="listSection" runat="server" SelectionMode="Multiple"
CssClass="standardManage" onMouseDown="GetCurrentListValues(this);"
onchange="FillListValues(this);">
</asp:ListBox>
</td>
<td valign="top">
<asp:RequiredFieldValidator ID="RequiredValidatorSection" runat="server"
ControlToValidate="listSection" Display="Dynamic" EnableClientScript="False"
EnableTheming="True" ErrorMessage="Required" ForeColor="Red"></asp:RequiredFieldValidator>
<asp:Label ID="lblValidatorSection" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td> </td>
<td style="width: 76px">
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td> </td>
<td style="width: 76px">
<asp:Label ID="lblFunction" runat="server" Text="Function"></asp:Label>
</td>
<td>
<asp:DropDownList ID="ddlFunction" runat="server" CssClass="standardManage">
</asp:DropDownList>
</td>
<td>
</td>
</tr>
<tr>
<td> </td>
<td style="width: 76px">
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td> </td>
<td style="width: 76px">
<asp:Label ID="lblStaffGender" runat="server" Text="Gender"></asp:Label>
</td>
<td>
<asp:Label ID="lblGender" runat="server"></asp:Label>
</td>
<td>
</td>
</tr>
<tr>
<td> </td>
<td style="width: 76px">
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td> </td>
<td style="width: 76px">
<asp:Label ID="lblRole" runat="server" Text="Role"></asp:Label>
</td>
<td>
<asp:DropDownList ID="ddlRole" runat="server" CssClass="standardManage">
</asp:DropDownList>
</td>
<td>
</td>
</tr>
<tr>
<td> </td>
<td style="width: 76px">
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td> </td>
<td style="width: 70px">
</td>
<td align="right">
<asp:Button ID="UpdateBtn" runat="server" Text="Update" OnClick="UpdateBtn_Click"/>
<asp:Button ID="CancelBtn" runat="server" Text="Cancel" />
</td>
<td>
</td>
</tr>
</table>
</div></asp:Panel>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
i found a very helpful link that eventually solves my problems! Please check it out!
http://www.aspdotnet-suresh.com/2011/03/how-to-show-modalpopup-to-edit-gridview.html