[CLOSED] Combobox display field custom template

1 Attachment(s)

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.

Code:

<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.
Attachment 5828

Thanks.

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.
https://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.
https://examples2.ext.net/#/Form/TriggerField/Overview/

1 Attachment(s)

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.
Attachment 5835

Code:

<%@ 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>

Excellent. Thank you for sharing the solution!

Quote:

Originally Posted by Daniil

Excellent. Thank you for sharing the solution!

You showed me how to... Thanks.