Archive

Archive for the ‘Jquery’ Category

Display Sum (Total) of Checked GridView Rows on CheckBox check using jQuery in ASP.Net

March 27, 2017 Leave a comment

Dears,

Try this example to Display Sum (Total) of Checked GridView Rows on CheckBox check using jQuery in ASP.Net

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 <script type="text/javascript">
 $(function () {
 $('[id*=chk]').on('change', function () {
 var value = 0;
 $('[id*=chk]:checked').each(function () {
 var row = $(this).closest('tr');
 value = value + parseInt(row.find('[id*=lblValue]').html());
 });
 $('[id*=lblTotal]').html(value);
 });
 });
 </script>
<asp:GridView ID="gvData" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<asp:CheckBox ID="chk" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Values">
<ItemTemplate>
<asp:Label ID="lblValue" runat="server" Text='<%# Eval("Value") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Label ID="lblTotal" runat="server" />

In Code behind :

protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[1] { new DataColumn("Value", typeof(int)) });
dt.Rows.Add(10);
dt.Rows.Add(20);
dt.Rows.Add(30);
dt.Rows.Add(40);
gvData.DataSource = dt;
gvData.DataBind();
}
}

Hope this helps

Good Luck.

Categories: ASP.Net, Jquery

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

JQuery Redirect to Another Page After Some Time Delay in Asp.net

November 13, 2015 Leave a comment

Hi all,

Try this example to Use jQuery Redirect to Another Page after Some Time Delay in Asp.net

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JavaScript redirect to another page after 5 seconds or Sometime</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
var i = 0;
$(document).ready(function() {
ShowCurrentTime();
})
function ShowCurrentTime() {
var dt = new Date();
document.getElementById("lblTime").innerHTML = 5 - i + " Seconds";
i++;
if (i == 5) {
setTimeout("location.href='https://yasserzaid.wordpress.com'", 0);
}
window.setTimeout("ShowCurrentTime()", 1000);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
This Page will Redirec to Another Page within:
<label id="lblTime" style=" font-weight:bold; font-size:12pt"></label>
</div>
</form>
</body>
</html>

Hope this helps

Good Luck.

Categories: ASP.Net, Jquery

Get the selected item value from RadiobuttonList using JQuery

August 11, 2015 Leave a comment

Hi all,

Try this example to get the selected item value from RadiobuttonList using JQuery


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//Attach click event to button
$('#Button1').click(function (e) {
//Get the selected item value from RadioButtonList
var rblSelectedValue = $("#<%= RadioButtonList1.ClientID %> input:checked").val();
$("#<%= lblSelectedValue.ClientID %>").text(rblSelectedValue);
//Get the selected item text value from RadioButtonList
var rblSelectedText = $("#<%= RadioButtonList1.ClientID %> input:checked").next().html();
$("#<%= lblSelectedItem.ClientID %>").text(rblSelectedText);
//Cancel the postback
e.preventDefault();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem Value="1" Text="First"></asp:ListItem>
<asp:ListItem Value="2" Text="Second"></asp:ListItem>
<asp:ListItem Value="3" Text="Third"></asp:ListItem>
<asp:ListItem Value="4" Text="Fourth"></asp:ListItem>
<asp:ListItem Value="5" Text="Fifth"></asp:ListItem>
</asp:RadioButtonList>
<asp:Button ID="Button1" runat="server" Text="Get Selected Value" />

Selected Value
<asp:Label ID="lblSelectedValue" runat="server" Text=""></asp:Label>

Selected Item
<asp:Label ID="lblSelectedItem" runat="server" Text=""></asp:Label>

Hope this helps

Good Luck.

Categories: ASP.Net, Jquery

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

How to Implement jQuery UI Slider with ASP.NET

Hi all,

Try this example to Implement jQuery UI slider with ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Slider_Demo.aspx.cs" Inherits="Slider_Demo" %>
<!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">
<link type="text/css" rel="Stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/themes/start/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js">
</script>
<title></title>
<script type="text/javascript">
$(document).ready(function () {
$("#slider").slider(
{
min: <%=MinValue%>,
max: <%=MaxValue%>,
step: <%=Step %>,
slide: function (event, ui) {
$("#txtValue").val(ui.value);
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="slider" style="width: 200px;">
</div>
<asp:TextBox ID="txtValue" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>

And In Code behind :


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Slider_Demo : System.Web.UI.Page
{
public const int MinValue = 0;
public const int MaxValue = 100;
public const int Step = 5;
protected void Page_Load(object sender, EventArgs e)
{

}
}

Hope this helps

Good Luck

Categories: ASP.Net, Jquery