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

Multiple row select problem on row click

13 Answers 258 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Paresh Patel
Top achievements
Rank 1
Paresh Patel asked on 24 Oct 2009, 07:07 AM
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,

13 Answers, 1 is accepted

Sort by
0
SamJ
Top achievements
Rank 1
answered on 24 Oct 2009, 07:24 AM
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


0
Paresh Patel
Top achievements
Rank 1
answered on 26 Oct 2009, 04:08 AM
Hi,
Thanks for reply,

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.
0
Shinu
Top achievements
Rank 1
answered on 26 Oct 2009, 04:56 AM
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.
0
Mark DeMichele
Top achievements
Rank 1
answered on 11 Nov 2009, 02:31 PM
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.
0
BaiH
Top achievements
Rank 1
answered on 16 Nov 2009, 11:09 AM
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
0
Mark DeMichele
Top achievements
Rank 1
answered on 16 Nov 2009, 01:22 PM
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
0
BaiH
Top achievements
Rank 1
answered on 18 Nov 2009, 07:43 AM
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); 
                } 
            } 

0
Mark DeMichele
Top achievements
Rank 1
answered on 18 Nov 2009, 12:45 PM
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.
0
Sven
Top achievements
Rank 1
answered on 24 Feb 2011, 11:51 PM
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>

0
Sebastian
Telerik team
answered on 25 Feb 2011, 10:35 AM
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
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
kamini
Top achievements
Rank 1
answered on 29 Apr 2013, 10:52 AM
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
0
Eyup
Telerik team
answered on 02 May 2013, 06:44 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
kamini
Top achievements
Rank 1
answered on 02 May 2013, 08:24 AM
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
Tags
Grid
Asked by
Paresh Patel
Top achievements
Rank 1
Answers by
SamJ
Top achievements
Rank 1
Paresh Patel
Top achievements
Rank 1
Shinu
Top achievements
Rank 1
Mark DeMichele
Top achievements
Rank 1
BaiH
Top achievements
Rank 1
Sven
Top achievements
Rank 1
Sebastian
Telerik team
kamini
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or