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

Batch Edit Column Alignment

4 Answers 162 Views

Grid

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

Geoff asked on 03 Oct 2014, 10:00 AM

batch-edit-alignment.png

batch-edit-alignment2.png

I have a RadGrid, which is in batch edit mode that functionally works fine. There is however a cosmetic issue that I would like to resolve if possible.

When there are no records in the grid and the '+Add new record' option is clicked, the columns for the blank row that appears are misaligned with the column headings unless the browser window happens to be set at a particular width.

Once there is at least one record in the grid, everything aligns perfectly with both new and existing records. If I fix the with of all the columns then it all works fine but of course I do not want to do this.

I've attach screenshots to show the misalignment problem and here is my aspx code for the grid:

<telerik:RadGrid ID="RadGrid1" DataSourceID="ds_Logbook" AutoGenerateColumns="False"

AllowSorting="True"

AllowAutomaticDeletes="False"

AllowAutomaticInserts="True"

AllowAutomaticUpdates="True"

AllowPaging="false" GridLines="None"

EnableEmbeddedSkins="false" Skin="RAMtrackStdGrid" runat="server">

<MasterTableView CommandItemDisplay="TopAndBottom" DataKeyNames="Logbook_id,Fault_Id"

DataSourceID="ds_Logbook" HorizontalAlign="NotSet" EditMode="Batch" AutoGenerateColumns="False">

<BatchEditingSettings EditType="Cell" />

<Columns>

<telerik:GridTemplateColumn UniqueName="LogDay" HeaderText="Day" DataField="LogDate" HeaderStyle-Width="40px">

<ItemTemplate>

<asp:Label ID="lbl_LogDay" Text='<%# Eval("LogDay") %>' runat="server" />

</ItemTemplate>

<EditItemTemplate>

<asp:TextBox ID="txt_LogDay" Text='<%# Bind("LogDay") %>' Width="20px" runat="server" />

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridDropDownColumn UniqueName="Activity_Id" HeaderText="Activity Code" DataField="Activity_Id" ListValueField="Activity_Id" ColumnEditorID="GridDropDownColumnEditor1"

ListTextField="ActivityCode" DataSourceID="ds_ActivityCodes" SortExpression="Activity_Id" HeaderStyle-Width="60px">

<ItemStyle Width="70px" />

<ColumnValidationSettings EnableRequiredFieldValidation="true">

<RequiredFieldValidator ForeColor="Red" Text="*This field is required">

</RequiredFieldValidator>

</ColumnValidationSettings>

</telerik:GridDropDownColumn>

<telerik:GridTemplateColumn UniqueName="StartTime" HeaderText="Start Time" DataField="StartTime" HeaderStyle-Width="80px">

<ItemTemplate>

<asp:Label ID="lbl_StartTime" Text='<%# Eval("StartTime") %>' runat="server" />

</ItemTemplate>

<EditItemTemplate>

<telerik:RadTimePicker ID="tp_StartTime" Width="60px" SelectedDate='<%# Bind("StartTime") %>' Skin="Metro" runat="server">

<DateInput ID="DateInput2" CssClass="TimeField" Width="60px" runat="server">

</DateInput>

<TimeView ID="TimeView1" Interval="00:30:00" Columns="6" runat="server"></TimeView>

</telerik:RadTimePicker>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="StopTime" HeaderText="Stop Time" DataField="StopTime" HeaderStyle-Width="80px">

<ItemTemplate>

<asp:Label ID="lbl_StopTime" Text='<%# Eval("StopTime") %>' runat="server" />

</ItemTemplate>

<EditItemTemplate>

<telerik:RadTimePicker ID="tp_StopTime" Width="60px" SelectedDate='<%# Bind("StopTime") %>' Skin="Metro" runat="server">

<DateInput ID="DateInput2" CssClass="TimeField" Width="60px" runat="server">

</DateInput>

<TimeView ID="TimeView1" Interval="00:30:00" Columns="6" runat="server"></TimeView>

</telerik:RadTimePicker>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="ProgComment" HeaderText="Comments" DataField="ProgComment" HeaderStyle-Width="300px">

<ItemTemplate>

