ComboBox in RadGrid problem

[Alfredo Moreno]

Hello,
I'm working with the ComboBox inside the RadGrid as ItemTemplate in GridTemplateColumn.
The ComboBox is filled dynamically when capturing information.
The RadGrid is filled from code in RadGrid_1_NeedDataSource with a DataTable returned from a query to SQL Server.

The problem I have is that sometimes the Combobox is displayed correctly, but most of the time is shown incorrectly as a TextBox or as an empty space, and to display information does not respect the Combobox format.
I searched the reason but I know why this is done.
I have another RadGrid with Combobox and the same function, but different SQL table and it works perfectly.
I would greatly appreciate if you can help me.
Thanks.

[Andrey]

Hello,

I am afraid that with the provided information it is too hard to find the source of issue. Could you share your full page source code along with the code-behind file content?

Additionally, it will be useful to post some screenshots that demonstrate the correct and erroneous behavior. Thus all who want to help you will have better understanding of your case.

Regards,
Andrey
the Telerik team

[Alfredo Moreno]

Hello, I add the code and the images of my example.
Thank you.


<telerik:RadGrid ID="RadGrid_1"
    runat="server"
    Skin="Sunset"
    Height="500px" 
    Width="1001px" 
    AutoGenerateColumns="False"
    GridLines="None" 
    AllowFilteringByColumn="True"
    ShowStatusBar="True"
    AllowPaging="True" 
    PageSize="300"
    ShowFooter="True">
    <GroupingSettings CaseSensitive="false" />
    <PagerStyle NextPageToolTip="Siguiente página" PrevPageToolTip="Página anterior"/>
    <MasterTableView
        TableLayout="Fixed" 
        AllowMultiColumnSorting="True"
        NoMasterRecordsText="No hay registros que mostrar."
        NoDetailRecordsText="No hay registros que mostrar.">
        <RowIndicatorColumn>
            <HeaderStyle Width="20px" />
        </RowIndicatorColumn>
        <ExpandCollapseColumn Visible="True">
            <HeaderStyle Width="20px" />
            <ItemStyle Width="20px" />
        </ExpandCollapseColumn>
        <Columns>
            <telerik:GridTemplateColumn UniqueName="indice3" DataField="indice3" HeaderText="Clave" HeaderStyle-Width="200px" HeaderStyle-Wrap="False" ItemStyle-Width="200px" ItemStyle-Wrap="False" SortExpression="indice3">
                <FooterTemplate>Template footer</FooterTemplate>
                <FooterStyle VerticalAlign="Middle" HorizontalAlign="Center" />
                <ItemTemplate>
                    <telerik:RadComboBox runat="server" ID="RadComboBoxIndice3" EnableLoadOnDemand="True" 
                        DataTextField="indice3" OnItemsRequested="RadComboBoxIndice3_ItemsRequested" 
                        DataValueField="indice3" AutoPostBack="true"
                        HighlightTemplatedItems="true" Height="140px" Width="170px" DropDownWidth="750px"
                        OnSelectedIndexChanged="OnSelectedIndexChangedHandlerIndice3">
                        <HeaderTemplate>
                            <ul>
                                <li class="col2">Clave</li>
                                <li class="col1">Concepto</li>
                            </ul>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <ul>
                                <li class="col2">
                                    <%# DataBinder.Eval(Container, "Text")%>
                                </li>
                                <li id="concepto3" class="col1">
                                    <%#DataBinder.Eval(Container, "Attributes['concepto3']")%>
                                </li>
                            </ul>
                        </ItemTemplate>
                    </telerik:RadComboBox>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn    UniqueName="descripcion3" DataField="descripcion3" HeaderText="Descripción"> <HeaderStyle Width="400px" Wrap="False"></HeaderStyle> <ItemStyle Width="400px" Wrap="False" > </ItemStyle> </telerik:GridBoundColumn>
            <telerik:GridBoundColumn    UniqueName="detalle3"     DataField="detalle3"     HeaderText="Detalle">     <HeaderStyle Width="400px" Wrap="False"></HeaderStyle> <ItemStyle Width="400px" Wrap="False" > </ItemStyle> </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
    <exportsettings><excel format="ExcelML" /></exportsettings>
    <ItemStyle Wrap="True" />
    <HeaderStyle Wrap="True" HorizontalAlign="Center" />
    <ClientSettings EnablePostBackOnRowClick="True" EnableRowHoverStyle="True">
        <Scrolling AllowScroll="True" UseStaticHeaders="True" />
    </ClientSettings>
</telerik:RadGrid>

<style type="text/css">
        .col1
        {
            float: left;
            margin: 0;
            padding: 0 5px 0 0;
            line-height: 14px;
            Font-Size: 10px;
            width: 400px;
        }

        .col2
        {
            float: left;
            margin: 0;
            padding: 0 5px 0 0;
            line-height: 14px;
            Font-Size: 10px;
            width: 170px;
        }
</style> 

[Andrey]

Hello,

Most probably the problem comes from the fact that you have set both ItemStyle-Width and HeaderStyle-Width properties for some of the columns. Try to remove all ItemStyle-Width properties and use only HeaderStyle-Width properties.

Additionally, I noticed that you have set the Width of RadGrid to 1001px but your total Width of the columns is 640px. Which Width should RadGrid use, the total width of the columns or the one you have specified through the Width property?

When you have enabled static header the TableLayout is automatically set to Fixed, this means that you need to leave at least one column without Width so the total Width could be evenly distributed.

Try to use the aforementioned suggestions and manipulate the overall Width of the Grid in order to achieve your goal.

Kind regards,
Andrey
the Telerik team