[CLOSED] MultiSelect with item tooltips

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] MultiSelect with item tooltips

    Is it possible for the items in a MultiSelect to have tooltips based on a field in the store?

    I basically have a list of items that are available for selection, but each item has a description that could potentially be multiple lines, and i need to let the user view those descriptions somehow.
    Last edited by Daniil; May 19, 2011 at 10:42 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Here you are.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.MultiSelect1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "1", "item1" },
                    new object[] { "2", "item2" },
                    new object[] { "3", "item3" }
                };
                store.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:MultiSelect ID="MultiSelect1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="value" />
                                <ext:RecordField Name="text" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ToolTips>
                <ext:ToolTip 
                    runat="server" 
                    Target="MultiSelect1" 
                    Delegate=".ux-mselect-item">
                    <Listeners>
                        <Show Handler="var item = Ext.get(this.triggerElement),
                                           text = item.dom.innerHTML,
                                           store = Ext.getCmp(this.initialConfig.target).store,
                                           record = store.getAt(store.find('text', text)),
                                           value = record.data.value;
                                       this.body.dom.innerHTML = value + ' : ' + text;" />
                    </Listeners>
                </ext:ToolTip>
            </ToolTips>
        </ext:MultiSelect>
        </form>
    </body>
    </html>
  3. #3
    I can't seem to get it to work. Here's my test code.

    
    <script runat="server">
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not IsPostBack And Not Ext.Net.X.IsAjaxRequest Then
                Dim data As New List(Of Object)
                data.Add(New With {.ID = 1, .DisplayName = "Test 1", .Text = "This is some text"})
                data.Add(New With {.ID = 2, .DisplayName = "Test 2", .Text = "This is some text"})
                data.Add(New With {.ID = 3, .DisplayName = "Test 3", .Text = "This is some text"})
                TheStore.DataSource = data
                TheStore.DataBind()
            End If
        End Sub
        
    </script>
    
            <ext:MultiSelect ID="Stuff" runat="server" ValueField="ID" DisplayField="DisplayName">
                <Store>
                    <ext:Store ID="TheStore" runat="server">
                        <Reader>
                            <ext:JsonReader IDProperty="ID">
                                <Fields>
                                    <ext:RecordField Name="ID" Type="Int" />
                                    <ext:RecordField Name="DisplayName" />
                                    <ext:RecordField Name="Text" />
                                </Fields>
                            </ext:JsonReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ToolTips>
                    <ext:ToolTip runat="server" Target="Stuff" Delegate=".ux-mselect-item">
                        <Listeners>
                            <Show Handler="var item = Ext.get(this.triggerElement),
                                               text = item.dom.innerHTML,
                                               store = Ext.getCmp(this.initialConfig.target).store,
                                               record = store.getAt(store.find('Text', text)),
                                               value = record.data.value;
                                           this.body.dom.innerHTML = value;" />
                        </Listeners>
                    </ext:ToolTip>
                </ToolTips>
            </ext:MultiSelect>
  4. #4
    You should use DisplayField RecordField's name here:
    store.getAt(store.find('Text', text))
    So it should look:
    store.getAt(store.find('DisplayName', text))
    Quote Originally Posted by jmcantrell View Post
    I can't seem to get it to work. Here's my test code.
    In the future please provide more details, for example, info about errors, exceptions, etc. In other words - any info which helps us to determine a problem.
    Last edited by Daniil; May 19, 2011 at 9:48 PM.
  5. #5
    Apologies. There's no tooltip. Nothing appears when I hover over an item. There's also no error. I would have given any details on it had there been one.

    I have it set to "Text" because that's the field from the store I want to display. "DisplayName" is what I want to show up as the item in the select.
  6. #6
    I have tested your code with
    store.getAt(store.find('DisplayName', text))
    and it appears to be working fine.

    I have it set to "Text" because that's the field from the store I want to display. "DisplayName" is what I want to show up as the item in the select.
    The task is to retrieve a record. The only one field we can retrieve from html is DisplayField one. Then you get a record you can use all its fields.
  7. #7
    I think I understand what you're saying.

    However, I've changed the handler to this and I still can't get anything to show:

                            <Show Handler="var item = Ext.get(this.triggerElement),
                                               text = item.dom.innerHTML,
                                               store = Ext.getCmp(this.initialConfig.target).store,
                                               record = store.getAt(store.find('DisplayName', text)),
                                               value = record.data.Text;
                                           this.body.dom.innerHTML = value;" />
  8. #8
    Try to set ShowDelay="0" for the tooltip. Does it help?
  9. #9
    Okay, this is very strange. I put the exact same code into a bare web form, and it worked. The only difference is that my original test was done with a empty content page that was using a master page. To be sure, i took everything (literally everything) out of the master page and it still didn't work.

    So, what I'm left with is that it works if I have it in a completely bare web form, but if I put it into a blank content page of a blank master page, I lose the tooltips. Any ideas on that one?
  10. #10
    Don't forget that useing INamingContainer changes a client id.

    So, please set up
    Target="#{MultiSelect1}"
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 4
    Last Post: May 09, 2012, 9:24 PM
  2. Get MultiSelect Item , ContextMenu ?
    By Mohammad in forum 1.x Help
    Replies: 0
    Last Post: Dec 10, 2011, 6:44 AM
  3. [CLOSED] multiselect add item in codebehind
    By albayrak in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 16, 2011, 10:11 AM
  4. Replies: 0
    Last Post: Mar 09, 2010, 7:28 AM
  5. [CLOSED] MultiSelect Item CSS
    By Tbaseflug in forum 1.x Help
    Replies: 3
    Last Post: Apr 01, 2009, 7:42 AM

Tags for this Thread

Posting Permissions