Batch Edit Column Alignment

[Geoff]

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>

[Venelin]

Hi Geoff,

Thank you for reporting this problem to us. We will improve grid's behavior in this case. As a matter for gratitude you Telerik points have been increased.

Now, in order to fix this problem, could you please try to set MasterTableView-TableLayout="Fixed". If you experience any problems, let me know.

Regards,
Venelin
Telerik

 

 

[Keerthi]

Hi.

I am having the same exact problem mentioned above, and setting the tablelayout did not fix it either.
Is there anything else that i need to set?

Thank you
Keerthi

[Keerthi]

Hi, 

I am having the same exact problem, and setting the tablelayout like mentioned above does not seem to fix the issue.

Any other suggestions
Thank you
Keerthi Kolli

[Geoff]

Keerthi,
I believe you also need to set the individual column widths using the HeaderStyle-Width property e.g. HeaderStyle-Width="80px".

Regards

Geoff