GridTemplateColumn bad rendering since new update

[Jocelyn]

Hi,

since the new update my GridTemplateColumn have a bad rendering. See the image below.

RadGrid:

<telerik:RadGrid ID="gridMPA" runat="server" CellSpacing="0" BorderWidth="0" GridLines="None">
    <FilterMenu EnableImageSprites="False">
    </FilterMenu>
    <ClientSettings>
        <Selecting CellSelectionMode="None"></Selecting>
    </ClientSettings>
    <MasterTableView DataKeyNames="Noauto" EditMode="InPlace">
        <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
        <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
            <HeaderStyle Width="20px"></HeaderStyle>
        </RowIndicatorColumn>
        <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
            <HeaderStyle Width="20px"></HeaderStyle>
        </ExpandCollapseColumn>
        <Columns>
            <telerik:GridBoundColumn AutoPostBackOnFilter="true" FilterControlAltText="Filter colNoAuto column"
                HeaderText="NoAuto" UniqueName="colNoAuto" ShowFilterIcon="false" Visible="false"
                DataField="Noauto" ReadOnly="true">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn AutoPostBackOnFilter="true" FilterControlAltText="Filter colNumero column"
                HeaderText="Numero" UniqueName="colNumero" ShowFilterIcon="false" DataField="Numero"
                ReadOnly="true">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn AutoPostBackOnFilter="true" FilterControlAltText="Filter colMedicament column"
                HeaderText="Médicament" UniqueName="colMedicament" ShowFilterIcon="false" DataField="NomMedicament"
                ReadOnly="true">
                <HeaderStyle Width="200px" />
                <ItemStyle Wrap="false" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn AutoPostBackOnFilter="true" FilterControlAltText="Filter colDose column"
                HeaderText="Dose" UniqueName="colDose" ShowFilterIcon="false" DataField="Dose"
                ReadOnly="true">
                <ItemStyle Wrap="false" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn AutoPostBackOnFilter="true" FilterControlAltText="Filter colPosologie column"
                HeaderText="Posologie" UniqueName="colPosologie" ShowFilterIcon="false" DataField="Posologie"
                ReadOnly="true">
                <ItemStyle Wrap="false" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn AutoPostBackOnFilter="true" FilterControlAltText="Filter colAHFS column"
                HeaderText="Code A.H.F.S." UniqueName="colAHFS" ShowFilterIcon="false" DataField="AHFS"
                ReadOnly="true">
                <ItemStyle Wrap="false" />
            </telerik:GridBoundColumn>
            <telerik:GridImageColumn UniqueName="colMPA" HeaderText="MPA" ImageUrl="~/Images/empty.png"
                ShowFilterIcon="false" AllowFiltering="false">
                <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
                <ItemStyle HorizontalAlign="Center"></ItemStyle>
            </telerik:GridImageColumn>
            <telerik:GridImageColumn UniqueName="colDivergence" HeaderText="Divergence" ImageUrl="~/Images/empty.png"
                ShowFilterIcon="false" AllowFiltering="false">
                <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
                <ItemStyle HorizontalAlign="Center"></ItemStyle>
            </telerik:GridImageColumn>
            <telerik:GridButtonColumn ButtonType="ImageButton" UniqueName="colSub" HeaderText="Sub."
                CommandName="SelectSub" ImageUrl="~/Images/empty.png">
                <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
                <ItemStyle HorizontalAlign="Center"></ItemStyle>
            </telerik:GridButtonColumn>
            <telerik:GridButtonColumn ButtonType="ImageButton" UniqueName="colTest" HeaderText="Test"
                CommandName="AddDivergence" ImageUrl="~/Images/empty.png">
                <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
                <ItemStyle HorizontalAlign="Center"></ItemStyle>
            </telerik:GridButtonColumn>
            <telerik:GridTemplateColumn UniqueName="colCesser" InitializeTemplatesFirst="false"
                ReadOnly="true" ShowFilterIcon="false">
                <HeaderTemplate>
                    <div class="center">
                        <telerik:RadCodeBlock runat="server">
                            <%=GetMessageEx(5220).Texte%>
                        </telerik:RadCodeBlock>
                    </div>
                    <div class="center">
                        <telerik:RadButton ID="colCesser_chk_header" runat="server" ButtonType="ToggleButton" CausesValidation="false"
                            ToggleType="CheckBox" AutoPostBack="true" OnCheckedChanged="chkHeader_CheckedChanged">
                        </telerik:RadButton>
                    </div>
                </HeaderTemplate>
                <ItemTemplate>
                    <div class="center">
                        <telerik:RadButton ID="colCesser_chk_item" runat="server" ButtonType="ToggleButton" CausesValidation="false"
                            ToggleType="CheckBox" AutoPostBack="true" Checked='<%# Eval("Cesser") %>' OnCheckedChanged="chkCesser_CheckedChanged">
                        </telerik:RadButton>
                    </div>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn UniqueName="colContinuer" InitializeTemplatesFirst="false"
                ReadOnly="true" ShowFilterIcon="false">
                <HeaderTemplate>
                    <div class="center">
                        <telerik:RadCodeBlock runat="server">
                            <%=GetMessageEx(1214).Texte%>
                        </telerik:RadCodeBlock>
                    </div>
                    <div class="center">
                        <telerik:RadButton ID="colContinuer_chk_header" runat="server" ButtonType="ToggleButton" CausesValidation="false"
                            ToggleType="CheckBox" AutoPostBack="true" OnCheckedChanged="chkHeader_CheckedChanged">
                        </telerik:RadButton>
                    </div>
                </HeaderTemplate>
                <ItemTemplate>
                    <div class="center">
                        <telerik:RadButton ID="colContinuer_chk_item" runat="server" ButtonType="ToggleButton" CausesValidation="false"
                            ToggleType="CheckBox" AutoPostBack="true" Checked='<%# Eval("Continuer") %>'
                            OnCheckedChanged="chkContinuer_CheckedChanged">
                        </telerik:RadButton>
                    </div>
                </ItemTemplate>
                <HeaderStyle Wrap="false" />
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn UniqueName="colModifier" InitializeTemplatesFirst="false"
                ReadOnly="true" ShowFilterIcon="false">
                <HeaderTemplate>
                    <div class="center">
                        <telerik:RadCodeBlock runat="server">
                            <%=GetMessageEx(1042).Texte%>
                        </telerik:RadCodeBlock>
                    </div>
                    <div class="center">
                        <telerik:RadButton ID="colModifier_chk_header" runat="server" ButtonType="ToggleButton" CausesValidation="false"
                            ToggleType="CheckBox" AutoPostBack="true" OnCheckedChanged="chkHeader_CheckedChanged">
                        </telerik:RadButton>
                    </div>
                </HeaderTemplate>
                <ItemTemplate>
                    <div class="center">
                        <telerik:RadButton ID="colModifier_chk_item" runat="server" ButtonType="ToggleButton" CausesValidation="false"
                            ToggleType="CheckBox" AutoPostBack="true" Checked='<%# Eval("Modifier") %>' OnCheckedChanged="chkModifier_CheckedChanged">
                        </telerik:RadButton>
                    </div>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridEditCommandColumn FilterControlAltText="Filter EditCommandColumn column"
                ButtonType="ImageButton" EditText="Modifier" Resizable="False" EditImageUrl="Images/Icons/006-Write-New-Icon.png"
                UniqueName="colEdit">
                <HeaderStyle Width="32px"></HeaderStyle>
                <ItemStyle Width="32px" />
            </telerik:GridEditCommandColumn>
            <telerik:GridTemplateColumn UniqueName="colQte" InitializeTemplatesFirst="false"
                ShowFilterIcon="false">
                <HeaderTemplate>
                    <div class="center">
                        <telerik:RadButton ID="colQte_btn_header" runat="server" ButtonType="StandardButton" CausesValidation="false"
                            AutoPostBack="false" OnClientClicked="openQteFillWindow" OnLoad="btnRemplir_Load">
                        </telerik:RadButton>
                    </div>
                </HeaderTemplate>
                <ItemTemplate>
                    <div class="center">
                        <%#Eval("Quantite")%>
                    </div>
                </ItemTemplate>
                <EditItemTemplate>
                    <div class="center">
                        <telerik:RadNumericTextBox runat="server" ID="colQte_txt_edit" MinValue="0" MaxLength="4"
                            Width="50px" DbValue='<%#Bind("Quantite")%>'>
                        </telerik:RadNumericTextBox>
                    </div>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn UniqueName="colRen" InitializeTemplatesFirst="false"
                ShowFilterIcon="false">
                <HeaderTemplate>
                    <div class="center">
                        <telerik:RadButton ID="colRen_btn_header" runat="server" ButtonType="StandardButton"
                            AutoPostBack="false" OnClientClicked="openRenFillWindow" OnLoad="btnRemplir_Load">
                        </telerik:RadButton>
                    </div>
                </HeaderTemplate>
                <ItemTemplate>
                    <div class="center">
                        <%#Eval("Renouvellements")%>
                    </div>
                </ItemTemplate>
                <EditItemTemplate>
                    <div class="center">
                        <telerik:RadNumericTextBox runat="server" ID="colRen_txt_edit" MinValue="0" MaxLength="4"
                            Width="50px" DbValue='<%#Bind("Renouvellements")%>'>
                        </telerik:RadNumericTextBox>
                    </div>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn AutoPostBackOnFilter="true" FilterControlAltText="Filter colRaison column"
                HeaderText="Raison" UniqueName="colRaison" ShowFilterIcon="false" DataField="Commentaire">
                <HeaderStyle Width="220px" />
            </telerik:GridBoundColumn>
        </Columns>
        <EditFormSettings>
            <EditColumn FilterControlAltText="Filter EditCommandColumn column">
            </EditColumn>
        </EditFormSettings>
        <SortExpressions>
            <telerik:GridSortExpression FieldName="Numero" SortOrder="Ascending" />
        </SortExpressions>
    </MasterTableView>
    <ClientSettings AllowKeyboardNavigation="true">
        <ClientEvents OnCommand="gridMPA_OnCommand" />
        <KeyboardNavigationSettings AllowSubmitOnEnter="true" />
        <Resizing EnableRealTimeResize="true" />
    </ClientSettings>
</telerik:RadGrid>

Thanks

[Angel Petrov]

Hi Jocelyn,

This is not an expected behaviour of RadGrid. However in the code I have noticed that you have a CSS class named "center". Could you please remove the div elements that contain that class and tell us if the problem replicates again? If it does please elaborate on which browser and browser version you use.

All the best,
Angel Petrov
the Telerik team

[Jocelyn]

Hi Angel,

Thanks for you answer. My class only contains "text-align: center" and the problem is still there if I remove the entire div.

I have this problem on the lastest chrome and firefox version, IE9 and IE8. It only works on IE7.

Thanks

[Angel Petrov]

Hi Jocelyn,

I have replicated your scenario and the problem comes from the RadButton control. When not setting text in the button you should set the height to the according height of the cell. Using the mentioned approach the rendering should behave correctly. Attached is a simple solution for you to review.

Regards,
Angel Petrov
the Telerik team