Drag-to-Select with left-click only ?

[Greg Chung]

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.


:(

[Rosen]

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

[Greg Chung]

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

[Rosen]

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