Strange Occurrence When Double-Clicking in RadListBox

8 posts, 0 answers
  1. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 11 Dec 2011 Link to this post

    I've successfully implemented a double-click mechanism in the RadListBox, initially with this code:

        protected void radListBoxStopes_ItemCreated(object source, RadListBoxItemEventArgs e)<br>    {<br>      string updatePanelID = this.Parent.Parent.FindControl("UpdatePanel1").UniqueID;<br>      string parameters = e.Item.Index.ToString();<br>      e.Item.Attributes.Add("ondblclick", "__doPostBack('" + updatePanelID + "', " + Tools.EncloseInSingleQuotes(parameters) + ");");<br>    }<br>

    About the only thing to point out about that code is that I'm passing the parent UpdatePanel ID so that a partial postback, rather than a full postback, occurs.

    Everything seems to work fine except for one thing.  I've prepared a video for you to demonstrate the problem: http://mwtech.com/downloads/public/DemoForTelerikSupport.zip

    In this video I perform a few single-clicks, which work fine.  But notice when I double-click (3 times in the video): All of the text in the listbox and some text up above is temporarily selected.  You see this in the form of a blue flash.  It's very irritating!

    Why is this occurring and how can I prevent it?

    Robert

    P.S. Is it possible that what I'm experiencing is similar to this?  If so, then what's the name of the property you added to disable it?
  2. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 12 Dec 2011 Link to this post

    Hello Robert,

    I wasn't able to reproduce your problem. 
    I've created a sample page with the same functionality and everything seems to work accordingly. Please try the approach demonstrated in the page and tell me if the problem still occurs.

    Kind regards,
    Bozhidar
    the Telerik team
    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 their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 12 Dec 2011 Link to this post

    Bozhidar,

    Where is the sample page that you referred to?

    Robert
  5. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 12 Dec 2011 Link to this post

    Bozhidar,

    Further to my initial posting in this thread, here is another video I've prepared for you: http://mwtech.com/downloads/public/RadListBox_Video2.zip

    I *think* this connects with the strange & unexpected selection of text that's occurring when I double-click on any RadListBox item.

    Is there a way I could disable the selection of text such as what you're seeing in the video?  If I can do that I expect my other problem will go away.

    Robert
  6. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 12 Dec 2011 Link to this post

    Bozhidar,

    To help you see the problem for yourself I've created a sample project for you: http://mwtech.com/downloads/public/RadListBox_DoubleClick_SelectText_Problem.zip

    Please note that the processing activities on the server are nowhere near as complex as what I'm doing in my actual project (some calculations and displaying a RadWindow) but at least you can an idea.

    In this sample project, please notice that after a double-click some text in a given ListBoxItem is frequently selected, which looks terrible.

    So my question is this: How do eliminate all such text selection in a RadListBox scenario such as I've shown you?

    Robert
  7. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 13 Dec 2011 Link to this post

    Hi Robert,

    I apologize for not attaching the file I'd prepared for you. 
    However I see from the project you've sent that you found my approach in an another forum post. 
    Also I saw that you are using templates and Labels in your listbox. Labels by default enable selection, so that's the source of your problem. To disable the highlighting, you can use the approach demonstrated here.
    Add the shown CSS rules to your classes .muckListPrimary and .muckListSecondary.
    Does this solution work for you?

    Best wishes,
    Bozhidar
    the Telerik team
    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 their blog feed now
  8. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 13 Dec 2011 Link to this post

    Bozhidar,

    As per your link, I tried adding the following to the pair of CSS Classes that affect the labels in the RadListBoxItem:

      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -o-user-select: none;
      user-select: none;

    They had absolutely no effect and the problem persisted.  Also, this change did not prevent the text of the listbox items from being selected.

    I kept on experimenting however.  Comment #14 proved to be the solution for me!  I ended up adding [onselectstart="return false;"] to the RadListBox definition as follows:

              <telerik:RadListBox ID="radListBoxStopes" runat="server" Width="100%" Height="100%" OnClientSelectedIndexChanged="rlbClicked" OnClientItemDoubleClicked="rlbDoubleClicked" onselectstart="return false;">
                <ItemTemplate>
                  <asp:Panel runat="server">
                    <asp:Label ID="labelStope" runat="server" Text='<%# Eval("Description") %>' CssClass="muckListPrimary" /><br />
                    <asp:Label ID="labelUnits" runat="server" Text='<%# Eval("Units", "{0:0 units}") %>' CssClass="muckListSecondary" />
                    <asp:HiddenField ID="hidFieldMaterial" runat="server" Value='<%# Eval("Material").ToString() %>' />
                  </asp:Panel>
                </ItemTemplate>
              </telerik:RadListBox>

    This immediately cleared up both the selection of text manually and the inadvertent selection of text that was occurring when the user double-clicked on a listbox item.

    Note: In my case my client only uses Internet Explorer (company policy) so I don't know if this solution will work for other browsers.

    Suggestion: Perhaps a future release of your control should include a simple property called something like "DisableTextSelection" ?

    Thank you for your help!!!

    Robert
  9. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 14 Dec 2011 Link to this post

    Hello Robert,

    I apologize for the incomplete answer. 
    I didn't test my solution on IE, and it fails there, as well as on Opera. In all the other browsers it works fine. Your solution works on IE and Opera, but fails on the other browsers. So to make a universal solution for all browsers, you should combine the two approaches, as shown here.  

    Best wishes,
    Bozhidar
    the Telerik team
    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 their blog feed now
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017