This is a migrated thread and some comments may be shown as answers.

GridTemplateColumn bad rendering since new update

3 Answers 93 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Jocelyn asked on 19 Oct 2012, 12:50 PM

BadLayout.png

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

3 Answers, 1 is accepted

answered on 23 Oct 2012, 12:33 PM

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

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.

Accepted

answered on 25 Oct 2012, 01:38 PM

AlignmentIssue.zip

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