Multiple row select problem on row click

[Paresh Patel]

Hi,

I am using GridClientSelectColumn in my grid.

i am facing problem in which i am selecting multiple row by clicking checkbox generated by GridClientSelectColumn.

and if i Click on any row it deselects other row and just selects only clicked row.  and AllowRowSelect must be set to true for GridClientSelectColumn.

I want that it do not allow selecting row by clicking on it. or any other solution to prevent this.

Thanks,

[SamJ]

Hi,

You can disable grid row selection. And instead of using GridGlientSelectColumn for items selection, add a GridTemplateColumn with CheckBoxes in its ItemTemplate and its HeaderTemplate as it is done here.

You can also review the following threads for more suggestion on how to achieve your goal:
http://www.telerik.com/community/forums/aspnet-ajax/grid/row-selection-question.aspx
http://www.telerik.com/community/code-library/aspnet-ajax/grid/how-to-select-multiple-items-without-holding-the-ctrl-key.aspx


I hope this helps.
SamJ

[Paresh Patel]

Hi,

Thanks for reply,

I tried the code given in http://www.telerik.com/community/code-library/aspnet-ajax/grid/how-to-select-multiple-items-without-holding-the-ctrl-key.aspx

but it was not working. may be due to i already have some javascript to Check/uncheck CheckAll header checkbox.

Can you guide me how can i disable selection/deselection of row on mouse click ?

or some other solution...

Thanks.

[Shinu]

Hello Paresh,

You can prevent row selection/deselection in the grid by canceling the OnRowSelecting and OnRowDeselecting events on the client, if the clicked element is not a checkbox. The following code library submission should help you understand better:
ClientSideSelectColumn - Disallow other selection

Thanks
Shinu.

[Mark DeMichele]

I would like to go on record saying that this workaround is not acceptable.  This behavior should be built in.  What kind of logic is this?  If you go through the trouble of adding a client select checkbox column, that should tell the grid that you DON'T want it to deselect all the checkboxes if you just happen to miss when clicking.  Imagine a grid with 50 rows.  You then go through can check 10 rows.  On the 11th, you miss the checkbox by a pixel and the ten you just clicked get unchecked.  That's crazy.

The reason for me that this warokaround is not acceptable is that I have a site with about 40 pages with different grids.  I don't want to edit each and every page and add all this code to work around the problem.  Also, the fix seems a little odd.  Why are we cancelling the select.  Couldn't the client side API be written to have a flag to just not even attempt to select if they click on something other than a checkbox.

In my case I've already developed a descendant from your grid and have come up with a descendant client side object as well.  I needed to do this to automate yet another unrelated workaround.  In this case, the code that's doing the selecing isn't happening in the RadGridAjax client object, but in the GridSelection client object.  I attempted to make a descendant for that and fix the behavior, but I ran into a problem.  The way the api is currently set up, I can't force the RadGridAjax client object to instantiate my GridSelection descendant.  In the future, you may want to consider putting all $creates inside "overrideable" methods, so advanced users can easily extend your child objects by overriding the method that creates them.  If that was in place, I think I could do what I need without editing so many pages.

[BaiH]

Mark,

I think that this is the intended way the telerik guys build the grid to work. Also there is an option to select multiple rows holding the ctrl key which I prefer.
You probably will agree that there is always a trade-off and one build-in functionality may not suit all user scenarios. The main thing in such case is for some hooks to exists to which you can hook and modify the default behavior. I for example in such case, when not happy with the default behavior or need some custom piece of code in all controls instances usually change the method by directly overriding the javascript classes function through its prototype.

--BH

[Mark DeMichele]

If it is intented, then that's bad.  The checkboxes invite the user to check them (without a ctrl key). If you miss by one pixel, you wind up unchecking all the ones you checked already, which is very frustrating.  That's bad no matter how you look at it.

Also, I too have overridden their javascript scrict methods to change stuff.  However, in this case I can't figure out how to override it becuase it's in the GridSelection object, not the RadGridAjax Object.

Mark

[BaiH]

You can override it with something like this:

