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
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; }
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..
I have one Panel that is linked to a ModelPopupExtenderand there is a button inside the first panel. When I click the first panel's button I want it to execute the event and inside this event I want to pop up the second Panel which is also linked to a ModelPopupExtender, but when I click the first Panel's button the event does not trigger.
Asp Code :
<input type="hidden" runat="server" id="hdnEditBank1" />
<asp:Panel runat="server" ID="pnl1" CssClass="Modal450h450w" Height="300px">
<table id="tblEditBank1" runat="server">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td align="right" colspan="2"><img runat="server" id="imgExitEdit1" src="../images/Exit_cross.png" /></td>
</tr>
<tr>
<td colspan="3">Name : </td>
<td colspan="2"><telerik:RadTextBox ID="txt1" runat="server" CssClass="largebox"></telerik:RadTextBox></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td colspan="4">
<asp:Button runat="server" ID="btnClose" Text="Close" OnClick="btnAdd_Close_Click" />
</td>
<td align="right">
<asp:Button runat="server" ID="btnNext" Text="Next" OnClick="btnEdit_Next_Click" />
</td>
</tr>
</table>
</asp:Panel>
<!-- second panel -->
<asp:ModalPopupExtender ID="ModalPopupExtender6" runat="server" TargetControlID="btnNext" OkControlID="imgExitEdit1"
PopupControlID="pnl2" BackgroundCssClass="LoadingBackground" >
</asp:ModalPopupExtender>
<input type="hidden" runat="server" id="Hidden1" />
<asp:Panel runat="server" ID="pnl2" CssClass="Modal450h450w" Height="300px">
<table id="Table1" runat="server">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td align="right" colspan="2"><img runat="server" id="img1" src="../images/Exit_cross.png" /></td>
</tr>
<tr>
<td colspan="3">Some Label : </td>
<td colspan="3"><telerik:RadTextBox ID="txtSomeText" runat="server" CssClass="largebox"></telerik:RadTextBox></td>
</tr>
<tr>
<td colspan="4">
<asp:Button runat="server" ID="btnIbanClose" Text="Close" OnClick="btnAdd_Close_Click" />
</td>
<td align="right">
<asp:Button runat="server" ID="btnIbanReview" Text="Next" OnClick="btnEdit_Next_Click" />
</td>
</tr>
</table>
</asp:Panel>
The code behind :
protected void btnEdit_Next_Click(object sender, EventArgs e)
{
ModalPopupExtender6.Show();
}
I am thinking it's about the AutoPostBack but I am not sure how to resolve this
I have found the solution to this if anybody is interested.
What you need to do is create a hidden input field and set the TargetControlID to the hidden control and from there you are able to fire off the buttons event.
<input type="hidden" runat="server" id="hdnNext" />
<asp:ModalPopupExtender ID="ModalPopupExtender6" runat="server" TargetControlID="hdnNext" OkControlID="imgExitEdit1"
PopupControlID="pnlIban" BackgroundCssClass="LoadingBackground" >
</asp:ModalPopupExtender>
The input field is used in this case as a Dummy control where the ModalPopupExtender points to and from the buttons event you are able to control which other ModalPopupExtenders you want to control.
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
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.