How to disable drag selection for ListBox?

8 posts, 0 answers
  1. Joey
    Joey avatar
    27 posts
    Member since:
    Jun 2013

    Posted 07 Jan 2014 Link to this post

    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)

  2. Joey
    Joey avatar
    27 posts
    Member since:
    Jun 2013

    Posted 07 Jan 2014 Link to this post

    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?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 07 Jan 2014 Link to this post

    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.
  5. Joey
    Joey avatar
    27 posts
    Member since:
    Jun 2013

    Posted 08 Jan 2014 Link to this post

    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?
  6. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 09 Jan 2014 Link to this post

    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.
  7. Joey
    Joey avatar
    27 posts
    Member since:
    Jun 2013

    Posted 09 Jan 2014 Link to this post

    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
  8. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 13 Jan 2014 Link to this post

    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.
  9. Joey
    Joey avatar
    27 posts
    Member since:
    Jun 2013

    Posted 14 Jan 2014 Link to this post

    Thanks Hristo, your code works =)
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017