EXT.NET v3.0 BETA RELEASED!
Now with Tablet Support!
Ext.NET v3.0 Beta is here with lots of new cool features and now with tablet support! Check Examples Explorer now to see it in action or download and test it yourself for free!
Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: [CLOSED] MultiSelect with item tooltips

  1. #1
    Member
    Join Date
    Apr 2010
    Posts
    503

    [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 11:42 PM. Reason: [CLOSED]

  2. #2
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    27,803
    Hi,

    Here you are.

    Example
    Code:
    <%@ 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>
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  3. #3
    Member
    Join Date
    Apr 2010
    Posts
    503
    I can't seem to get it to work. Here's my test code.

    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
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    27,803
    You should use DisplayField RecordField's name here:
    Code:
    store.getAt(store.find('Text', text))
    So it should look:
    Code:
    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 10:48 PM.
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  5. #5
    Member
    Join Date
    Apr 2010
    Posts
    503
    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
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    27,803
    I have tested your code with
    Code:
    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.
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  7. #7
    Member
    Join Date
    Apr 2010
    Posts
    503
    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:

    Code:
                            <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
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    27,803
    Try to set ShowDelay="0" for the tooltip. Does it help?
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  9. #9
    Member
    Join Date
    Apr 2010
    Posts
    503
    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
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    27,803
    Don't forget that useing INamingContainer changes a client id.

    So, please set up
    Code:
    Target="#{MultiSelect1}"
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

Similar Threads

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

Tags for this Thread

Posting Permissions