if (Telerik.Web.UI.GridSelection && Telerik.Web.UI.GridSelection.prototype._click) {

var originalFunction = Telerik.Web.UI.GridSelection.prototype._click;

Telerik.Web.UI.GridSelection.prototype._click = function(e) {

var el = (e.target) ? e.target : e.srcElement;

var isClientSelectCheckBox = (el.tagName.toLowerCase() == "input" &&

el.type.toLowerCase() == "checkbox" &&

(el.id && el.id.indexOf("SelectCheckBox") != -1));

if (!isClientSelectCheckBox)

return;

originalFunction.call(this, e);

}

}

[Mark DeMichele]

Interesting.  I was trying to override the actual javascript class, but I guess since it's not really a class, I can do something like this.  I had actually implemented another workaround, but I like yours better.   I'll give it a try and see how it works.  Thanks.  This is another way to look at this stuff so I appreciate the advice.

[Sven]

For all those who want this functionality. . . I searched all over Telerik to find sample code . Just excuses but no simple sample code.

The following code will allow the user to select/unselect any row, with or without clicking on the checkbox as well as used the checkbox in the header to select all rows or deselect all rows.  You can even still drag across a collection to select many of them at a time. Now wasn't that simple! :)  Note: I make no claim for it's efficiency ;)

<telerik:RadGrid
AllowMultiRowSelection="true"
ClientSettings-Selecting-AllowRowSelect="true"
ClientSettings-ClientEvents-OnRowDeselecting="MyRowDeselecting"
ClientSettings-ClientEvents-OnRowSelecting="MyRowSelecting"
ClientSettings-ClientEvents-OnRowClick="MyRowClick"
...
>

<telerik:RadCodeBlock ID="radCodeBlock1" runat="server">
     <script type="text/javascript">
     //Handles custom Radgrid behavior
         var DeselectRow = -1;

         function MyRowSelecting(sender, args) {
             if (args._itemIndexHierarchical == DeselectRow) {
                 args.set_cancel(true)
                 DeselectRow = -1;
             }
         }

         function MyRowClick(sender, args) {
             var gridSelectedItems = sender.get_selectedItems();
             var len = gridSelectedItems.length;
             for (var i = 0; i < len; i++) {
                 if (args._itemIndexHierarchical == gridSelectedItems[i]._itemIndexHierarchical) {
                     DeselectRow = args._itemIndexHierarchical;
                 }
             }
         }

         function MyRowDeselecting(sender, args) {
             if (args._domEvent.target.id==""){
                 if (args._itemIndexHierarchical != DeselectRow) {
                     args.set_cancel(true);
                 }
             }
         }
     </script>
     </telerik:RadCodeBlock>

[Sebastian]

Hello David,

Thank you for the post - it can be helpful for other community members who are looking for a similar approach. Alternative solutions are presented in the resources below:

http://www.telerik.com/community/code-library/aspnet-ajax/grid/selecting-deselecting-rows-on-clicking-row-itself-and-without-interfering-selected-items.aspx

http://demos.telerik.com/aspnet-ajax/grid/examples/client/selecting/defaultcs.aspx (see the 'Use only GridClientSelectColumn to select rows (second grid)' configuration option)

I updated your Telerik points for the involvement.

Best regards,
Sebastian
the Telerik team

[kamini]

Hello Sven

This code works perfectly with chrome and firefox but not with IE

In IE8, clicked row is the only selected row.
Multiple row selection works with IE9 but If I scroll down my list and select some of the bottom rows, It won't be selected.

Do you have any solution.? 

Thanks
Kamini

[Eyup]

Hello Kamini,

You can download a working sample web site on the following thread:
http://www.telerik.com/community/forums/aspnet-ajax/grid/multirowselection-and-gridclientselectcolumn.aspx

Hope this helps.

Kind regards,
Eyup
the Telerik team

[kamini]

Hello Eyup

Thank you so much for your reply. I have been searching this for many days and finally I got the exact solution.  

Its working perfectly with firefox, chrome and IE.

Thanks 
Kamini