Grid combo cells don't align

[Joel]

I'm implementing the ASP.NET/AJAX ComboBox as a grid, starting from the samples. This is my first time using 3rd party controls in ASP, and the documentation is great to get me started, thanks!
The samples work great at a broad level, and I can load my data, all the basics work and initial prototyping was nice and fast. Then I started tweaking bugs down at the next level, and I'm having problems.

Specifically, I'm having trouble with my RadComboBox Grid. Following the sample, every combo box dropdown row is an individual table, the columns don't line up as my database-loaded data exceeds the hard-coded column width. Once I strayed from the sample, things went poorly.

I originally expected the "combo grid" items to be all one table. Looking at the HTML page source, it looks like the Template items are added to an HTML list, one item per row, <ul><li></li>...</ul>? That was a surprise. Can I control whether a list or a table is used by the RadComboBox to generate the items? It would work fine if the RadComboBox emitted a wrapping <table>...<table>, and each template item were wrapped in a <tr>...</tr> or something similar.

Or, to ask more generally, is there a way I can have all my combo box grid items be in one table rather than many small 1-row tables?

[Nencho]

Hi Joel,

Could you elaborate a bit more about the scenario you are trying the implement? What do you mean by "ComboBox as a grid", do you attempt to implement a RadGrid inside the ItemTemplate of the RadComboBox? In addition, could you provide us a screenshot demonstrating the problem you had faced?

Regards,
Nencho
the Telerik team

[Joel]

By "grid" I just mean I'm following your combo box samples to get multiple columns & rows in a combo box: http://demos.telerik.com/aspnet-ajax/combobox/examples/default/defaultcs.aspx - I thought you guys called that a "grid-like combo". :)

In attached screenshot 1 "TelerikDemoScreenshot1.png" you can see your combo demo, multiple columns, and Chrome's "inspect element" showing each combo item as a <li> with a complete table inside. It looks great with the demo data!

Once I started adding my real-world data from the database, the columns started getting messed up, because each individual table inside each <li> item decides how wide the columns should be and the real data has widely divergent stringwidths. I've added a border and some dummy data to make the problem more obvious: attached screenshot 2 "TelerikComboScreenshot2.png".

Obviously I can adjust the hard-coded column widths to try to get an ok fit for data I know about, but that's not a real solution, especially as the data changes in real time. If the items were in a single table, the columns would always line up. Do you have another way to accomplish that? 


Here is the ASP.NET template I'm using, derived directly from the sample linked above:

<telerik:RadComboBox ID="RadComboBoxProduct" runat="server" Height="200px" Width="200px"
    DropDownWidth="220px" EmptyMessage="Choose a Cost Center" HighlightTemplatedItems="true"
    EnableLoadOnDemand="true" DataTextField="s_text">
    <HeaderTemplate>
        <table style="width: 200px" border="2" cellspacing="0" cellpadding="0">
            <tr>
                <td style="width: 100px;">
                    Product Name
                </td>
                <td style="width: 30px;">
                    Quantity
                </td>
                <td style="width: 30px;">
                    Price
                </td>
            </tr>
        </table>
    </HeaderTemplate>
    <ItemTemplate>
        <table style="width: 200px" border="1" cellspacing="0" cellpadding="0">
            <tr>
                <td style="width: 100px;">
                    <%# Eval("s_text") %>
                </td>
                <td style="width: 30px;">
                    <%# Eval("s_code") %>
                </td>
                <td style="width: 30px;">
                    <%# Eval("l_value") %>
                </td>
            </tr>
        </table>
    </ItemTemplate>
</telerik:RadComboBox>

[Nencho]

Hi Joel,

One possible way to deal with the problematic behavior is to add one additional wrapper to each evaluated attribute. See the code below, where this approach is implemented:

