Multi-column ComboBox at Runtime

[Andrew]

I am looking to create a mutli-column ComboBox like the Real Estate Agency ComboBox found in this example: http://demos.telerik.com/aspnet-ajax/Combobox/Examples/Default/DefaultCS.aspx, but I need to create the ComboBox at runtime. The data also needs to be bound to the ComboBox when the ItemsRequested Event is called. I've tried the following:

protected void Lookup_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)
{
            combo.ItemTemplate = new LookupComboItemTemplate(table);
            combo.HeaderTemplate = new LookupComboTemplate(table);

            combo.DataSource = table;
            combo.DataBind();

            foreach (RadComboBoxItem item in combo.Items)
            {
                item.DataBind();
            }
}

But no matter what I do with the templates the columns never show up and the row values are always squeezed together. For example three column row values that should read something like "Val1    Val2    Val3" under three columns looks like "Val1Val2Val3".

Is it possible to get an actual working sample where to creating a ComboBox like the one in the example I linked at runtime?

[Serrin]

Hi Andrew,

Hmm, without seeing what you're doing in LookupComboItemTemplate and LookupComboTemplate (and what is represented by table), it's hard to say where the problem is coming from.  One thing I notice in the demo is that there is a property of the RadComboBox called DropDownWidth set to the headertemplate total width, maybe that is missing from the combo declaration?

 

Otherwise, can you post the code from those two classes?  We're more than happy to help debug whatever the problem might be.  :)

-Serrin

[Andrew]

Well, I don't know how much these will help you as I basically pulled them from the examples on the site, continually modifying them in order to get anything to show up so I could move from there. Some of it might not be the typical way of doing things, but I tried a number of things in order to get it working.

    public class LookupComboItemTemplate: ITemplate
    {
        DataTable table;

        public LookupComboItemTemplate(DataTable table)
        {
            this.table = table;
        }

        public void InstantiateIn(Control container)
        {
            Label label;

            for (int i = 0; i < this.table.Columns.Count; i++)
            {
                label = new Label();
                label.ID = this.table.Columns[i].ColumnName;
                label.Text = "<NOVALUE>";
                label.DataBinding += new EventHandler(label_DataBinding);
                container.Controls.Add(label);
            }
        }

        private void label_DataBinding(object sender, EventArgs e)
        {
            Label target = (Label)sender;
            RadComboBoxItem item = (RadComboBoxItem)target.BindingContainer;
            string itemText = (string)DataBinder.Eval(item, string.Format("Attributes['{0}']", target.ID));
            target.Text = itemText;
        }
    }

public class LookupComboTemplate : ITemplate
    {
        DataTable table;

        public LookupComboTemplate(DataTable table)
        {
            this.table = table;
        }

        public void InstantiateIn(Control container)
        {
            HtmlTable table = new HtmlTable();
            HtmlTableRow row = new HtmlTableRow();
            HtmlTableCell cell = new HtmlTableCell();
            cell.InnerText = "Value";
            row.Controls.Add(cell);
            HtmlTableCell cell1 = new HtmlTableCell();
            cell1.InnerText = "Text";
            row.Controls.Add(cell1);
            table.Controls.Add(row);
            container.Controls.Add(table);
        }
    }

And the DataTable is, at the moment, arbitrary hard-coded data:

    protected DataTable GetData()
    {
        DataTable table = new DataTable();
        DataRow row;

        table.Columns.Add("Col1");
        table.Columns.Add("Col2");
        table.Columns.Add("Col3");

        row = table.NewRow();
        row.ItemArray = new string[] { "Row1Cell1", "Row1Cell2", "Row1Cell3" };
        table.Rows.Add(row);

        row = table.NewRow();
        row.ItemArray = new string[] { "Row2Cell1", "Row2Cell2", "Row2Cell3" };
        table.Rows.Add(row);

        return table;
    }

I can't get anything to work.

[Serrin]

I think I got it!! :D

Try adding the following after HtmlTable table = new HtmlTable():

table.Width = Unit.Pixel(375).ToString();

I tested your table creation code, and without that, the table is smooshed together, but with it, rows each take up 1/3 of the space (aka, 125 pixels each).

Let me know if this works for you. :)