Batch Edit Column Alignment

5 posts, 0 answers
  1. Geoff
    Geoff avatar
    53 posts
    Member since:
    Aug 2012

    Posted 03 Oct 2014 Link to this post

    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>
  2. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 07 Oct 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Keerthi
    Keerthi avatar
    2 posts
    Member since:
    Oct 2014

    Posted 04 Nov 2014 in reply to Venelin Link to this post

    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
  5. Keerthi
    Keerthi avatar
    2 posts
    Member since:
    Oct 2014

    Posted 04 Nov 2014 in reply to Venelin Link to this post

    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
  6. Geoff
    Geoff avatar
    53 posts
    Member since:
    Aug 2012

    Posted 05 Nov 2014 in reply to Keerthi Link to this post

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

    Regards

    Geoff
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017