<telerik:RadComboBox ID="RadComboBoxProduct" runat="server" Height="200px" Width="200px"
        DropDownWidth="298px" EmptyMessage="Choose a Product" HighlightTemplatedItems="true"
        OnItemsRequested="RadComboBoxProduct_ItemsRequested" EnableLoadOnDemand="true"
        NoWrap="true" Filter="StartsWith">
        <HeaderTemplate>
            <table style="width: 275px" cellspacing="0" cellpadding="0">
                <tr>
                    <td style="width: 177px;">
                        Product Name
                    </td>
                    <td style="width: 60px;">
                        Quantity
                    </td>
                    <td style="width: 40px;">
                        Price
                    </td>
                </tr>
            </table>
        </HeaderTemplate>
        <ItemTemplate>
            <table style="width: 200px" border="1" cellspacing="0" cellpadding="0">
                <tr>
                    <td style="width: 177px;">
                        <div style="width: 177px; overflow: hidden;">
                            <%# DataBinder.Eval(Container, "Text")%>
                        </div>
                    </td>
                    <td style="width: 60px;">
                        <div style="max-width: 60px; overflow: hidden;">
                            <%# DataBinder.Eval(Container, "Attributes['UnitsInStock']")%>
                        </div>
                    </td>
                    <td style="width: 40px;">
                        <div style="width: 40px; overflow: hidden;">
                            <%# DataBinder.Eval(Container, "Attributes['UnitPrice']")%>
                        </div>
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </telerik:RadComboBox>

Regards,
Nencho
the Telerik team

[Joel]

Ah, I see how that works. Cool. I'll give that a try, though I'm not sure I can get away with truncating the data for this particular solution. It's a nice trick, thanks!

And if you could add a feature request for future consideration, that would appreciated long term:
Add a flag on the combo box to build the combo box dropdown item template items using <tr> table rows instead of <li> list items.

[Kalina]

Hi Joel,

Thank you for your suggestion.
However I am afraid that changing the way ItemTemplate is rendered is not included in our future plans.
The ItemTemplate purpose is to allow the programmers implement there the markup they want to be rendered and it is not possible to change this.
You can observe this not only in RadControls but in every control from the Microsoft ASP.NET controls suite that has an ItemTemplate.

Regards,
Kalina
the Telerik team

[Help]

I am having this same problem. I have tried the suggested solution but it does not work for me. Here is my code

 

<telerik:RadComboBox ID="rcbEarningSelection" runat="server" Height="200" Width="200" DropDownWidth="800" Label="Earning: " EmptyMessage="Choose a Earning" HighlightTemplatedItems="true" DataTextField="EarningDescription" DataValueField="EarningID" OnSelectedIndexChanged="rcbEarningSelection_SelectedIndexChanged" AutoPostBack="true">
        <HeaderTemplate>
            <table style="width: 775px" cellspacing="0" cellpadding="0" border="1">
                <tr>
                    <td style="width: 50px;">EarningID</td>
                    <td style="width: 100px;">EarningDescription</td>
                    <td style="width: 80px;">Department</td>
                    <td style="width: 80px;">Job</td>
                    <td style="width: 60px;">Payrate</td>
                    <td style="width: 20px;">State</td>
                    <td style="width: 40px;">WCCodeID</td>
                </tr>
            </table>
        </HeaderTemplate>
        <ItemTemplate>
            <table style="width: 775px" cellspacing="0" cellpadding="0" border="1">
                <tr>
                    <td style="width: 50px;">
                        <div style="width: 50px; overflow: hidden;">
                            <%# DataBinder.Eval(Container.DataItem, "EarningID")%>
                        </div>
                    </td>
                    <td style="width: 100px;">
                        <div style="width: 100px; overflow: hidden;">
                            <%# DataBinder.Eval(Container.DataItem, "EarningDescription")%>
                        </div>
                    </td>
                    <td style="width: 80px;">
                        <div style="width: 80px; overflow: hidden;">
                            <%# DataBinder.Eval(Container.DataItem, "Department")%>
                        </div>
                    </td>
                    <td style="width: 80px;">
                        <div style="width: 80px; overflow: hidden;">
                            <%# DataBinder.Eval(Container.DataItem, "Job")%>
                        </div>
                    </td>
                    <td style="width: 60px;">
                        <div style="width: 60px; overflow: hidden;">
                            <%# DataBinder.Eval(Container.DataItem, "Payrate")%>
                        </div>
                    </td>
                    <td style="width: 20px;">
                        <div style="width: 20px; overflow: hidden;">
                            <%# DataBinder.Eval(Container.DataItem, "WCWorkState")%>
                        </div>
                    </td>
                    <td style="width: 40px;">
                        <div style="width: 40px; overflow: hidden;"><%# DataBinder.Eval(Container.DataItem, "WCCodeID")%></div>
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </telerik:RadComboBox>

[Eyup]

Hello,

I've already replied to your query in the formal support ticket regarding this matter. I suggest that we continue our technical conversation on the mentioned thread.

Regards,
Eyup
Progress Telerik