How to disable drag selection for ListBox?

[Joey]

Based on the example in http://www.telerik.com/community/forums/aspnet-ajax/listbox/simple-multiselect.aspx
it is possible to allow selection of multiple items in the listbox by clicking without having to press any modifier key

However, while testing this implementation on a page with 1 RadAjaxManager with multiple listboxes with multiple select, we seem to have found a bug with the selection of items when the user drags within the listbox and then move to another listbox (both with multiple select). Selection of multiple items by clicking on each item in each listbox works fine, but sometimes (rarely, but it does happen), dragging the mouse while clicking on an item puts the mouse in a permanent "drag mode" for that particular listbox, whenever the mouse moves back into the radlistbox, it auto selects/deselects items even when it is not pressed, it's as if the mouse is always dragging within the listbox.

1) Has anyone experienced this behaviour before?
2) In order to find an easy solution for this, I'll like to ask if there is a way to disable drag selection within an RadListBox? (meaning to allow the user to select multiple items by clicking only, but not by click+dragging the mouse inside the listbox)

[Joey]

Any idea? anyone? Shinu? Princy?
Is there an "EnableDragToSelectItems" property for RadListBox we can use to disable drag selection? (similar to http://www.telerik.com/help/aspnet-ajax/p_telerik_web_ui_gridselecting_enabledragtoselectrows.html)

Or is there any client side javascript we can use to disable drag selection of multiple items within the listbox?

[Shinu]

Hi Joey,

Please try to use the OnClientDragging event of RadListBox and cancel the dragging if more than one RadListBoxItem is selected. Please have a look into the following code snippet which works fine at my end.

JavaScript:

<script type="text/javascript">
    function OnClientDragging1(sender, args) {
        if (args.get_sourceItems().length > 1) {
            args.set_cancel(true);
        }
    }
</script>

Thanks,
Shinu.

[Joey]

Thanks Shinu, I'm afraid I can't get it to work.
Is the drag selection within listbox part of window's native behaviour and can't be changed?

[Shinu]

Hi Joey,

Here what I am trying to achieve is that if multiple Items are selected then it will cancel the Dragging of RadListBox on ClientDragging event. Please have a look into the sample code snippet which works fine at my end.

ASPX:

<telerik:RadListBox ID="RadListBox1" runat="server" SelectionMode="Multiple" AllowTransfer="true"
    AutoPostBackOnTransfer="true" AllowReorder="true" AutoPostBackOnReorder="true"
    EnableDragAndDrop="true" Skin="Office2010Blue" OnDropped="RadListBox1_Dropped"
    OnClientDragging="OnClientDragging1">
    <Items>
        <telerik:RadListBoxItem runat="server" Text="RadListBoxItem1" />
        <telerik:RadListBoxItem runat="server" Text="RadListBoxItem2" />
        <telerik:RadListBoxItem runat="server" Text="RadListBoxItem3" />
        <telerik:RadListBoxItem runat="server" Text="RadListBoxItem4" />
        <telerik:RadListBoxItem runat="server" Text="RadListBoxItem5" />
    </Items>
</telerik:RadListBox>
<telerik:RadTextBox ID="RadTextBox1" runat="server" TextMode="MultiLine" Rows="10">
</telerik:RadTextBox>

C#:

protected void RadListBox1_Dropped(object sender, Telerik.Web.UI.RadListBoxDroppedEventArgs e)
{
    if (RadTextBox1.ID == e.HtmlElementID)
    {
        foreach (RadListBoxItem item in e.SourceDragItems)
        {
            RadTextBox1.Text += item.Text + ", \n";
        }

        if (RadTextBox1.Text.Length > 0)
            RadTextBox1.Text = RadTextBox1.Text.TrimEnd(new char[] { ',', ' ', '\n' });
    }
}

JavaScript:

<script type="text/javascript">
    Sys.Application.add_load(function () {
        var listBox = $find("RadListBox1");
        var $ = $telerik.$;

        $(".rlbItem", listBox._getGroupElement())
               .click(function (event) {
                   event.stopImmediatePropagation();
                   event.ctrlKey = true;
                   listBox._onClick(event);
               });
    });
    function OnClientDragging1(sender, args) {
        if (args.get_sourceItems().length > 1) {
            args.set_cancel(true);
        }
    }
</script>

Please provide your code if it doesn't help.
Thanks,
Shinu.

[Joey]

Hi Shinu,

  Thanks for taking the time to provide a solution. However I'm not referring to dragging and dropping of items, what the original question is referring to is the "drag selection" of items in a listbox. The items are not being dragged per se, they are being "selected by dragging", for example, moving mouse to an item in the listbox, then pressing the left click down and then dragging the mouse up or down, will result in selection of multiple items. The items are not being dragged around, rather, the mouse cursor is being dragged to select multiple items, just like the drag selection of text in a text editor (dragging the mouse cursor over the text to be selected)

Thanks

[Hristo Valyavicharski]

Hi Joey,

Can you try with this code:

<telerik:RadListBox runat="server" ID="RadListBox1" SelectionMode="Multiple">
    <Items>
        <telerik:RadListBoxItem runat="server" Text="RadListBoxItem1" />
        <telerik:RadListBoxItem runat="server" Text="RadListBoxItem2" />
        <telerik:RadListBoxItem runat="server" Text="RadListBoxItem3" />
        <telerik:RadListBoxItem runat="server" Text="RadListBoxItem4" />
        <telerik:RadListBoxItem runat="server" Text="RadListBoxItem5" />
        <telerik:RadListBoxItem runat="server" Text="RadListBoxItem6" />
        <telerik:RadListBoxItem runat="server" Text="RadListBoxItem7" />
        <telerik:RadListBoxItem runat="server" Text="RadListBoxItem8" />
    </Items>
</telerik:RadListBox>
<script>
    var original = Telerik.Web.UI.RadListBox.prototype._onClick;
    Telerik.Web.UI.RadListBox.prototype._onClick = function(e) {

        e.ctrlKey = true;

        original.call(this, e);
    }
</script>

Regards,
Hristo Valyavicharski
Telerik

[Joey]

Thanks Hristo, your code works =)