Ext.Net 4.6 ComboBox Item List Title Template

  1. #1

    Ext.Net 4.6 ComboBox Item List Title Template

    Hello,
    I had previously provided the Multicolumn feature for the ComboBox items when using Ext.Net 1.2. I have provided the title of the items by using the "Title" option.

    I'm currently developing with Ext.Net 4.6 (MVC). I'm building my ComboBox on runtime. I use ItemTpl in the ListConfig for items.

    My problem is that I can't find a "title" feature in which I can get multiple column support fixed on the combobox list. I need your urgent assistance in this matter.

    public Ext.Net.BaseControl PrepareComponent(ReportField reportField)
    {
    	Connection cnn = new Connection();
    
    	var cmd3 = cnn.CreateCommand("SELECT BOUND_COLUMN_WIDTH,DESCRIPTION_COLUMN_WIDTH,EXTRA_COLUMNS_WIDTHS FROM TBLLIBCOMBO(NOLOCK) WHERE COMBO_NAME = @COMBO_NAME");
    	cnn.CreateParameter(cmd3, "@COMBO_NAME", DbType.AnsiString, reportField.COMBO_NAME);
    	var ww = cnn.Select(cmd3).Tables[0];
    
    	var boundWidth = DbUtil.GetInt(ww.Rows[0]["BOUND_COLUMN_WIDTH"]);
    	var descWidth = DbUtil.GetInt(ww.Rows[0]["DESCRIPTION_COLUMN_WIDTH"]);
    	var extraWidth = DbUtil.GetString(ww.Rows[0]["EXTRA_COLUMNS_WIDTHS"]);
    
    	var ExtraColumn = reportField.EXTRA_COLUMNS.Split(',');
    	var ExtraColumnWidth = extraWidth.Split(',');
    
    	Dictionary<string, string> ComboFields = new Dictionary<string, string>();
    
    	ComboFields.Add(reportField.BOUND_COLUMN, boundWidth.ToString());
    	if (reportField.BOUND_COLUMN != reportField.DESCRIPTION_COLUMN)
    	{
    		ComboFields.Add(reportField.DESCRIPTION_COLUMN, descWidth.ToString());
    	}
    
    	for (int i = 0; i < ExtraColumn.Length; i++)
    	{
    		if (reportField.BOUND_COLUMN != ExtraColumn[i] && reportField.DESCRIPTION_COLUMN != ExtraColumn[i] && !string.IsNullOrEmpty(ExtraColumn[i]))
    		{
    			string Width = "0";
    			if (ExtraColumnWidth.Length - 1 >= i)
    				Width = ExtraColumnWidth[i];
    			ComboFields.Add(ExtraColumn[i], Width);
    		}
    	}
    
    	var combo = new Ext.Net.ComboBox
    	{
    		ID = reportField.PARAMETER_NAME,
    		FieldLabel = Dictionary.Translate(reportField.CAPTION),
    		LabelSeparator = " ",
    		LabelWidth = 100,
    		Hidden = reportField.IS_HIDDEN,
    		Disabled = reportField.IS_DISABLED,
    		AnchorHorizontal = "60%",
    		QueryMode = Ext.Net.DataLoadMode.Remote,
    		QueryCaching = false,
    		ForceSelection = true,
    		FireSelectOnLoad = true,
    		TriggerAction = Ext.Net.TriggerAction.All,
    		PageSize = 10,
    		TypeAhead = true,
    		ListConfig = new BoundList()
    		{
    			LoadingText = "Aranıyor...",
    			ItemTpl = new Ext.Net.XTemplate()
    			{
    				Html = DynamicTemplateBuild(ComboFields)
    			}
    		}
    
    	};
    }
    internal static string DynamicTemplateBuild(Dictionary<string, string> Items)
    {
    	StringBuilder Html = new StringBuilder();
    	if (Items.Count > 0)
    	{
    		Html.Append("<tpl for='.'>");
    		Html.Append("<div class='list-item' style='height:35px!important;height:21px;width:100%;'>");
    	}
    	foreach (var item in Items)
    	{
    		string Width = item.Value;
    		string Title = item.Key;
    
    		Html.Append(string.Format(@"
    			<div style='height:35px;float:left;width:{0};overflow:hidden;white-space:nowrap;' title='{{{1}}}'>{{{1}}}</div>",
    			string.IsNullOrEmpty(Width) || Width == "0" ? (100 / Items.Count).ToString() + "%" : Width,
    			Title
    		));
    	}
    
    	if (Items.Count > 0)
    	{
    		Html.Append("</div>");
    		Html.Append("</tpl>");
    
    	}
    
    
    	return Html.ToString();
    }
    Attached Thumbnails Ext.Net ComboBox Example.jpg  
  2. #2
    Hello, @ersensurekler! Welcome to Ext.NET forums!

    Are you perhaps wanting something close to what the item template in this example does?

    - Forms > Combo Box > Two Columns

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Yes, I want to do here as it is https://examples4.ext.net/#/form/combobox/two_columns/ . But I'm using your MVC version, and I didn't get the result. Please see the attached picture.

    internal static string DynamicTemplateBuild(Dictionary<string, string> Items)
            {
                StringBuilder Html = new StringBuilder();
    
                Html.Append(@"
                <tpl for='.'>
                        <tpl if='[xindex] == 1'>
                            <table>
                                <tr>
                                    <th>Şube Kodu</th>
                                    <th>Şube Adı</th>
                                </tr>
                        </tpl>
                        <tr class='x-boundlist-item'>
                            <td>{SUBEKODU}</td>
                            <td>{SUBEADI}</td>
                        </tr>
                        <tpl if='[xcount-xindex]==0'>
                            </table>
                        </tpl>
                    </tpl>
                ");
    
                return Html.ToString();
            }
    Attached Thumbnails Ext.Net ComboBox Example Test.jpg  
    Last edited by ersensurekler; Mar 19, 2019 at 6:37 AM.
  4. #4
    Hello again, ersensurekler!

    You are probably skipping essential details from the sample I pointed you.

    For instance, have you changed your view to use Tpl() instead of ItemTpl()?
    Have you also added ItemSelector in the ListConfig object?

    Hope this helps! If not, please simplify and provide a test case we can run, so we can reproduce your scenario and provide you pinpoint solution on what's missing in your code.

    If in doubt how to simplify the sample the way we can run it, please review our forums guidelines:
    - Tips for creating simplified code samples
    - More Information Required
    - Forum Guidelines
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Thanks, when I paid attention to the points you specified, I was able to solve my problem. I've only one problem left. How do I get the title blocked from moving with the scroll bar?

    My simplified code example is as follows.

    X.ComboBox()
    	.ID("cmbContact")
    	.EmptyText("Telefon seçiniz...")
    	.FieldLabel("Müşteri İletişim Telefonu")
    	.PageSize(10)
    	.TypeAhead(true)
    	.QueryCaching(true)
    	.ForceSelection(true)
    	.TriggerAction(TriggerAction.All)
    	.DisplayField("Telephone")
    	.ValueField("ContactId")
    	.LabelWidth(160)
    	.Width(400)
    	.ListConfig(X.BoundList()
    		.LoadingText("Aranıyor...")
    		.MinWidth(500)
    		.ItemSelector(".x-boundlist-item")
    		.Tpl(X.XTemplate()
    			.Html(@"
    			<tpl for='.'>
    				<tpl if='[xindex] == 1'>
    					<table>
    						<tr>
    							<th>Contact Type</th>
    							<th>Telephone</th>
    						</tr>
    				</tpl>
    				<tr class='x-boundlist-item'>
    					<td>{ContactType}</td>
    					<td>{Telephone}</td>
    				</tr>
    				<tpl if='[xcount-xindex]==0'>
    					</table>
    				</tpl>
    			</tpl>
    			"
    			)
    		)
    	)
    	.QueryMode(DataLoadMode.Local)
    	.DirectEvents(de => {
    		de.BeforeQuery.Url = "GetContact";
    	})
    	//.SelectedItems(new ListItem { Value = Model.ContactId.ToString() })
    	.Store(X.Store()
    		.ID("strContact")
    		.AutoLoad(true)
    		.Model(X.Model()
    			.IDProperty("ContactId")
    			.Fields(
    				new ModelField("ContactId", ModelFieldType.Int) { Mapping = "ContactId" },
    				new ModelField("Telephone", ModelFieldType.String) { Mapping = "Telephone" },
    				new ModelField("ContactType", ModelFieldType.String) { Mapping = "ContactType" }
    			)
    		)
    	)
    public enum EContactType
    {
    	/// <summary>
    	/// Ev Telefonu tipi.
    	/// </summary>
    	[System.Runtime.Serialization.EnumMember(Value = "Ev Telefonu")]
    	HomeTelephone = 1,
    	/// <summary>
    	/// İş Telefonu tipi.
    	/// </summary>
    	[System.Runtime.Serialization.EnumMember(Value = "İş Telefonu")]
    	WorkTelephone = 2,
    	/// <summary>
    	/// Cep Telefonu tipi.
    	/// </summary>
    	[System.Runtime.Serialization.EnumMember(Value = "Cep Telefonu")]
    	MobileTelephone = 3,
    	/// <summary>
    	/// Diğer Telefon tipi.
    	/// </summary>
    	[System.Runtime.Serialization.EnumMember(Value = "Diğer Telefon")]
    	OtherTelephone = 4
    }
    
    public class ContactDTO
    {
    	/// <summary>
    	/// İletişimin tekil kimlik değerini taşır.
    	/// Primary Key alandır.
    	/// </summary>
    	public int ContactId { get; set; }
    	/// <summary>
    	/// Telefon bilgisini taşır.
    	/// </summary>
    	public string Telephone { get; set; }
    	/// <summary>
    	/// İletişimin hangi telefon bilgisini içerdiğini taşır.
    	/// </summary>
    	public EContactType? ContactType { get; set; }
    	/// <summary>
    	/// İletişimin hangi müşteri kimliğine ait olduğunu taşır.
    	/// </summary>
    	public int CustomerId { get; set; }
    	/// <summary>
    	/// İletişimin aktiflik durumunu taşır.
    	/// </summary>
    	public bool ActiveFlg { get; set; }
    }
    public ActionResult GetContact()
    {
    	Store store = X.GetCmp<Store>("strContact");
    	List<ContactDTO> datax = new List<ContactDTO>();
    	datax.Add(new ContactDTO { ContactId = 1, ContactType = EContactType.HomeTelephone, Telephone = "03366554522" });
    	datax.Add(new ContactDTO { ContactId = 2, ContactType = EContactType.MobileTelephone, Telephone = "05323526323" });
    	datax.Add(new ContactDTO { ContactId = 3, ContactType = EContactType.WorkTelephone, Telephone = "04656536232" });
    	datax.Add(new ContactDTO { ContactId = 4, ContactType = EContactType.OtherTelephone, Telephone = "05836236256" });
    	datax.Add(new ContactDTO { ContactId = 5, ContactType = EContactType.MobileTelephone, Telephone = "07865656633" });
    	datax.Add(new ContactDTO { ContactId = 6, ContactType = EContactType.HomeTelephone, Telephone = "08851265666" });
    	datax.Add(new ContactDTO { ContactId = 7, ContactType = EContactType.OtherTelephone, Telephone = "06654963323" });
    	datax.Add(new ContactDTO { ContactId = 8, ContactType = EContactType.WorkTelephone, Telephone = "08785156456" });
    	datax.Add(new ContactDTO { ContactId = 9, ContactType = EContactType.HomeTelephone, Telephone = "05658965256" });
    	datax.Add(new ContactDTO { ContactId = 10, ContactType = EContactType.HomeTelephone, Telephone = "05656654422" });
    
    	store.LoadData(datax);
    	return this.Direct();//this.Store(data, data.Count());
    }
  6. #6
    Hello @ersensurekler!

    Glad to hear you are having progress on the issue!

    As for keeping the title displayed, I believe you could do that better if you used the DropDownField instead. It extends the combo box to allow for using Ext.NET components as the dropdown.

    If you'd stick to the current template approach, to lock the title you would need to make a title-only table (instead of a same table with TH then the TD rows in the items-loop), then ensure the column widths are in sync, then draw the actual items table in a div, set up overflow to show scrollbar, and ensure the size of the title table + items table fit the dropdown. Not going to be a trivial task. As of leads to follow, this stackoverflow question has a nice suggestion to do the fixed table by using TBody and CSS rules: Freeze the top row for an html table only (Fixed Table Header Scrolling)


    If you use the DropDownField to specify the grid panel as dropdown, you'd get all this from the grid. Unfortunately we don't have a MVC example on that as of now, but it should be pretty straightforward to interpret the ASPX version into Razor. See the overview of the component here: Forms > DropDownField > Overview.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Combobox Partial String Search for List Item
    By GolchK in forum 1.x Help
    Replies: 15
    Last Post: Jun 01, 2017, 11:51 PM
  2. Replies: 2
    Last Post: Oct 21, 2015, 3:56 AM
  3. Replies: 1
    Last Post: Jun 06, 2014, 6:09 AM
  4. Replies: 1
    Last Post: Oct 10, 2013, 8:12 PM
  5. [CLOSED] ComboBox Item List not displaying full Width
    By bfolger in forum 1.x Premium Help
    Replies: 6
    Last Post: Aug 24, 2009, 10:12 PM

Tags for this Thread

Posting Permissions