Grid combo cells don't align

8 posts, 0 answers
  1. Joel
    Joel avatar
    22 posts
    Member since:
    Sep 2012

    Posted 18 Sep 2012 Link to this post

    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?
  2. Nencho
    Admin
    Nencho avatar
    1876 posts

    Posted 21 Sep 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Joel
    Joel avatar
    22 posts
    Member since:
    Sep 2012

    Posted 21 Sep 2012 Link to this post

    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>

  4. Nencho
    Admin
    Nencho avatar
    1876 posts

    Posted 26 Sep 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Joel
    Joel avatar
    22 posts
    Member since:
    Sep 2012

    Posted 26 Sep 2012 Link to this post

    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.
  6. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 01 Oct 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  7. Help
    Help avatar
    15 posts
    Member since:
    Sep 2016

    Posted 24 Aug 2017 Link to this post

    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>

  8. Eyup
    Admin
    Eyup avatar
    4025 posts

    Posted 29 Aug 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top