[CLOSED] Highlighting an item in MultiSelect

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Highlighting an item in MultiSelect

    Hi,

    Please suggest how to achieve a similar to GridPanel look and feel with MultiSelect control when selecting an item or moving a mouse over it. Is it also possible to wire it up to the currently selected theme?
    Please advise if you need more info.
    Last edited by Baidaly; Feb 03, 2013 at 1:06 AM. Reason: [CLOSED]
  2. #2
    Hi Vadym,

    Well, I think applying custom CSS styles (similar to GridPanel's one) should do the job.

    And yes, it is possible to apply a separate CSS rules for each theme.

    I can't suggest some short way to achieve it, but it should not be too difficult.
  3. #3
    Is there any specific property or custom config dealing with item highlighting subclassing?
  4. #4
    I don't see any in MultiSelect. I would set up its Cls property.
  5. #5
    Quote Originally Posted by Daniil View Post
    I don't see any in MultiSelect. I would set up its Cls property.
    Could you give me a hint what's the useful classes to look at in GridPanel for row highlighting?
  6. #6
    "x-grid3-row-selected" for selection and "x-grid3-row-over" for mouse over.
  7. #7
    I've tried setting ItemCls class mimicking the GridPanel x-grid3-row-selected class as below, but that didn't have any effect:

    <ext:MultiSelect ID="MultiSelect1" runat="server" MultiSelect="false"
               Cls="multiselect-noborder" DataIndex="Id" DisplayField="Desc" StoreID="Store1" ItemCls="my-multiselect"
               KeepSelectionOnClick="WithCtrlKey">
    </ext:MultiSelect>
    
    .my-multiselect .ux-mselect-item .ux-mselect-selected
    {
        background-color: #dfe8f6 !important;
    	background-image: none;
    	border-color:#a3bae9;
    }
    .multiselect-noborder
    {
        border-width: 0px;
    }
  8. #8
    Hello!

    Try the following one:

    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <!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 id="Head1" runat="server">
        <title></title>
        <style>
            .multiselect-noborder .ux-mselect .ux-mselect-selected
            {
                background-color: #00F !important;
                background-image: none;
                border-color:#a3bae9;
            }
            .multiselect-noborder
            {
                border-width: 0px;
            }
        </style>
    </head>
    <body>
        <ext:ResourceManager runat="server" SourceFormatting="True" ScriptMode="Debug" />
        <ext:MultiSelect 
            runat="server" 
            Width="300" 
            Cls="multiselect-noborder"
            Height="250">
            <Items>
                <ext:ListItem Text="Item 1" Value="1" />
                <ext:ListItem Text="Item 2" Value="2" />
                <ext:ListItem Text="Item 3" Value="3" />
                <ext:ListItem Text="Item 4" Value="4" />
                <ext:ListItem Text="Item 5" Value="5" />
            </Items>
        </ext:MultiSelect>    
    </body>
    </html>
    Last edited by Baidaly; Feb 01, 2013 at 4:05 AM.
  9. #9
    Thanks Daulet, that worked for item selection stylizing! Do I need to handle the mouse over event explicitly to make use of "x-grid3-row-over" class?
  10. #10
    I suggest the following solution.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!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>
    
        <style type="text/css">
            .my-multiselect .ux-mselect-selected {
                background-color: green !important;
            }
    
            .my-multiselect .ux-mselect-over {
                background-color: yellow;
            }
        </style>
    
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    
        <script type="text/javascript">
            var onAfterRender = function (multiSelect) {
                var view = multiSelect.view;
    
                view.overClass = "ux-mselect-over";
                view.mon(view.getTemplateTarget(), {
                    mouseover: view.onMouseOver,
                    mouseout: view.onMouseOut,
                    scope: view
                });
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:MultiSelect
            runat="server"
            Width="300"
            Cls="my-multiselect"
            Height="250">
            <Items>
                <ext:ListItem Text="Item 1" Value="1" />
                <ext:ListItem Text="Item 2" Value="2" />
                <ext:ListItem Text="Item 3" Value="3" />
                <ext:ListItem Text="Item 4" Value="4" />
                <ext:ListItem Text="Item 5" Value="5" />
            </Items>
            <Listeners>
                <AfterRender Fn="onAfterRender" />
            </Listeners>
        </ext:MultiSelect>
    </body>
    </html>
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 0
    Last Post: Oct 12, 2012, 10:45 AM
  2. Replies: 4
    Last Post: May 09, 2012, 9:24 PM
  3. Replies: 0
    Last Post: Mar 09, 2010, 7:28 AM
  4. Replies: 0
    Last Post: Apr 15, 2009, 7:49 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