[CLOSED] Combobox display field custom template

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

    [CLOSED] Combobox display field custom template

    Hello!

    I am using custom item templates to apply formatting to combobox items. It is good when combobox list is opened for selection. I don't know how to apply the same view for the selected value of the combobox after the selection list is closed / or while it is open.

                                        <ext:ComboBox runat="server" ID="MyCombo" FieldLabel="MyLabel" DisplayField="DF" ValueField ="VF" QueryMode="Local" Editable="false" AllowBlank="false" StoreID="MyStore">
                                            <ListConfig>
                                                <ItemTpl ID="ItemTpl3" runat="server">
                                                    <Html>                                                                    
                                                        <div>
                                                            <span style="font-size:10px; padding-left:10px; border:1px solid black; background-color:{ColorCode}; overflow:hidden;">&nbsp</span>&nbsp{DF}
                                                        </div>
                                                    </Html>   
                                                </ItemTpl>
                                            </ListConfig>                                  
                                        </ext:ComboBox>
    Please see image below.
    Click image for larger version. 

Name:	comboview.png 
Views:	103 
Size:	6.4 KB 
ID:	5828

    Thanks.
    Last edited by Daniil; Mar 15, 2013 at 3:36 PM. Reason: [CLOSED]
  2. #2
    Hi @bayoglu,

    An input field is just an HTML input element. It might be impossible to get the same view.

    But something is possible. For example, applying an icon.
    http://examples2.ext.net/#/Form/ComboBox/IconCombo/

    Also I think it should be easy to apply a select color for background of the input. It will look as here in the second field.
    http://examples2.ext.net/#/Form/TriggerField/Overview/
  3. #3
    Hello @Daniil.

    Thanks for direction! I could do it using setIconCls with no icon url but my style. Thank you very much.

    Below is a sample code and screenshot. Please mark as closed.
    Click image for larger version. 

Name:	comboimage.png 
Views:	54 
Size:	6.5 KB 
ID:	5835

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            Store store = this.ComboBox1.GetStore();        
            store.DataSource = new object[]
            {
                new object[] { "item1-style", "Item 1"},
                new object[] { "item2-style", "Item 2"},
                new object[] { "item3-style", "Item 3"},
            };        
            store.DataBind();
            System.Web.UI.HtmlControls.HtmlGenericControl mystyles;
            mystyles = new System.Web.UI.HtmlControls.HtmlGenericControl();
            mystyles.TagName = "style";
            mystyles.Attributes.Add("type", "text/css");        
            string Item1Color = "#FF0000";
            string Item2Color = "#00FF00";
            string Item3Color = "#0000FF";
            string ItemStyles = "";
            ItemStyles += ".item1-style {background-repeat   : no-repeat !important;background-position : 3px 50% !important;padding-left: 10px !important;  font-size:10px;padding-left:10px; border:1px solid black;background-color: " + Item1Color + ";overflow:hidden;}";
            ItemStyles += ".item2-style {background-repeat   : no-repeat !important;background-position : 3px 50% !important;padding-left: 10px !important;  font-size:10px;padding-left:10px; border:1px solid black;background-color: " + Item2Color + ";overflow:hidden;}";
            ItemStyles += ".item3-style {background-repeat   : no-repeat !important;background-position : 3px 50% !important;padding-left: 10px !important;  font-size:10px;padding-left:10px; border:1px solid black;background-color: " + Item3Color + ";overflow:hidden;}";
            mystyles.InnerText = ItemStyles;
            Page.Header.Controls.Add(mystyles);
            ComboBox1.Value = "Item 1";
            ComboBox1.IconCls = "item1-style";                
        }
    </script>
    
    <html>
    <head id="Head1" runat="server">
        <title>IconCombo - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <h1>Render an Icon in ComboBox data items</h1>
    
            <ext:ComboBox 
                ID="ComboBox1" 
                runat="server"
                Width="250"
                Editable="false"
                DisplayField="name"
                ValueField="name"
                QueryMode="Local"
                TriggerAction="All"
                EmptyText="Select a country...">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model ID="Model1" runat="server" IDProperty="name">
                                <Fields>
                                    <ext:ModelField Name="itemCls" />
                                    <ext:ModelField Name="name" />
                                </Fields>
                            </ext:Model>
                        </Model>            
                    </ext:Store>
                </Store>
                <Listeners>
                    <Change Handler="if (this.valueModels.length > 0) { this.setIconCls(this.store.getById(newValue).data.itemCls); }" />
                </Listeners>  
            </ext:ComboBox>    
        </form>
    </body>
    </html>
  4. #4
    Excellent. Thank you for sharing the solution!
  5. #5
    Quote Originally Posted by Daniil View Post
    Excellent. Thank you for sharing the solution!
    You showed me how to... Thanks.

Similar Threads

  1. Problem ComboBox Display/Value Field
    By DanielU in forum 1.x Help
    Replies: 1
    Last Post: Mar 04, 2013, 10:56 AM
  2. [CLOSED] Combobox unique display field issue
    By majestic in forum 1.x Premium Help
    Replies: 1
    Last Post: Mar 03, 2012, 3:32 PM
  3. [CLOSED] Using custom template in a ComboBox
    By mattwoberts in forum 1.x Premium Help
    Replies: 1
    Last Post: Apr 28, 2011, 3:06 PM
  4. Replies: 1
    Last Post: Aug 17, 2010, 2:18 PM
  5. Replies: 1
    Last Post: Apr 30, 2010, 3:11 PM

Posting Permissions