Archive

Archive for the ‘Javascript’ Category

Validate Rad ComboBox

November 6, 2016 Leave a comment

Hi all,

Try this example to Validate Rad ComboBox Using ASP.Net Validation Controls


<script type="text/javascript">
 function validateddlType(source, args) {
 args.IsValid = false;
 var combo = $find("<%= ddlType.ClientID %>");
 var text = combo.get_text();
 if (text.length < 1) {
 args.IsValid = false;
 }
 else {
 var node = combo.findItemByText(text);
 if (node) {
 args.IsValid = true;
 }
 else {
 args.IsValid = false;
 }
 }
 }

</script>

<telerik:radcombobox id="ddlType" allowcustomtext="True" runat="server" emptymessage="--- Please Select ---" filter="Contains" skin="Telerik"></telerik:radcombobox>
<asp:RequiredFieldValidator ID="rfvType" ControlToValidate="ddlType" ForeColor="Red" runat="server" Display="Dynamic" ErrorMessage="Value is required" ValidationGroup="A"></asp:RequiredFieldValidator>
<asp:CustomValidator ID="cvType" ClientValidationFunction="validateddlType" ForeColor="Red" ControlToValidate="ddlType" ValidationGroup="A" runat="server" ErrorMessage="Please select a vaild Value"></asp:CustomValidator>

Hope this helps

Good Luck.

Categories: ASP.Net, Javascript

Set Maximum characters to 1000 for Multiline TextBox Using JQuery

July 22, 2016 Leave a comment

Hi all,

Try this example to Set Maximum characters to 1000 for Multiline TextBox Using JQuery


<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 //Assign the text to span in pageload
 $('#spntxtMult').text("Number of characters 0/1000");
 //attach change event to div
 $('#txtMult').keyup(function (event) {
 //call function to calcualate count on change event of div
 textCounter();
 });
 });
 function textCounter() {
 //Get the max length countnt
 var divlength = $('#txtMult').val().length;
 //check if count greater than 1000
 if (divlength > 1000) {
 //Trim the text
 var trimmedtext = $('#txtMult').val().substring(0, 1000);
 //assign it to textbox
 $('#txtMult').val(trimmedtext);
 }
 else {
 var remaningchar = 0;
 //Calculate the remining char
 if (divlength > 0) {
 remaningchar = 1000 - divlength;
 }

//reduce the allowed no of characters in span
 $('#spntxtMult').text("Number of characters " + remaningchar + "/1000");
 }
 }
</script>
<asp:TextBox ID="txtMult" runat="Server" TextMode="MultiLine" />
<span id="spntxtMult"></span>

Hope this helps

Good Luck.

Categories: ASP.Net, Javascript, Jquery

Limit Number of items to be Selected in ASP.Net ListBox

February 9, 2016 Leave a comment

Hi all,

try this example to Limit Number of items to be Selected in ASP.Net ListBox using Client and Server side validation


<script type="text/javascript" language="javascript">
function CustomValidator1_ClientValidate(source,args)
{ 
var listbox = document.getElementById("<%=ListBox1.ClientID %>");
var total = 0;
var i=0;
for( i = 0; i < listbox.options.length; i++ )
{
 if (listbox.options[i].selected) 
 {
 total ++; 
 if (total >10) {
 args.IsValid = false;
 return;
 }
 } 
 } 
 args.IsValid = true; return;
}
</script>

<asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple" Height="100%"
Width="100%"></asp:ListBox>
<asp:Button ID="btn_Save" runat="server" Text="Save" />
<asp:CustomValidator ID="CustomValidator1" runat="server" Display="Dynamic" ErrorMessage="Please select 10 items only."
ClientValidationFunction="CustomValidator1_ClientValidate" OnServerValidate="CustomValidator1_ServerValidate">
</asp:CustomValidator>

In Code behind :

protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)
{
int count = 0;
for (int i = 0; i < ListBox1.Items.Count; i++)
{
if (ListBox1.Items[i].Selected)
count++;
}
args.IsValid = (count > 10) ? false : true;
}

Hope this helps

Good Luck

Display image Thumbnail from Database in GridView and Display Enlarged Popup in ASP.Net

October 25, 2015 Leave a comment

Hi all,

Try this example to Display image Thumbnail from Database in GridView and Display Enlarged Popup in ASP.Net

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/Blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$('[id*=imgThumbnail]').bind('click', function () {
// $("#divImage").show();
$("[id*=imgBigImage]").attr('src', $(this).attr('alt'));
$("#divImage").dialog({
title: "Image",
modal: true,
resizable: false,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">


<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="GridView1_OnRowDataBound">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:TemplateField HeaderText="File Path">
<ItemTemplate>
<asp:Image ID="imgThumbnail" AlternateText='<%# Eval("FilePath") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id="divImage" style="display: none;">
<asp:Image ID="imgBigImage" runat="server" Width="300" Height="300" />
</div>
</form>
</body>
</html>

In Code behind :

protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt.Columns.Add("Name");
dt.Columns.Add("FilePath");
dt.Rows.Add("Jellyfish", "Images/Jellyfish.jpg");
dt.Rows.Add("Koala", "Images/Koala.jpg");
dt.Rows.Add("Penguins", "Images/Penguins.jpg");
dt.Rows.Add("Tulips", "Images/Tulips.jpg");
this.GridView1.DataSource = dt;
this.GridView1.DataBind();
}

protected void GridView1_OnRowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
System.Web.UI.WebControls.Image img = e.Row.FindControl("imgThumbnail") as System.Web.UI.WebControls.Image;
string path = Server.MapPath(img.AlternateText);
img.ImageUrl = GenerateThumbnail(path);
}
}

private string GenerateThumbnail(string path)
{
System.Drawing.Image image = System.Drawing.Image.FromFile(path);
using (System.Drawing.Image thumbnail = image.GetThumbnailImage(100, 100, new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback), IntPtr.Zero))
{
using (MemoryStream memoryStream = new MemoryStream())
{
thumbnail.Save(memoryStream, ImageFormat.Png);
Byte[] bytes = new Byte[memoryStream.Length];
memoryStream.Position = 0;
memoryStream.Read(bytes, 0, (int)bytes.Length);
string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);
return "data:image/png;base64," + base64String;
}
}
}

