RadGrid for ASP .NET version
RadControls for ASP .NET AJAX version |
4.5.x and later
2008.1.415 and later |
.NET version |
2.0 and later
|
Visual Studio version |
2005 and later
|
Programming language |
JavaScript
|
Browser support |
all supported by RadGrid for ASP .NET
all browsers supported by RadControls for ASP .NET AJAX
|
To convert code from posted projects |
Telerik online converter |
PROJECT DESCRIPTION
This project demonstrates how to select grid rows only when a check box (part of
GridClientSelectColumn) is clicked. The main function is attached to the grid's
OnRowSelecting and
OnRowDeselecting client events and returns
false if the clicked element is not check box. The project works as expected in all browsers supported by
telerik by means of attaching an event listener to the click event.
The essential part of the logic is posted below:
<script type="text/javascript"> |
var currentClickEvent = null; |
|
function GridCreated() |
{ |
var grid = this; |
|
//non-ie click event capture |
//the event handler will get fired *before* the row click event |
//and we use that to cache the current event object |
if (grid.Control.addEventListener) |
grid.Control.addEventListener("click", GridTableClick, true); |
} |
|
function GridTableClick(e) |
{ |
currentClickEvent = e; |
} |
|
//IE has a global event object. We get the previously cached event object for other browsers |
function GetClickEvent() |
{ |
return window.event || currentClickEvent; |
} |
|
//cancel all select/deselect operation triggered by non-checkbox row clicks |
function CancelNonInputSelect(row) |
{ |
var e = GetClickEvent(); |
//IE - srcElement, Others - target |
var targetElement = e.srcElement || e.target; |
|
//is the clicked element a checkbox? <input type="checkbox"...> |
if(targetElement.tagName.toLowerCase() != "input" && |
targetElement.type.toLowerCase() != "checkbox") |
{ |
//cancel the event |
return false; |
} |
|
//clean up after all (de)selections are performed |
window.setTimeout(function() { |
currentClickEvent = null; |
}, 0); |
} |
</script> |
Working project is attached to this thread as well.