Posts

Showing posts from February, 2014

Add radio button control to Grid View and make only one selected radio button using JavaScript in Asp.net, C#

Image
In this blog, I am going to show how to add radio button to the gridview and only one radio button selection at a time using JavaScript. First of all, add the below javascript code inside your <head> tag which is responsible for only single readio button selected ::     <style type="text/css"> .Gridview { font-family:Verdana; font-size:10pt; font-weight:normal; color:black; width:300px; border-color:black; } </style> <script language="javascript" type="text/javascript">     function SelectSingleRadiobutton(rdbtnid) {         var rdBtn = document.getElementById(rdbtnid);         var rdBtnList = document.getElementsByTagName("input");         for (i = 0; i < rdBtnList.length; i++) {             if (rdBtnList[i].type == "radio" && rdBtnList[i].id != rdBtn.id) {                 rdBtnList[i].checked = false;             }         }     } </script> Now, add following c
Post a Comment
Read more

Show ToolTip message using CSS in Asp.Net

Image
In this blog i am going to explain with example How to show tooltip guideline/instruction/message on mouse over in asp.net website using CSS(Cascade  Style Sheets). First of all in the design page(.aspx) add table(4*3) having First column for Lable, second column for textboxes and the last column for the help image over which user mouseover and will get tooltip as shown in image below: Add the below code inside the <head> tag or create a separate CSS file and attach it tour aspx page. Here i am including in the same page. Add codes as below :: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TextBoxToolTip.aspx.cs" Inherits="TextBoxToolTip" %> <!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>
1 comment
Read more

Show GridView row details in tooltip on mouseover with jQuery using asp.net inside GridView in c#

Image
In this blog i am going to explain how to show gridview row details in tooltip on mouseover with jQuery using asp.net in C# First of all in the design page(.aspx) write place Gridview as following:: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewToolTipaspx.aspx.cs" Inherits="GridViewToolTipaspx" %> <!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>     <script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script> <script src="js/jquery.tooltip.min.js" type="text/javascript"></script> <script type="text/javascript">     function InitializeToolTip() {         $(".gridViewTool
3 comments
Read more

Fill/ Bind/ Load DropDown List with the data from the Sql Server table.

In this blog i am going to explain how to dynamically Bind/Load/Fill DropDownList with the data from the Sql Server table. First of all n the design page(.aspx) place a DropDownList control as:          <asp:DropDownList ID="ddlistQualification" runat="server" RepeatColumns="2">         </asp:DropDownList> Now Create a connectionstring in the web.config file under configuration tag as: <configuration> <connectionStrings>                                 <add name="Conn" connectionString="Data Source=.;Initial Catalog=My_DB;Integrated Security=True"/> </connectionStrings> </configuration> Now, Create a Database "My_DB" in sql server and also create a table "Qualifications" having 2 fields :          "Qualification_Id int identity(1,1) primary key not null, Qualification varchar(50)" Now, in the code behind file(.aspx.cs) write the code as :: usin
Post a Comment
Read more

Bind data to checkbox list from database in C# (Fiil Checkbox list from table in asp.net c#)

In this blog i am going to explain how to dynamically Bind/Load/Fill CheckBoxList with the data from the Sql Server table. First of all n the design page(.aspx) place a CheckBoxList control as:          <asp:CheckBoxList ID="ckQualification" runat="server" RepeatColumns="2">         </asp:CheckBoxList> Now Create a connectionstring in the web.config file under configuration tag as: <configuration> <connectionStrings>                                 <add name="Conn" connectionString="Data Source=.;Initial Catalog=My_DB;Integrated Security=True"/> </connectionStrings> </configuration> Now, Create a Database "My_DB" in sql server and also create a table "Qualifications" having 2 fields :           "Qualification_Id int identity(1,1) primary key not null, Qualification varchar(50)" Note: Don't forgot to enter few data eg. MCA, Engg., B
Post a Comment
Read more

Show/ Hide Div, Toggle Div on Button click using Jquery and JavaScript with example

Image
Here I will explain how to show / hide div using jQuery. jQuery show & hide div content example. By using few lines of jQuery coding we can show or hide div content elements. Write the below code for implementing this :: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Show_Hide_Div.aspx.cs" Inherits="Show_Hide_Div" %> <!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>     <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> <script type="text/javascript">     $(function () {         $('.showhide').click(function () {             $(".slidediv").slideToggle();         });     }); </script&
Post a Comment
Read more

Create watermarked Textbox and CalendarExtendar toolkit by using Ajax

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Calendar.aspx.cs" Inherits="Calendar" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %> <!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>     <style>         /*Textbox Watermark*/               .unwatermarked         {             height: 18px;             width: 148px;         }               .watermarked         {             height: 20px;             width: 150px;             padding: 2px 0 0 2px;             border: 1px solid #BEBEBE;             background-color: #F0F8FF;             color: gray;         }     </style> </head> &l
Post a Comment
Read more

How to use ajax Accordion control in Asp.Net

Image
Accordion control is used to bind multiple panes and display one pane at a time. This control is like having multiple collapsiblepanels where only one can be opened at a time. To use Accordion control in our code we need to design code in certain format like below <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Accordion.aspx.cs" Inherits="Accordion" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> <!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>     <style type="text/css">     .accordionHeader     {         border: 1px solid #2F4F4F;               color: white;               background-color:
Post a Comment
Read more

Change color of alternate rows of Data GridView in Asp.Net

