Disabling cut, copy, paste, right click and context menu in a textbox on aspx page

In this tutorial you will learn how to disable cut, copy, paste, right click and context menu in asp:textbox. Sometimes due to security point of view you may want to do this. It's quite simple, I often see that developers write javascript code to disable the cut, copy, paste in textbox either textbox is input or server side asp:textbox.


I will not use any single line of javascript code to achieve what I want. Now let's have a look over how to do so.

Disabling cut, copy, paste, right click and context menu in a textbox


<asp:TextBox ID="txtName" runat="server" oncopy="return false" onpaste="return false" oncut="return false" oncontextmenu="return false">
</asp:TextBox>
You can use same concept with input textbox like

<input type="text" ID="txtName" oncopy="return false" onpaste="return false" oncut="return false" oncontextmenu="return false"/>

to disable the copy, paste, cut, right click and contextmenu in textbox.
I have used the events (oncopy, onpaste, oncut, oncontextmenu) of textbox to achieve the desired disability.

If you want to show the alerts then you have to modify the code like this

<input type="text" ID="txtName" oncopy="disableCopy();" onpaste="disablePaste();" oncut="disableCut();" oncontextmenu="disableContextMenu();"/>


<script language="javascript" type="text/javascript">
function disableCopy()
{
alert("You cannot perform Copy");
return false;
}


function disablePaste()
{
alert("You cannot perform Paste");
return false;
}


function disableCut()
{
alert("You cannot perform Cut");
return false;
}


function disableContextMenu()
{
alert("You cannot perform right click via mouse as well as keyboard");
return false;
}
</script>

I hope you will find this article very interesting.
Happy Coding Keep Coding
Read more...

How to highlight the selected row in table/gridview using jquery

In this jquery tutorial you will learn how to highlight the selected row in table/gridview using jquery. I am selecting the rows on the basis of checked checkboxes. Whenever checkbox is checked then its row will be highlighted.


I have already written a tutorial about how to check/uncheck all checkboxes using jquery.


So I will continue from there and merge the code to highlight the selected row with the code to check/uncheck all checkboxes using jquery.


Now let's have a look over welcome.html

How to highlight the selected row in table/gridview using jquery


<html>
<head>
<title> How to highlight the selected row in table/gridview using jquery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"
charset="utf-8"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$("#checkall").live('click',function(event){
$('input:checkbox:not(#checkall)').attr('checked',this.checked);
//To Highlight
if ($(this).attr("checked") == true)
{
//$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#FF3700");
$("#tblDisplay").find('tr:not(#chkrow)').css("background-color","#FC9A01");
}
else
{
//$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#fff");
$("#tblDisplay").find('tr:not(#chkrow)').css("background-color","#FFF");
}
});
$('input:checkbox:not(#checkall)').live('click',function(event)
{
if($("#checkall").attr('checked') == true && this.checked == false)
{
$("#checkall").attr('checked',false);
$(this).closest('tr').css("background-color","#ffffff");
}
if(this.checked == true)
{
$(this).closest('tr').css("background-color","#FC9A01");
CheckSelectAll();
}
if(this.checked == false)
{
$(this).closest('tr').css("background-color","#ffffff");
}
});

function CheckSelectAll()
{
var flag = true;
$('input:checkbox:not(#checkall)').each(function() {
if(this.checked == false)
flag = false;
});
$("#checkall").attr('checked',flag);
}
});

</script>
</head>
<body>
<table width="50%" cellspacing="0" border="0" align="left" id="tblDisplay" cellpading="0"
style="font-family: verdana; font-size: 10px;">
<thead>
<tr id="chkrow">
<th>
<input type="checkbox" id="checkall" />
</th>
<th>
Sr.
</th>
<th style="text-align: left;">
First Name
</th>
<th style="text-align: left;">
Last Name
</th>
<th>
Country
</th>
<th>
Marital Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="1" />
</td>
<td style="text-align: center;">
1
</td>
<td style="text-align: left;">
Adeel
</td>
<td style="text-align: left;">
Fakhar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="2" />
</td>
<td style="text-align: center;">
2
</td>
<td style="text-align: left;">
Omer
</td>
<td style="text-align: left;">
Fakhar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="3" />
</td>
<td style="text-align: center;">
3
</td>
<td style="text-align: left;">
Umer
</td>
<td style="text-align: left;">
Mukhtar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="4" />
</td>
<td style="text-align: center;">
4
</td>
<td style="text-align: left;">
Mark
</td>
<td style="text-align: left;">
Waugh
</td>
<td style="text-align: center;">
Australia
</td>
<td style="text-align: center;">
Married
</td>
</tr>
</tbody>
</table>
</body>
</html>

Note:- Using same technique you can highlight the row in gridview using jquery becuase when page is render then <asp:GridView> becomes the <table>.


Copy/paste all the code, save the page, run the page and enjoy what you want.