public bool ThumbnailCallback()
{
return false;
}

Hope this helps

Good Luck.

Categories: ASP.Net, Javascript

Implement Alpha Numeric Validation for Password in JavaScript

September 14, 2015 2 comments

Hi all,

Try this example to Implement Alpha Numeric validation for password in JavaScript

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>

<style type="text/css">
body
{
font-size: 9pt;
font-family: Arial;
}
</style>

</head>
<body>
Alphanumeric value:
<input type="text" id="text1" onkeypress="return IsAlphaNumeric(event);" ondrop="return false;" onpaste="return false;" />
<span id="error" style="color: Red; display: none">* Special Characters not allowedspan>
<script type="text/javascript">
var specialKeys = new Array();
specialKeys.push(8); //Backspace
specialKeys.push(9); //Tab
specialKeys.push(46); //Delete
specialKeys.push(36); //Home
specialKeys.push(35); //End
specialKeys.push(37); //Left
specialKeys.push(39); //Right
function IsAlphaNumeric(e) {
var keyCode = e.keyCode == 0 ? e.charCode : e.keyCode;
var ret = ((keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122) || (specialKeys.indexOf(e.keyCode) != -1 && e.charCode != e.keyCode));
document.getElementById("error").style.display = ret ? "none" : "inline";
return ret;
}
</script>
</body>
</html>

Hope this helps

Good Luck.

Categories: ASP.Net, Javascript

Display image Thumbnail from Database in GridView and Display Enlarged Popup in ASP.Net

June 12, 2015 Leave a comment

Hi all,

Try this example to Display image Thumbnail from Database in GridView and Display Enlarged Popup in ASP.Net

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/Blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$('[id*=imgThumbnail]').bind('click', function () {
// $("#divImage").show();
$("[id*=imgBigImage]").attr('src', $(this).attr('alt'));
$("#divImage").dialog({
title: "Image",
modal: true,
resizable: false,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="GridView1_OnRowDataBound">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:TemplateField HeaderText="File Path">
<ItemTemplate>
<asp:Image ID="imgThumbnail" AlternateText='<%# Eval("FilePath") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id="divImage" style="display: none;">
<asp:Image ID="imgBigImage" runat="server" Width="300" Height="300" />
</div>
</form>
</body>
</html>

In Code behind :

protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt.Columns.Add("Name");
dt.Columns.Add("FilePath");
dt.Rows.Add("Jellyfish", "Images/Jellyfish.jpg");
dt.Rows.Add("Koala", "Images/Koala.jpg");
dt.Rows.Add("Penguins", "Images/Penguins.jpg");
dt.Rows.Add("Tulips", "Images/Tulips.jpg");
this.GridView1.DataSource = dt;
this.GridView1.DataBind();
}

protected void GridView1_OnRowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
System.Web.UI.WebControls.Image img = e.Row.FindControl("imgThumbnail") as System.Web.UI.WebControls.Image;
string path = Server.MapPath(img.AlternateText);
img.ImageUrl = GenerateThumbnail(path);
}
}

private string GenerateThumbnail(string path)
{
System.Drawing.Image image = System.Drawing.Image.FromFile(path);
using (System.Drawing.Image thumbnail = image.GetThumbnailImage(100, 100, new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback), IntPtr.Zero))
{
using (MemoryStream memoryStream = new MemoryStream())
{
thumbnail.Save(memoryStream, ImageFormat.Png);
Byte[] bytes = new Byte[memoryStream.Length];
memoryStream.Position = 0;
memoryStream.Read(bytes, 0, (int)bytes.Length);
string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);
return "data:image/png;base64," + base64String;
}
}
}

public bool ThumbnailCallback()
{
return false;
}

Hope this helps

Good Luck

Categories: ASP.Net, Javascript, Jquery

Disable Current and Past Dates in JQuery Calender

Hi all,

Try this example to disable current and past dates selection from JQuery Calender in ASP.Net

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Disable Current and Past Date</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
var date = new Date();
var currentMonth = date.getMonth();
var currentDate = date.getDate()+1;
var currentYear = date.getFullYear();
$('#datepicker').datepicker({
minDate: new Date(currentYear, currentMonth, currentDate)
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>Date: <input type="text" id="datepicker" /></p>
</div>
</form>
</body>
</html>

Hope this helps

Good Luck.

Categories: ASP.Net, Javascript, Jquery