This is my ASP.NET page :
<div id="dvtgl1" style="display: none">1.
<asp:TextBox ID="TxtTglCuti1" runat="server" MaxLength="1" style="width: 140px; height: 35px; padding: 12px 10px; box-sizing: border-box; border: 1px solid Silver; border-radius: 4px;" ValidationGroup="MKE"></asp:TextBox><br /><br /></div>
<div id="dvtgl2" style="display: none">2.
<asp:TextBox ID="TxtTglCuti2" runat="server" MaxLength="1" style="width: 140px; height: 35px; padding: 12px 10px; box-sizing: border-box; border: 1px solid Silver; border-radius: 4px; " ValidationGroup="MKE"></asp:TextBox><br /><br /></div>
This is my jQuery script :
$(function(){
$("#<%= TxtTglCuti1.ClientID %>").datepicker({
//dateFormat: 'dd/mm/yy',
numberOfMonths: 1,
showButtonPanel: true,
minDate: dateToday,
beforeShowDay: DisableMonday
});
$("#<%= TxtTglCuti2.ClientID %>").datepicker({
// dateFormat: 'dd/mm/yy',
numberOfMonths: 1,
showButtonPanel: true,
minDate: dateToday, beforeShowDay: DisableMonday
});
This is my VB.NET class :
If (TxtTglCuti1.Text = "") And (TxtTglCuti2.Text = "") And (TxtTglCuti3.Text = "") And (TxtTglCuti4.Text = "") And (TxtTglCuti5.Text = "") And (TxtTglCuti6.Text = "") And (TxtTglCuti7.Text = "") And (TxtTglCuti8.Text = "") And (TxtTglCuti9.Text = "") And (TxtTglCuti10.Text = "") And (TxtTglCuti11.Text = "") And (TxtTglCuti12.Text = "") Then
Response.Write("<script>alert('Data tidak boleh kosong')</script>")
Instead of building a block of code to check every TextBox that contains the date value from DateTimePicker and jQuery of all the text boxes.I built it to assign the value to an array like this :
txt_tgl_cuti(0) = TxtTglCuti1.Text
txt_tgl_cuti(1) = TxtTglCuti2.Text
The thing is, it only works for a small record.
How should I check it dynamically ? I have 12 record of text boxes and my goal is to build a function to prevent users to input duplicate date values in the TextBox
Below are the simle way you can check all text box values are blank,
.ASPX
<asp:PlaceHolder ID="plhDates" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</asp:PlaceHolder>
<asp:Button ID="btnSubmit" Text="text" runat="server" OnClick="btnSubmit_Click" />
.VB
Protected Function MySub() As Boolean
For Each ctl As Control In plhDates.Controls
If TypeOf ctl Is TextBox Then
If (CType(ctl, TextBox).Text = "") Then
Return True
End If
End If
Next
Return False
End Function
Protected Sub btnSubmit_Click(sender As Object, e As EventArgs)
Dim isContainBlankValue As Boolean = MySub() //return true if any of the textbox have blank value
End Sub
Related
i just want to make data list with pagging. here is my code :
public partial class Template_Management : System.Web.UI.Page
{
PagedDataSource adsource = null;
int pos;
protected void Page_Init(object sender, EventArgs e)
{
if (!IsPostBack)
{
adsource = new PagedDataSource();
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
.....
Session["StartAlpha"] = "All";
Session["GroupByCategory"] = -1;
Session["ColumnName"] = null;
Session["SearchText"] = null;
this.FillGrid((String)Session["StartAlpha"] ?? null, (int)Session["GroupByCategory"], (String)Session["ColumnName"] ?? null, (String)Session["SearchText"] ?? null);
this.ViewState["vs"] = 0;
}
pos = (int)this.ViewState["vs"];
}
}
public void FillGrid(string StartAlpha, int GroupByCategory, string ColumnName, string SearchText)
{
if (myDataSet.Tables[0].Rows.Count > 0)
{
adsource.DataSource = myDataSet.Tables[0].DefaultView;
adsource.AllowPaging = true;
adsource.PageSize = 20;
DL_ViewTemplate.DataSource = adsource;
}
if (DL_ViewTemplate.Items.Count != 0)
{
SetPageNumbers();
}
UpdatePanel8.Update();
DL_ViewTemplate.DataBind();
}
private void SetPageNumbers()
{
foreach (DataListItem item in DL_ViewTemplate.Items)
{
if (item.ItemType == ListItemType.Footer)
{
if (pos == 0)
{
ImageButton img = (ImageButton)item.FindControl("ImageButton1");
img.Enabled = false;
}
if (pos == adsource.PageCount - 1)
{
ImageButton img = (ImageButton)item.FindControl("ImageButton4");
img.Enabled = false;
}
}
}
}
protected void DL_ViewTemplate_ItemCommand(object source, DataListCommandEventArgs e)
{
int intCurIndex = adsource.CurrentPageIndex;
switch (e.CommandArgument.ToString())
{
case "first":
adsource.CurrentPageIndex = 0;
break;
case "prev":
CurrentPage -= 1;
break;
case "next":
CurrentPage += 1;
break;
case "last":
adsource.CurrentPageIndex = adsource.PageCount;
break;
}
this.FillGrid((String)Session["StartAlpha"] ?? null, (int)Session["GroupByCategory"], (String)Session["ColumnName"] ?? null, (String)Session["SearchText"] ?? null);
}
protected void DL_ViewTemplate_ItemDataBound(object sender, DataListItemEventArgs e)
{
foreach (DataListItem item in DL_ViewTemplate.Items)
{
if (item.ItemType == ListItemType.Footer && item.ItemType == ListItemType.Item)
{
// get your controls from the gridview
DropDownList ddlPages = (DropDownList)item.FindControl("ddlPages");
Label lblPageCount = (Label)item.FindControl("lblPageCount");
if (ddlPages != null)
{
// populate pager
for (int i = 0; i < adsource.PageCount; i++)
{
int intPageNumber = i + 1;
ListItem lstItem = new ListItem(intPageNumber.ToString());
if (i == adsource.CurrentPageIndex)
lstItem.Selected = true;
ddlPages.Items.Add(lstItem);
}
}
// populate page count
if (lblPageCount != null)
lblPageCount.Text = adsource.PageCount.ToString();
}
}
}
protected void ddlPages_SelectedIndexChanged(object sender, EventArgs e)
{
foreach (DataListItem item in DL_ViewTemplate.Items)
{
if (item.ItemType == ListItemType.Footer)
{
DropDownList ddlPages = (DropDownList)item.FindControl("ddlPages");
adsource.CurrentPageIndex = ddlPages.SelectedIndex;
//a method to populate your grid
this.FillGrid((String)Session["StartAlpha"] ?? null, (int)Session["GroupByCategory"], (String)Session["ColumnName"] ?? null, (String)Session["SearchText"] ?? null);
}
}
}
}
how ever footer control with ddl doesn't filled.
for more info i place html markup :
<asp:DataList ID="DL_ViewTemplate" runat="server" RepeatColumns="6"
ShowFooter="True" HorizontalAlign="Left" RepeatDirection="Horizontal"
DataKeyField="Id" onitemcommand="DL_ViewTemplate_ItemCommand"
ShowHeader="False" onitemcreated="DL_ViewTemplate_ItemCreated"
onitemdatabound="DL_ViewTemplate_ItemDataBound" CellPadding="1"
CellSpacing="3">
<ItemStyle HorizontalAlign="Left" Wrap="True" Width="40%" />
<ItemTemplate>
<div class="thumb" align="center" style="height:150px;width:130px">
<table width="40%" align="center">
<tr>
<td>
<asp:Literal ID="Literal4" runat="server"></asp:Literal><!-- Text=<'#Eval("TemplateBody")%>'-->
<ajaxToolkit:HoverMenuExtender ID="hme1" runat="Server"
TargetControlID="Literal4"
PopupControlID="Panel2"
DynamicContextKey='<%# Eval("Id") %>'
DynamicControlID="Panel2"
DynamicServiceMethod="GetDynamicContent"
PopupPosition="Right"
OffsetX="-25"
OffsetY="15"/>
</td>
</tr>
</table>
</div>
<table width="145px" align="left" style="border-color:Black;border-style:solid;border-width:1px;height:50px">
<tr>
<td align="center">
<table>
<tr>
<td><asp:CheckBox ID="ChkSelect" runat="server" onclick = "Check_Click(this)"/></td>
<td> </td>
<td><asp:LinkButton ID="LinkButton2" runat="server" CssClass="quicklink"
Text='<%# Eval("TemplateName").ToString().Length > 12 ? Eval("TemplateName").ToString().Substring(0,12)+"..." :Eval("TemplateName") %>' CommandName="ViewTemplate"
ToolTip ='<%# Eval("TemplateName")%>' CommandArgument='<%# Eval("Id") %>'></asp:LinkButton>
<br/>
<asp:Label ID="Label2" runat="server" CssClass="normaltext"
Text='<%# DataBinder.Eval(Container.DataItem, "CreatedDate", "{0:dd/MM/yyyy}") %>'
ToolTip='<%# Bind("CreatedDate","{0:F}") %>'></asp:Label></td>
</tr>
</table>
</td>
</tr>
</table>
</ItemTemplate>
<SeparatorTemplate> </SeparatorTemplate>
<FooterTemplate>
<table>
<tr>
<td>
<asp:ImageButton ID="ImageButton1" runat="server"
AlternateText="Go to First Page" CommandArgument="First" CommandName="Page"
ImageUrl="images/1330128819_resultset_first.png" />
</td>
<td>
<asp:ImageButton ID="ImageButton2" runat="server" AlternateText="Previous Page"
CommandArgument="Prev" CommandName="Page"
ImageUrl="images/1330128981_resultset_previous.png" />
</td>
<td>
Page <asp:DropDownList ID="ddlPages" runat="server" AutoPostBack="True"
onselectedindexchanged="ddlPages_SelectedIndexChanged" Width="50px">
</asp:DropDownList>
of
<asp:Label ID="lblPageCount" runat="server"></asp:Label>
</td>
<td>
<asp:ImageButton ID="ImageButton3" runat="server" AlternateText="Next Page"
CommandArgument="Next" CommandName="Page"
ImageUrl="images/Farm-Fresh_resultset_next.png" />
</td>
<td>
<asp:ImageButton ID="ImageButton4" runat="server"
AlternateText="Go to Last Page" CommandArgument="Last" CommandName="Page"
ImageUrl="images/1330128876_resultset_last.png" />
</td>
</tr>
</table>
</FooterTemplate>
<FooterStyle CssClass="pager" VerticalAlign="Bottom"
HorizontalAlign="Center" />
</asp:DataList>
here i set adsource which was paged data source declared first and assigned in Page_Init() is it valid ?? because when ever other event want to access adsource then Object reference not found error thrown.
what am i going wrong please help me....
you can refer these links for more information on paging on datalist control in ASP.net
http://www.c-sharpcorner.com/UploadFile/718fc8/paging-in-datalist-control/
http://www.codeproject.com/Articles/14080/Implementing-Efficient-Data-Paging-with-the-Datali
I'm building web app using asp.net web forms and i have a SliderExtender in a TemplateField of a Grid View as below.
<ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server" TargetControlID="txtbox_count"
BoundControlID="txtbox_count_BoundControl" Orientation="Horizontal" EnableHandleAnimation="true"
RailCssClass="SliderRail" HandleCssClass="SliderHandle" HandleImageUrl="~/Images/slider_h_handle.gif"
Minimum="0" Maximum='<%# double.Parse(Eval("VEHICLE_TYPE.MAX_AMOUNT").ToString()) %>'>
</ajaxToolkit:SliderExtender>
<asp:TextBox ID="txtbox_count" Width="25" runat="server" Text='<%# Bind("VEHICLE_AVAILABILITY.EXIST_COUNT") %>'
Style="text-align: right"></asp:TextBox>
<asp:TextBox ID="txtbox_count_BoundControl" Width="25" runat="server" Text='<%# Bind("VEHICLE_AVAILABILITY.EXIST_COUNT") %>'
Style="text-align: right"></asp:TextBox>
CSS of RailCssClass and HandleCssClass
.SliderHandle
{
position: absolute;
height: 22px;
width: 10px;
}
.SliderRail
{
position: relative;
background: url('../../Images/slider_h_rail.gif') repeat-x;
height: 22px;
width: 125px;
}
This looks like below.
But I need to customize the slider like below.
How can I do this? What should I change in my css class?
Here I have created example
Download sample from http://jqueryui.com/resources/download/jquery-ui-1.10.3.zip
include all necessory resource like jquery, CSS, images etc from demo into your project
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
CodeBehind="WebForm2.aspx.cs" Inherits="TestSf.WebForm2" %>
<%# Register Src="SliderControl.ascx" TagName="SliderControl" TagPrefix="uc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:GridView runat="server" ID="grd" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:BoundField DataField="MaxValue" HeaderText="MaxValue" SortExpression="MaxValue" />
<asp:TemplateField HeaderText="Slider">
<ItemTemplate>
<uc1:SliderControl ID="SliderControl1" runat="server" ctrlID='<%# Eval("ID") %>'
Maxvalue='<%# Eval("MaxValue") %>' Value='<%# Eval("Value") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<script type="text/javascript">
if(arr.indexOf($(this).val())>-1)
{
alert('This is already selected , please select other option');
return false;
}
</script>
</asp:Content>
c# Sample code
public partial class WebForm2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
List<TestMax> lst = new List<TestMax>();
lst.Add(new TestMax() { ID = 1, MaxValue = 10, Value = 4, Name = "Sandeep" });
lst.Add(new TestMax() { ID = 2, MaxValue = 12, Value = 3, Name = "Nilesh" });
lst.Add(new TestMax() { ID = 3, MaxValue = 11, Value = 6, Name = "Jayesh" });
grd.DataSource = lst;
grd.DataBind();
}
}
public class TestMax
{
public int ID { get; set; }
public string Name { get; set; }
public int MaxValue { get; set; }
public int Value { get; set; }
}
Create a new USerControl and use this markup
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="SliderControl.ascx.cs"
Inherits="TestSf.SliderControl" %>
<script>
$(function () {
$("#slider-range-max<%= ctrlID %>").slider({ range: "max", min: 1, max: <%= Maxvalue %>,
value: <%= Value %>, slide: function (event, ui) { $("#amount<%= ctrlID %>").val(ui.value); }
});
$("#amount<%= ctrlID %>").val($("#slider-range-max<%= ctrlID %>").slider("value"));
});
</script>
<div id="slider-range-max<%= ctrlID %>">
</div>
<input type="text" id="amount<%= ctrlID %>" style="border: 2; color: #f6931f; font-weight: bold;" />
UserControl C# code
public partial class SliderControl : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
public int ctrlID { get; set; }
public int Maxvalue { get; set; }
public int Value { get; set; }
}
You can apply styles using the following properties.
RailCssClass="ajax__slider_h_rail"
HandleCssClass="ajax__slider_h_handle"
and their styles as follows, which you can edit according to your requirements.
.ajax__slider_h_rail
{
position:relative;
height:20px;
}
.ajax__slider_h_handle
{
position:absolute;
height:20px;width:10px;
}
.ajax__slider_v_rail
{
position:relative;
width:20px;
}
.ajax__slider_v_handle
{
position:absolute;
height:10px;width:20px;
}
First thing, You are using AjaxControlToolkit slider while, expecting UI as jquery slider.
if you can switch the control, it will solve your issue.
otherwise,
put these css classes
.ajax__slider_h_rail {
border: 1px solid;
border-radius: 3px 3px 3px 3px;
height: 8px;
position: relative;
}
.ajax__slider_h_handle {
height: 22px;
position: absolute;
top: -7px !important;
width: 10px;
}
First use following code to stop showing the default image
.handleStyle img
{
display:none;
}
Then use whatever styles you are using for handle like following
.handleStyle
{
position: absolute;
height: 22px;
width: 22px;
background-color:Red;
border-radius:8px;
}
script:
$(document).ready(function () {
$('#Custom').hide('fast');
$('#rbtnEntire').click(function () {
$('#Custom').hide('fast');
$('#Entire').show('fast');
});
$('#rbtnCustom').click(function () {
$('#Entire').hide('fast');
$('#Custom').show('fast');
});
});
function showdiv() {
document.getElementById("divChkList").style.display = "block";
}
aspx file:
<div style="height:700; width:500;">
<div id="select scan type">
<asp:RadioButton ID="rbtnEntire" runat="server" Text="Entire"
GroupName="s1"/>
<asp:RadioButton ID="rbtnCustom" runat="server" Text="Custom"
GroupName="s1"/>
</div>
<div id="Entire" style="float:left; height:1000; width:1000; border: solid 1px; margin-left:5px;">
Entire<br />
<asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All" ShowLines="True" ExpandDepth="2">
<Nodes>
<asp:TreeNode Text="Entire">
<asp:TreeNode Text="VM">
<asp:TreeNode Text="MBS1">
</asp:TreeNode>
<asp:TreeNode Text="PF1"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="VM1">
<asp:TreeNode Text="MBS2"></asp:TreeNode>
<asp:TreeNode Text="PF2"></asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
<p>
<asp:Button ID="btnCreateXML" runat="server" onclick="btnCreateXML_Click"
Text="Create XML" />
<asp:Label ID="lblResult" runat="server" Text="Label"></asp:Label>
</p></div>
<div id="Custom" style="float:left; height:1000; width:2000; border: solid 1px; margin-left:10px;">
Custom <br />
<div id="Manual" style="border:solid 1px; float:left;">
Manual Scan Controls
</div>
<div id="Multiple" style="border:solid 1px; float:left;">
Multiple Scan Controls
<table>
<tr>
<td valign="top" style="width: 165px">
<asp:PlaceHolder ID="phDDLCHK" runat="server"></asp:PlaceHolder>
</td>
<td valign="top">
<asp:Button ID="btn" runat="server" Text="Get Checked" OnClick="btn_Click" />
</td>
<td valign="top">
<asp:Label ID="lblSelectedItem" runat="server"></asp:Label>
</td>
</tr>
</table>
</div>
<asp:HiddenField ID="hidList" runat="server" />
</div>
<br />
</div>
code behind:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
initialiseCheckBoxList();
rbtnEntire.Checked = true;
try
{
TreeView1.Attributes.Add("onclick", "javascript: OnTreeClick();");
}
catch(Exception)
{
Response.Write("Error Occured While onTreeClick");
}
}
}
public void initialiseCheckBoxList()
{
CheckBoxList chkBxLst = new CheckBoxList();
chkBxLst.ID = "chkLstItem";
chkBxLst.Attributes.Add("onmouseover", "showdiv()");
DataTable dtListItem = GetListItem();
int rowNo = dtListItem.Rows.Count;
string lstValue = string.Empty;
string lstID = string.Empty;
for (int i = 0; i < rowNo - 1; i++)
{
lstValue = dtListItem.Rows[i]["Value"].ToString();
lstID = dtListItem.Rows[i]["ID"].ToString();
chkBxLst.Items.Add(lstValue);
}
System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
div.ID = "divChkList";
div.Controls.Add(chkBxLst);
div.Style.Add("border", "black 1px solid");
div.Style.Add("width", "160px");
div.Style.Add("height", "130px");
div.Style.Add("overflow", "AUTO");
div.Style.Add("display", "block");
}//end of initialiseCheckBoxList()
protected void btn_Click(object sender, EventArgs e)
{
string x=string.Empty;
string strSelectedItem = "Selected Items ";
CheckBoxList chk = (CheckBoxList)phDDLCHK.FindControl("chkLstItem"); // phDDLCHK is placeholder's ID
for (int i = 0; i < chk.Items.Count; i++)
{
if (chk.Items[i].Selected)
{
if (strSelectedItem.Length == 0)
{
strSelectedItem = strSelectedItem + ":" + chk.Items[i].Text;
}
else
{
strSelectedItem = strSelectedItem + ":" + chk.Items[i].Text;
}
}
}
lblSelectedItem.Text =strSelectedItem;
}
public DataTable GetListItem()
{
DataTable table = new DataTable();
table.Columns.Add("ID", typeof(int));
table.Columns.Add("Value", typeof(string));
for (int icnt = 0; icnt < 10; icnt++)
{
table.Rows.Add(icnt, "ListItem"+":"+icnt);
}
return table;
}
Problem: When i Select radio button rbtnCustom, It should display div Custom along with the CheckboxList control,which is not happening. When I do not hide div,it is displayed. What can be done to display checkboxList control?
Here is my code, Can any one let me know where I went wrong?
Any help would be appriciated! Thanks!
The reason some of your Javascript isn't working is because you are using the server ID in the client side (Javascript) code.
<asp:RadioButton ID="rbtnCustom" runat="server" Text="Custom"
GroupName="s1"/>
Since the above control is set to runat="server" the ID attribute is setting a sever side control ID, the client ID will be generated. If you don't need access to this control on the server, it might be easier to simply use a 'input' element instead of an asp.net control. The other option would be to set the ClientIDMode="Static" so the client ID is the same as the server ID.
<asp:RadioButton ID="rbtnCustom" runat="server" Text="Custom" ClientIDMode="Static"
GroupName="s1"/>
Use this for any control if you are not setting the ID in the code behind and if you are using the ID in client side Javascript.
EDIT: You are also missing phDDLCHK.Controls.Add(div); at the end of your initialiseCheckBoxList method.
You are also not providing what javascript "OnTreeClick();" is. It is referenced in the code behind. From what I can tell you are only populating the contents of the custom checkboxlist once on the initialiseCheckBoxList.
How to use asp checkbox control as RadioButton
First we create a script like this:
<script type="text/javascript">
function check(sender) {
var chkBox;
var i;
var j;
for (i = 1; i < 6; i++) {
for (j = 1; j < 6; j++) {
if (i != j) {
if (sender.id == "ck" + i) {
chkBox = document.getElementById("ck" + j);
}
else {
chkBox = document.getElementById("ck" + i);
}
if (sender.checked) {
if (chkBox.checked) {
chkBox.checked = false;
}
}
}
}
}
}
</script>
Now we use following code for our ASP CheckBox controls
<div>
<asp:CheckBox ID="ck1" runat="server" Text="P1" onclick="check(this)"/>
<asp:CheckBox ID="ck2" runat="server" Text="P2" onclick="check(this)"/>
<asp:CheckBox ID="ck3" runat="server" Text="P3" onclick="check(this)"/>
<asp:CheckBox ID="ck4" runat="server" Text="P4" onclick="check(this)"/>
<asp:CheckBox ID="ck5" runat="server" Text="P5" onclick="check(this)"/>
</div>
Thank you...
I have an aspx page and within the page I have a dropdownlist. On pageload, I add some choices to the dropdownlist. But I want to be able to select more than one option from this list when I click the dropdownlist, like a window which opens below of it and has a checkboxlist with the same choices.
How can I add multiple checkboxes to the dropdownlist, or make a checkboxlist in this manner? Should I use JQuery?
Thanks in advance.
For MultiCheckbox Dropdown in Asp.net , Use the following code enter image description here
First refer the ajaxtoolkit assembply in file
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
Then add Script Manager
<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Release">
</asp:ScriptManager>
Use the following Html Code
<asp:TextBox ID="txtClient" placeholder="Select Clients" runat="server" CssClass="txtbox" ReadOnly="true" Height="28px" Width="250px" Style="margin-bottom: auto; text-align: center; background-color: White; cursor: pointer; border-color: black; margin: 1px;"></asp:TextBox>
<asp:Panel ID="PnlClientlist" runat="server" CssClass="PnlDesign" Style="">
<asp:CheckBox ID="cbAll" runat="server" Text="Select All" BackColor="Aqua" onclick="CheckAll();" />
<asp:CheckBoxList ID="drpClients" runat="server" onclick="UnCheckAll();">
</asp:CheckBoxList>
</asp:Panel>
<cc1:PopupControlExtender ID="PceSelectClient" runat="server" TargetControlID="txtClient"
PopupControlID="PnlClientlist" Position="Bottom">
</cc1:PopupControlExtender>
Add the above reference in cocde
Use Css and JS:
function CheckAll() {
var count = 0;
$('#' + '<%=drpClients.ClientID %>' + ' input:checkbox').each(function () {
count = count + 1;
});
for (i = 0; i < count; i++) {
if ($('#' + '<%=cbAll.ClientID %>').prop('checked') == true) {
if ('#' + '<%=drpClients.ClientID %>' + '_' + i) {
if (('#' + '<%=drpClients.ClientID %>' + '_' + i).disabled != true)
$('#' + '<%=drpClients.ClientID %>' + '_' + i + ':checkbox').prop('checked', true);
}
}
else {
if ('#' + '<%=drpClients.ClientID %>' + '_' + i) {
if (('#' + '<%=drpClients.ClientID %>' + '_' + i).disabled != true)
$('#' + '<%=drpClients.ClientID %>' + '_' + i + ':checkbox').prop('checked', false);
}
}
}
}
function UnCheckAll() {
var flag = 0;
var count = 0;
$('#' + '<%=drpClients.ClientID %>' + ' input:checkbox').each(function () {
count = count + 1;
});
for (i = 0; i < count; i++) {
if ('#' + '<%=drpClients.ClientID %>' + '_' + i) {
if ($('#' + '<%=drpClients.ClientID %>' + '_' + i).prop('checked') == true) {
flag = flag + 1;
}
}
}
if (flag == count)
$('#' + '<%=cbAll.ClientID %>' + ':checkbox').prop('checked', true);
else
$('#' + '<%=cbAll.ClientID %>' + ':checkbox').prop('checked', false);
}
.PnlDesign
{
border: solid 1px #000000;
height: 300px;
width: 330px;
overflow-y: scroll;
background-color: white;
font-size: 15px;
font-family: Arial;
width: 450px;
}
.txtbox
{
background-image: url(img/drpdwn.png);
background-position: right center;
background-repeat: no-repeat;
cursor: pointer;
cursor: hand;
background-size: 20px 30px;
}
Probably you have to implement a custom control.
Take a look: http://www.codeproject.com/Articles/18063/Multi-select-Dropdown-list-in-ASP-NET
In My razor view it works please change to required aspx view
#Html.DropDownList("selectedclients", new SelectList(Model.ListClients, "ClientId", "FullName", 1), "---Select clients---", new { #class =multiple = "multiple", id = "clients" })
where ListClients is an IEnumerable list
also add jquery-1.4.4.min.js and jquery.multiSelect.js in view
and in load add
<script type="text/javascript">
$(document).ready(function () {
$("#clients").multiSelect({ oneOrMoreSelected: '*' });
});
</script>
I have 2 textboxs, 2 checkboxs and 2 labels.
first textbox, checkbox, and label related to each other and the same for the rest.
textbox should accept valid phone number based on jquery validation plugin and when the chackbox check the validation rule would change and in both option the error message would disply inside the label.
I have no problem to implement that for one text box but when I add second one will have a problem and only the validation will happen for the second one only.
please look at my code and advice.
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
var RegularExpression;
var USAPhone = /^[01]?[- .]?(\([2-9]\d{2}\)|[2-9]\d{2})[- .]?\d{3}[- .]?\d{4}$/;
var InterPhone = /^\d{9,12}$/;
var errmsg;
function ValidPhoneHome(sender) {
if (sender.checked == true) {
RegularExpression = InterPhone;
errmsg = "Enter 9 to 12 numbers as international number";
}
else {
RegularExpression = USAPhone;
errmsg = "Enter a valid number";
}
jQuery.validator.addMethod("phonehome", function(value, element) {
return this.optional(element) || RegularExpression.test(value);
}, errmsg);
}
function ValidMobileHome(sender) {
if (sender.checked == true) {
RegularExpression = InterPhone;
errmsg = "Enter 9 to 12 numbers as international number";
}
else {
RegularExpression = USAPhone;
errmsg = "Enter a valid number";
}
jQuery.validator.addMethod("mobilephone", function(value, element) {
return this.optional(element) || RegularExpression.test(value);
}, errmsg);
}
$(document).ready(function() {
ValidPhoneHome("#<%= chkIntphoneHome%>");
ValidMobileHome("#<%= chkIntMobileHome%>");
$("#aspnetForm").validate({
rules: {
"<%=txtHomePhone.UniqueID %>": {
phonehome: true
}
}
, errorLabelContainer: "#lblHomePhone",
rules: {
"<%=txtMobileHome.UniqueID %>": {
mobilephone: true
}
}
, errorLabelContainer: "#lblMobileHome"
})
</script>
<asp:CheckBox ID="chkIntphoneHome" runat="server" Text="Internation Code" onclick="ValidPhoneHome(this)" >
<asp:TextBox ID="txtHomePhone" runat="server" ></asp:TextBox>
<label id="lblHomePhone"></label>
<asp:CheckBox ID="chkIntMobileHome" runat="server" Text="Internation Code" onclick="ValidMobileHome(this)" />
<asp:TextBox ID="txtMobileHome" runat="server"></asp:TextBox>
<label id="lblMobileHome"></label>
here is the correct code:
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
ValidPhoneHome("#<%= chkIntphoneHome%>");
ValidMobileHome("#<%= chkIntMobileHome%>");
$("#aspnetForm").validate({
rules: {
"<%=txtHomePhone.UniqueID %>": {
phonehome: true
},
"<%=txtMobileHome.UniqueID %>": {
mobilephone: true
}
},
errorElement: "mydiv",
wrapper: "mydiv", // a wrapper around the error message
errorPlacement: function(error, element) {
offset = element.offset();
error.insertBefore(element)
error.addClass('message'); // add a class to the wrapper
error.css('position', 'absolute');
error.css('left', offset.left + element.outerWidth());
error.css('top', offset.top - (element.height() / 2));
}
});
});
</script>
<div id="mydiv">
<asp:CheckBox ID="chkIntphoneHome" runat="server" Text="Internation Code" Style="position: absolute;
top: 113px; left: 549px;" onclick="ValidPhoneHome(this)"
/>
<asp:TextBox ID="txtHomePhone" runat="server" Style="top: 147px; left: 543px; position: absolute;
height: 22px; width: 128px" ></asp:TextBox>
<cc1:FilteredTextBoxExtender ID="txtHomePhone_FTBE" runat="server"
Enabled="True" FilterType="Numbers" TargetControlID="txtHomePhone">
</cc1:FilteredTextBoxExtender>
<label id="lblHomePhone"
style="position:absolute; top: 175px; left: 451px; width: 351px;"></label>
<asp:CheckBox ID="chkIntMobileHome" runat="server" Style="position: absolute; top: 200px;
left: 535px;" Text="Internation Code" onclick="ValidMobileHome(this)" />
<asp:TextBox ID="txtMobileHome" runat="server" Style="top: 231px; left: 555px; position: absolute;
height: 22px; width: 128px"></asp:TextBox>
<cc1:FilteredTextBoxExtender ID="txtMobileHome_FilteredTextBoxExtender"
runat="server" Enabled="True" FilterType="Numbers"
TargetControlID="txtMobileHome">
</cc1:FilteredTextBoxExtender>
<label id="lblMobileHome" style="top: 254px; left: 449px; position: absolute;
height: 17px; width: 345px"></label>
<asp:CheckBox ID="chkIntFaxHome" runat="server" Style="position: absolute; top: 274px;
left: 567px;" Text="Internation Code" onclick="ValidFaxHome(this)"
/>
<asp:TextBox ID="txtFaxHome" runat="server" Style="top: 294px; left: 569px; position: absolute;
height: 22px; width: 128px"></asp:TextBox>
<label id="lblFaxHome" style="top: 321px; left: 483px; position: absolute;
height: 22px; width: 294px"></label>
<cc1:FilteredTextBoxExtender ID="txtFaxHome_FilteredTextBoxExtender"
runat="server" Enabled="True" FilterType="Numbers" TargetControlID="txtFaxHome">
</cc1:FilteredTextBoxExtender>
</div>