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

How to disable drag selection for ListBox?

7 Answers 523 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Joey
Top achievements
Rank 1
Joey asked on 07 Jan 2014, 06:37 AM
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)

7 Answers, 1 is accepted

Sort by
0
Joey
Top achievements
Rank 1
answered on 08 Jan 2014, 01:42 AM
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?
0
Shinu
Top achievements
Rank 2
answered on 08 Jan 2014, 05:14 AM
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.
0
Joey
Top achievements
Rank 1
answered on 09 Jan 2014, 03:11 AM
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?
0
Shinu
Top achievements
Rank 2
answered on 09 Jan 2014, 06:56 AM
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.
0
Joey
Top achievements
Rank 1
answered on 09 Jan 2014, 07:06 AM
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
0
Hristo Valyavicharski
Telerik team
answered on 13 Jan 2014, 04:30 PM
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
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 the blog feed now.
0
Joey
Top achievements
Rank 1
answered on 14 Jan 2014, 09:05 AM
Thanks Hristo, your code works =)
Tags
ListBox
Asked by
Joey
Top achievements
Rank 1
Answers by
Joey
Top achievements
Rank 1
Shinu
Top achievements
Rank 2
Hristo Valyavicharski
Telerik team
Share this question
or