Image
In this article, I will show you how to set alternative color for gridview rows and columns in asp.net. Introduction Sometime we may have a cosmetic requirement in gridview control to set alternative row and column color in asp.net applications while displaying the data to the user. It’s easy and simple way to set alternative color in gridview control, follow the below steps and code snippets for this. Create Asp.Net project Create an asp.net project and format the aspx page as like below. I have added two gridview controls to show this sample. One for gridview alternative row color changes and other one is alternative column color change. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ValueAgainstNull.aspx.cs" Inherits="ValueAgainstNull" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="
Post a Comment
Read more

Check Empty/ Null value in the Data Table and replace null values with custom value

Image
Below i have used a gridview and putted some data inside gridview containing few null values inside data columns and replacing all null values with string "Data Not Avaialable" :: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; public partial class ValueAgainstNull : System.Web.UI.Page {     protected void Page_Load(object sender, EventArgs e)     {         if (!IsPostBack)         {             BindData();         }     }     protected void BindData()     {         DataTable dt = new DataTable();         dt.Columns.Add("UserId", typeof(Int32));         dt.Columns.Add("Name", typeof(string));         dt.Columns.Add("Designation", typeof(string));         dt.Columns.Add("Department", typeof(string));         DataRow dr = dt.NewRow();         dr["UserId"] = 1;         dr["Name"]=&q
Post a Comment
Read more

Disable Right Click by Users on images using jqeury(i.e. Restrict user from image copy)

Just place below script inside your <head> tag and enjoy...:: <script  type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js">     </script> <script type="text/javascript">    $(document).ready(function () {        $('img').bind('contextmenu', function (e) {            return false;        });    });   </script>
Post a Comment
Read more

Disable Right Click by User on Page using Jquery

Just Place below code inside your <head> tag and see result :: <script  type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js">     </script> <script type="text/javascript">     $(document).ready(function () {         $(document).bind("contextmenu", function (e) {             return false;         });     });   </script>
Post a Comment
Read more

Restrict user from entering unlimited characters in a multiline textbox

First of all add following code inside <head> tag :: <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript">     $(function () {         $('#txtdesc').keypress(function (e) {             var txt = $(this).val();             if (txt.length > 90) {                 e.preventDefault();             }         });     }); </script> Now add code in <body> tag ::  <div>        Enter Address(Should be Less than 90 Chars) <asp:TextBox ID="txtdesc" runat="server" TextMode="MultiLine"></asp:TextBox>     </div>
1 comment
Read more

Hide/ Show Password on button click by using JavaScript and Jquery

First of all add the below code inside your <head> tag ::  <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>   <script type="text/javascript">     $(function () {         $('#showpwd').hide();         $('#btnpwd').click(function () {             var txt = $('#btnpwd').val()             var pwd = $('#hidepwd').val();             if (pwd.length > 0) {                 if (txt == 'Show Password') {                     $(this).val('Hide Password');                     $('#showpwd').val($('#hidepwd').val());                     $('#showpwd').show();                     $('#hidepwd').hide();                     return false;                 }                 else if (txt == 'Hide Password') {                     $(this).val('Show Password');                     $('#showpwd').hide(
Post a Comment
Read more

Restrict users for entering special charcters in textbox using Jquery

First of all add the following codes inside your <head> tag :: <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript">     $(function () {         $('#btnClick').click(function () {             var str = $('#txtName').val();             if (/^[a-zA-Z0-9- ]*$/.test(str) == false) {                 alert('Special Characters are not allowed.');             }         })     }) </script>   Then add this code inside your <body> tag :: <div> Enter Search:<asp:TextBox ID="txtName" runat="server"></asp:TextBox>         <asp:Button ID="btnClick" runat="server" Text="Check" /> </div>     
Post a Comment
Read more

Use of AJax Collapsible Panel Extender tool in Asp.Net with attaractive background and Collapse and Expand images

Image
First of all add a referance for AjaxControlToolKit to your page :: <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> Add following css inside <head> tag ::   <style type="text/css"> .pnlCSS{ font-weight: bold; cursor: pointer; border: solid 1px #c0c0c0; width:30%; border-radius:10px; background-color:white; } .pnlClick {     font-weight: bold; cursor: pointer; border: solid 1px #c0c0c0; width:30%; border-radius:10px; background-color:Gray; } .Water {     font-weight:lighter;     font-style:italic;     color:Gray;     width:220px;     border-round:5px;   } </style> Add two panel inside your <body> tag and Attach AjaxControlToolKit control and drag and drop the CollapsiblePanelExtender like below::    <asp:Panel ID="pnlClick" runat="server" CssClass="pnlClick"> <div style="width:100%; heigh
Post a Comment
Read more

jquery.fancybox.pack.js for image zoom on mouseover

/*! Save file as it is with jquery.fancybox.pack.js as file name and attach to youe solution for image zoom effect */ (function(B, x, f, q) {     var r = f(B), m = f(x), b = f.fancybox = function() { b.open.apply(this, arguments) }, u = null, n = x.createTouch !== q, s = function(a) { return a && a.hasOwnProperty && a instanceof f }, p = function(a) { return a && "string" === f.type(a) }, E = function(a) { return p(a) && 0 < a.indexOf("%") }, k = function(a, d) { var e = parseInt(a, 10) || 0; d && E(a) && (e *= b.getViewport()[d] / 100); return Math.ceil(e) }, v = function(a, b) { return k(a, b) + "px" }; f.extend(b, { version: "2.1.3", defaults: { padding: 15, margin: 20, width: 800, height: 600, minWidth: 100, minHeight: 100,         maxWidth: 9999, maxHeight: 9999, autoSize: !0, autoHeight: !1, autoWidth: !1, autoResize: !0, autoCenter: !n, fitToView: !0, aspectRatio: !1, topRatio: 0.5,
Post a Comment
Read more
go to top image