Strange Occurrence When Double-Clicking in RadListBox

[Robert]

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?

[Bozhidar]

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

[Robert]

Bozhidar,

Where is the sample page that you referred to?

Robert

[Robert]

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

[Robert]

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

[Bozhidar]

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

[Robert]

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

[Bozhidar]

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