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.

Code:

---

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)
                        }
                }

        };
}

---

Code:

---

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();
}

---

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!

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.

Code:

---

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();
        }

---

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

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.

Code:

---

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" }
                        )
                )
        )

---

Code:

---

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; }
}

---

Code:

---

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());
}

---

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!