So I hope you will find this tutorial of jquery very handy. Happy Coding... Keep Coding.
Read more...

Check/Uncheck All Checkboxes using jquery


In this jquery tutorial you will learn how to check/uncheck all checkboxes using jquery. I have already written a post about how to check/uncheck all checkboxes using javascript and c#.


But being a software engineer, we should always follow the latest technology as well. So that's why I have written this tutorial in jquery. So let's have a look over the home.html


Check/Uncheck All Checkboxes using jquery


<html>
<head>
<title>Check/Uncheck All Checkboxes using jquery </title>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"
charset="utf-8"></script>


<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$("#checkall").live('click',function(event){
$('input:checkbox:not(#checkall)').attr('checked',this.checked);
});


$('input:checkbox:not(#checkall)').live('click',function(event)
{
if($("#checkall").attr('checked') == true && this.checked == false)
$("#checkall").attr('checked',false);
if(this.checked == true)
CheckSelectAll();
});


function CheckSelectAll()
{
var flag = true;
$('input:checkbox:not(#checkall)').each(function() {
if(this.checked == false)
flag = false;
});
$("#checkall").attr('checked',flag);
}


});




</script>


</head>
<body>
<table width="50%" cellspacing="0" border="0" align="left" id="tblDisplay" cellpading="0"
style="font-family: verdana; font-size: 10px;">
<thead>
<tr id="chkrow">
<th>
<input type="checkbox" id="checkall" />
</th>
<th>
Sr.
</th>
<th style="text-align: left;">
First Name
</th>
<th style="text-align: left;">
Last Name
</th>
<th>
Country
</th>
<th>
Marital Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="1" />
</td>
<td style="text-align: center;">
1
</td>
<td style="text-align: left;">
Adeel
</td>
<td style="text-align: left;">
Fakhar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="2" />
</td>
<td style="text-align: center;">
2
</td>
<td style="text-align: left;">
Omer
</td>
<td style="text-align: left;">
Fakhar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="3" />
</td>
<td style="text-align: center;">
3
</td>
<td style="text-align: left;">
Umer
</td>
<td style="text-align: left;">
Mukhtar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="4" />
</td>
<td style="text-align: center;">
4
</td>
<td style="text-align: left;">
Mark
</td>
<td style="text-align: left;">
Waugh
</td>
<td style="text-align: center;">
Australia
</td>
<td style="text-align: center;">
Married
</td>
</tr>
</tbody>
</table>
</body>
</html>

Explaination of Code:-


I have placed a checkbox of id "checkall" in the first row, the header row of the table. Now by clicking this checkbox, the process of check/uncheck all checkboxes will be performed.


Now let's understand the jquery code.



$("#checkall").live('click',function(event){
$('input:checkbox:not(#checkall)').attr('checked',this.checked);
});

The above code snippet will performed the thing that you want to do. It will bind the click event to the "checkall" checkbox and will check/uncheck all the checkboxes other than itself.



$('input:checkbox:not(#checkall)').live('click',function(event)

The above code will bind the click event to all of the checkboxes other then the checkbox of id "checkall".


Note: - Always use the click event with live function, live function can bind the click event to the dynamic elements (the elements that are generated at runtime) as well. It will not create any problem if data is coming from database i.e.; dynamic rows are being added to the table.


If you write the same code like this

$("#checkall").click(function(){
$('input:checkbox:not(#checkall)').attr('checked',this.checked);
});

Then if you are getting the table rows from database with checkboxes then the click event will not be bind with the checkboxes of dynamic rows. So always use the click event with live function.

if($("#checkall").attr('checked') == true && this.checked == false)
$("#checkall").attr('checked',false);

Now let's consider you have checked all the checkboxes. Now this above code snippet will uncheck the header checkbox “checkall” when any of the checkbox placed in the body of the table will be unchecked. The checkbox "checkall"
should be only checked when all the other checkboxes are checked and when any one of the checkbox will be unchecked the "checkall" checkbox should be unchecked.

if(this.checked == true)
CheckSelectAll();


function CheckSelectAll()
{
var flag = true;
$('input:checkbox:not(#checkall)').each(function() {
if(this.checked == false)
flag = false;
});
$("#checkall").attr('checked',flag);
}

Now when you checked any of the checkbox placed in the <tbody> of the table then the above code snippet will check whether all the checkboxes are checked or not through built-in each() of jquery that will loop through all the checkboxes placed in the <tbody> and will try to find any of the checkbox that is unchecked, if it finds any unchecked checkbox then it will set the variable flag to false and the "checkall" checkbox(the checkbox placed in the <thead> row of the table) will be unchecked
But when it will not find any of the checkbox unchecked then it will checked the "checkall" checkbox.


Note: - It is not compulsory for you to use the <thead> and <tbody> in the <table>. I just use them to make the table structure better and understandable.


So this is the way to check/uncheck all checkboxes using jquery.
Read more...