<asp:Label ID="lbl_ProgComment" Text='<%# Eval("ProgComment") %>' runat="server" />

</ItemTemplate>

<EditItemTemplate>

<telerik:RadEditor ID="re_ProgComment" Width="280px" Height="200px" EditModes="Design" Content='<%# Eval("ProgComment") %>' Skin="Metro" runat="server">

<Tools>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="Bold"></telerik:EditorTool>

<telerik:EditorTool Name="Italic"></telerik:EditorTool>

<telerik:EditorTool Name="Underline"></telerik:EditorTool>

<telerik:EditorTool Name="Cut"></telerik:EditorTool>

<telerik:EditorTool Name="Copy"></telerik:EditorTool>

<telerik:EditorTool Name="Paste"></telerik:EditorTool>

<telerik:EditorTool Name="AjaxSpellCheck"></telerik:EditorTool>

</telerik:EditorToolGroup>

</Tools>

</telerik:RadEditor>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridDropDownColumn UniqueName="Event_Id" HeaderText="Incident type" DataField="Event_Id2" SortExpression="Event_Id2" ColumnEditorID="GridDropDownColumnEditor2"

ListTextField="EventDescription" ListValueField="IncidentType" DataSourceID="ds_IncidentTypes" HeaderStyle-Width="100px">

</telerik:GridDropDownColumn>

<telerik:GridTemplateColumn UniqueName="TimeFaultOccurred" HeaderText="Time of Incident" DataField="TimeFaultOccurred" HeaderStyle-Width="80px">

<ItemTemplate>

<asp:Label ID="lbl_TimeFaultOccurred" Text='<%# Eval("TimeFaultOccurred") %>' runat="server" />

</ItemTemplate>

<EditItemTemplate>

<telerik:RadTimePicker ID="tp_TimeFaultOccurred" Width="60px" SelectedDate='<%# Bind("TimeFaultOccurred") %>' Skin="Metro" runat="server">

<DateInput ID="DateInput2" CssClass="TimeField" Width="60px" runat="server">

</DateInput>

<TimeView ID="TimeView1" Interval="00:30:00" Columns="6" runat="server"></TimeView>

</telerik:RadTimePicker>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="FaultSymptom" HeaderText="Symptoms" DataField="FaultSymptom" HeaderStyle-Width="300px">

<ItemTemplate>

<asp:Label ID="lbl_FaultSymptom" Text='<%# Eval("FaultSymptom") %>' runat="server" />

</ItemTemplate>

<EditItemTemplate>

<telerik:RadEditor ID="re_Symptoms" Width="280px" Height="200px" EditModes="Design" Content='<%# Eval("FaultSymptom") %>' Skin="Metro" runat="server">

<Tools>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="Bold"></telerik:EditorTool>

<telerik:EditorTool Name="Italic"></telerik:EditorTool>

<telerik:EditorTool Name="Underline"></telerik:EditorTool>

<telerik:EditorTool Name="Cut"></telerik:EditorTool>

<telerik:EditorTool Name="Copy"></telerik:EditorTool>

<telerik:EditorTool Name="Paste"></telerik:EditorTool>

<telerik:EditorTool Name="AjaxSpellCheck"></telerik:EditorTool>

</telerik:EditorToolGroup>

</Tools>

</telerik:RadEditor>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn UniqueName="LogDate" HeaderText="" DataField="LogDate" AllowFiltering="false" ReadOnly="true" HeaderStyle-Width="1px" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Logbook_Id" HeaderText="" DataField="Logbook_Id" AllowFiltering="false" ReadOnly="true" HeaderStyle-Width="1px" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Fault_Id" HeaderText="" DataField="Fault_Id" AllowFiltering="false" ReadOnly="true" HeaderStyle-Width="1px" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="status" HeaderText="" DataField="status" AllowFiltering="false" ReadOnly="true" HeaderStyle-Width="1px" >

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" FrozenColumnsCount="0"></Scrolling>

<ClientEvents OnCommand="gridCommand" />

</ClientSettings>

</telerik:RadGrid>

Batch Edit Column Alignment

4 Answers, 1 is accepted