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

Drag-to-Select with left-click only ?

3 Answers 131 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Greg Chung
Top achievements
Rank 1
Greg Chung asked on 26 Jun 2008, 07:25 PM
We have been using a RadGrid "classic" with AllowMultiRowSelection enabled and EnableDragToSelectRows enabled.  On this page, we also display a context menu.  If the user right-clicks while over the grid (to launch the context window), he/she can easily accidentally end up selecting rows in the grid at the same time. To deal with this, we have been using an onMouseDown handler which cancels the mouse down event if it is triggered by a right-click.

<script type="text/javascript"
 
function OnMouseDown(e) 
    //  To protect the context menu, kill right-click drag'n'select 
    //  by stopping the mouse-down event if the right button is 
    //  the one triggering it.  Context menus are launched by the 
    //  mouse-up event.  Hooray. 
    if ( e.button == 2 ) 
    { 
        e.cancelBubble = true
        e.returnValue = false
        return false; 
    } 
</script> 
 

However, with RadGrid "prometheus", this no longer works.  No matter what, the selection drag begins.  This is quite a "drag" -- I want to allow drag-to-select only with a left-button click, so that right-clicks will be exclusively available for displaying my context menu.

Is there some grid setting, or other workaround, by which I can prevent right-click drag-to-select?  I tried to leverage the OnRowContextMenu handler, but that gets called after-the-fact.


:(

3 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 30 Jun 2008, 02:27 PM
Hello Greg,

This behavior is due to the sequence in which  RadGrid events are fired. In order to accomplish the desired result I suggest you hook RadGrid's mousedown event, check which mouse key is pressed and set a flag. Then inside the OnRowSelecting event handler you need to cancel the event if the flag is raised.

I attached a simple web page that demonstrate this approach. Please give it a spin and see if it helps.

Best regards,
Rosen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Greg Chung
Top achievements
Rank 1
answered on 01 Jul 2008, 04:30 PM
Thanks for the suggestion.  As a workaround, it's fine, but it isn't ideal from a cosmetic standpoint.  The drag still starts, and you can still see the shaded drag rectangle appear (briefly).  Preventing the rows from actually being selected as a result of a right-click drag/select works.  However, in the 'classic' RadGrid, it was possible to actually prevent the drag/selection in the first place.  If we could get that same behavior in prometheus, that would be fantastic.

Thanks again


0
Rosen
Telerik team
answered on 04 Jul 2008, 12:48 PM
Hi Greg,

In order to hide the drag rectangle, you can wire the row's mousedown event instead this of RadGrid's html element. Therefore, the code will look similar to this:

<script>   
            var cancelSelection = false;                          
            function rowMouseDown(e)  
            {       
                if (e.button == 2)  
                {     
                    cancelSelection = true;  
                    e.preventDefault()  
                    e.stopPropagation()  
                    return false;  
                }                  
                cancelSelection = false;  
            }  
            function onRowSelecting(sender, args)  
            {         
               args.set_cancel(cancelSelection);    
            }  
            function onRowContextMenu(sender, args)  
            {          
                alert("show menu")      
            }  
            function onRowCreated(sender, args)  
            {  
                $addHandler($get(args.get_id()), "mousedown", rowMouseDown)                  
            }  
        </script> 
        <div> 
            <telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" 
                AllowMultiRowSelection="true">  
                <ClientSettings> 
                    <Selecting AllowRowSelect="true" EnableDragToSelectRows="true" /> 
                    <ClientEvents OnRowSelecting="onRowSelecting" OnRowContextMenu="onRowContextMenu" OnRowCreated="onRowCreated"/>                                          
                </ClientSettings> 
            </telerik:RadGrid> 
        </div> 

Best regards,
Rosen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
Tags
Grid
Asked by
Greg Chung
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Greg Chung
Top achievements
Rank 1
Share this question
or