This is a migrated thread and some comments may be shown as answers.

Changing row selection behavior

5 Answers 126 Views
Grid
This is a migrated thread and some comments may be shown as answers.
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?

5 Answers, 1 is accepted

Sort by
0
Venelin
Telerik team
answered on 16 May 2014, 04:49 AM
Hi Chris,

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!
0
Accepted
Venelin
Telerik team
answered on 28 May 2014, 07:15 AM
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
 

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

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
Venelin
Telerik team
answered on 02 Jun 2014, 06:09 AM
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
 

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.

 
Tags
Grid
Asked by
Chris Kronenthal
Top achievements
Rank 1
Answers by
Venelin
Telerik team
Chris Kronenthal
Top achievements
Rank 1
Share this question
or