
Chris Kronenthal
Top achievements
Rank 1
Chris Kronenthal
asked on 12 May 2014, 07:18 PM
I have a RadGrid with AllowMultiRowSelection="true", EnablePostBackOnRowClick="false", and UseClientSelectColumnOnly="false". I want the click-on-row behavior to be the same as the click-on-checkbox behavior; namely, clicking on the row will toggle that row on and off.
I know this isn't the intended behavior of the grid, but it ought to be possible through some client-side scripting. Can anyone help me figure out such a script?
I know this isn't the intended behavior of the grid, but it ought to be possible through some client-side scripting. Can anyone help me figure out such a script?
5 Answers, 1 is accepted
0
Hi Chris,
In order to achieve the desired functionality you can use the following approach.
1. Subscribe to the OnRowSelected client-side event:
ASPX:
2. Add the following script to your page's scripts:
JavaScript:
Regards,
Venelin
Telerik
In order to achieve the desired functionality you can use the following approach.
1. Subscribe to the OnRowSelected client-side event:
ASPX:
<
ClientEvents
OnRowSelected
=
"onRowSelected"
/>
2. Add the following script to your page's scripts:
JavaScript:
//Flags
var
isSelected =
false
;
var
previousRow =
null
;
//OnRowSelected Event handler
function
onRowSelected(sender, args) {
dataItem = args.get_gridDataItem();
if
(isSelected && dataItem.get_id() == previousRow) {
args.get_gridDataItem().set_selected(
false
);
isSelected =
false
;
}
if
(containsCSSClass(dataItem.get_element(),
'rgSelectedRow'
)) {
isSelected =
true
;
}
previousRow = dataItem.get_id();
}
//Helper function
function
containsCSSClass(element, className) {
return
Sys.UI.DomElement.containsCssClass(element, className);
}
Regards,
Venelin
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0

Chris Kronenthal
Top achievements
Rank 1
answered on 23 May 2014, 05:33 PM
Hi Venelin,
This doesn't seem to do what I'm attempting to do. Let me try explaining it with an example, just to be sure we're on the same page:
Say that I have a grid with five rows. Based on my database, I load it with row #1 and #4 checked, and rows #2, 3, and 5 unchecked. Currently, if I want to select a third row (#2 in this case), I need to click the checkbox on that row - that will result in three rows being selected at once. But if I click on the row anywhere outside of the checkbox, then #1 and #4 will deselect and #2 will be the only selected row. My goal is so that if I click on the row outside of the checkbox, I'll end up with #1, 2, and 4 selected, and #3 and 5 unselected.
Any advice? Am I misunderstanding what your code ought to be doing?
Thanks!
This doesn't seem to do what I'm attempting to do. Let me try explaining it with an example, just to be sure we're on the same page:
Say that I have a grid with five rows. Based on my database, I load it with row #1 and #4 checked, and rows #2, 3, and 5 unchecked. Currently, if I want to select a third row (#2 in this case), I need to click the checkbox on that row - that will result in three rows being selected at once. But if I click on the row anywhere outside of the checkbox, then #1 and #4 will deselect and #2 will be the only selected row. My goal is so that if I click on the row outside of the checkbox, I'll end up with #1, 2, and 4 selected, and #3 and 5 unselected.
Any advice? Am I misunderstanding what your code ought to be doing?
Thanks!
0
Accepted
Hello Chris,
Thanks for the example, now I understand your goal. However let me explain something important. RadGrid follows the default behavior for many systems (at least Windows based). Take for instance the Windows File Explorer. There, you can select multiple rows by holding the Ctrl key. If you click one of the selected items, the rest will deselect. If you like, you can deselect only one item by holding the ctrl key and click it (just as in the file explorer).
Now, if you want to change the default behavior you have to overwrite grid's Telerik.Web.UI.GridSelection.prototype._selectRowInternal method. I have prepared a sample project where this is done. Please examine it and test it well on your side before including it into production code. The change is commented so you can review it.
I hope this helps.
Regards,
Venelin
Telerik
Thanks for the example, now I understand your goal. However let me explain something important. RadGrid follows the default behavior for many systems (at least Windows based). Take for instance the Windows File Explorer. There, you can select multiple rows by holding the Ctrl key. If you click one of the selected items, the rest will deselect. If you like, you can deselect only one item by holding the ctrl key and click it (just as in the file explorer).
Now, if you want to change the default behavior you have to overwrite grid's Telerik.Web.UI.GridSelection.prototype._selectRowInternal method. I have prepared a sample project where this is done. Please examine it and test it well on your side before including it into production code. The change is commented so you can review it.
I hope this helps.
Regards,
Venelin
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0

Chris Kronenthal
Top achievements
Rank 1
answered on 28 May 2014, 06:31 PM
Ah ha! This is exactly the behavior I've been trying for!
I did have to comment out the four lines
because I was getting an error about undefined functions. What is the intent of this section? Skip any unselectable lines?
I did have to comment out the four lines
if
(dataItem && !dataItem.get_selectable())
{
this
._selectRowInternalSetActiveRow(rowEl, e);
return
;
}
because I was getting an error about undefined functions. What is the intent of this section? Skip any unselectable lines?
0
Hi,
"What is the intent of this section? Skip any unselectable lines?"
That's correct, however on my side there are no errors thrown here. I suspect that your version of the controls is old one and there is no .get_selectable() method, is this the case? If so, please comment these lines and double check for JS errors.
Regards,
Venelin
Telerik
"What is the intent of this section? Skip any unselectable lines?"
That's correct, however on my side there are no errors thrown here. I suspect that your version of the controls is old one and there is no .get_selectable() method, is this the case? If so, please comment these lines and double check for JS errors.
Regards,
Venelin
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.