How to use mouse hover on dropdownlist item

[Matthew]

I success show the full length ddl.item.text(selected choice) in limited length ddl. But I want to use it in ddl items too, what should I do?

Form.aspx

<tr>
   <td>
      <asp:Label ID="lblFolderPath" runat="server" Width="75px" Text="Folder Path: " ></asp:Label>

      <ToolTip1>
         <telerik:RadDropDownList ID="ddlFolderPath" runat="server" Skin="Windows7" 
            Width="650px" Height="23px" AutoPostBack="True" 
            onClientSelectedIndexChanged="loadingAnimation">
            <Items>
               <telerik:DropDownListItem runat="server" DropDownList="ddlFolderPath " Text="" />
            </Items>
         </telerik:RadDropDownList>
      </ToolTip1>
   </td>
</tr>

Form.aspx.vb

Select Case GetMMRCode("CueSheetImportSegmentRoot", CurrentSide, ReturnTable) 'CurrentSide = DEV
   Case 0
      '// Get ddl choices from DB
      ddlFolderPath.Items.Clear()  'Prevent do items.add multiple times

      For Each row As DataRow In ReturnTable.Rows
         ddlFolderPath.Items.Add(New DropDownListItem(CType(row.Item("Opt1"), String), CType(row.Item("Code"), String)))  
     Next
End Select

[Attila Antal]

Hi Matthew,

Can you please elaborate on the problem you are having?

By looking at the code you shared, I see a property that is not part of the Telerik DropDownList. I am referring to the "DropDownList" property. DropDownListItems have Text and Value properties. These are the values that you should be populating.

Try removing the DropDownList property from the DropDownListItem.

<telerik:DropDownListItem runat="server" DropDownList="ddlFolderPath " Text="" />

 

[Matthew]

Hi,  Attila Antal

The <Tooltip1> can only show the full text after we selected ddl item.

 

My case:

It can only show the full text of ddl item when after mouse hover it.

Folder Path:   |  Choosen item  |  <----------[AAAAAAAAAAA]

 

Target:

I want to also show the  full text when we selecting item. What should I do?

Folder Path:   |                |

                        |       A      |

                        |       B      |   <----------[BBBBBBBBBBBB]

                        |       C      |

 

 

[Attila Antal]

Hi Matthew,

The DropDownList items will display what is set for the Text property. If something doesn't show up in you case, verify that you assign a Text to it.

In the markup

<telerik:RadDropDownList ID="RadDropDownList1" runat="server" RenderMode="Lightweight">
    <Items>
        <telerik:DropDownListItem Text="Item 1" Value="Val1" />
        <telerik:DropDownListItem Text="Item 2" Value="Val2" />
        <telerik:DropDownListItem Text="Item 3" Value="Val3" />
        <telerik:DropDownListItem Text="Item 4" Value="Val4" />
    </Items>
</telerik:RadDropDownList>

Creating items In the backend

The same when creating the items in the backend. The first argument is the Text (to be displayed, and the second is the value, if you want to pair the text with a value

RadDropDownList1.Items.Add(New DropDownListItem("Item 1", "Val1"))
RadDropDownList1.Items.Add(New DropDownListItem("Item 2", "Val2"))
RadDropDownList1.Items.Add(New DropDownListItem("Item 3", "Val3"))
RadDropDownList1.Items.Add(New DropDownListItem("Item 4", "Val4"))

Binding to Data

In case you're binding the DropDownList to a set of data, you need to set the DataTextField and DataValueField properties.

Dim dt As DataTable = New DataTable()

dt.Columns.Add("Text", GetType(String))
dt.Columns.Add("Value", GetType(String))

dt.Rows.Add("Item 1", "Val1")
dt.Rows.Add("Item 2", "Val2")
dt.Rows.Add("Item 3", "Val3")
dt.Rows.Add("Item 4", "Val4")

RadDropDownList1.DataTextField = "Text"
RadDropDownList1.DataValueField = "Value"

RadDropDownList1.DataSource = dt
RadDropDownList1.DataBind()

Any approach you choose will result in the following

 

[Matthew]

I can update the selected ddl.item after choosing, I think you misunderstood my problem. Also I don't directly insert the dll.item.text in aspx, becasue I will get them from DB process in aspx.vb.

I use <tooltip1> in aspx and success showing the item.text when mouse hover the selected item.

I would like to know how to tooltip showing item.text when mouse hover the ddl other items. The <tooltip1> only works for the selected.item, what should I do if I want to show the other items(open ddl and mouse hover certain item)  too? 

[Attila Antal]

Hi Matthew,

Thanks for the clarification. I understand that you want to show ToolTips for each items, right?

If that is the case, you just need to set the ToolTip property of the items, like so:

<telerik:RadDropDownList ID="RadDropDownList1" runat="server" RenderMode="Lightweight" ToolTip="ToolTip for the DropDownList">
    <Items>
        <telerik:DropDownListItem Text="Item 1" Value="Val1" ToolTip="ToolTip for Item 1"  />
        <telerik:DropDownListItem Text="Item 2" Value="Val2" ToolTip="ToolTip for Item 2" />
        <telerik:DropDownListItem Text="Item 3" Value="Val3" ToolTip="ToolTip for Item 3" />
        <telerik:DropDownListItem Text="Item 4" Value="Val4" ToolTip="ToolTip for Item 4" />
    </Items>
</telerik:RadDropDownList>

Results

I am not sure what the <ToolTip1> does in your case, but you cannot change the ComboBox rendered structure to wrap all elements inside a <ToolTip> element.

If you want to display Rich-Text, or HTML through a ToolTip, you can use the Telerik WebForms ToolTip component.