Grid InsertItemDisplay="bottom" is breaking layout

[Alexander]

We're using one version back from the latest telerik release and the grid setup is pretty straight-forward.

 There is one detail grid for each row and each column on both the master and detail grids are template columns who have their values displayed with calls to Eval().

If InsertItemDisplay="top" everything looks fine, however InsertItemDisplay="bottom" causes the grid to render as in the attached screenshots.

Notice in the second screenshot the insert row looks fine on the detail grid which makes me think it's an issue with the expand indicator column on the master grid.

Can anyone else reproduce this?

 

[Viktor Tachev]

Hello Alexander,

From the provided information it would be hard to pinpoint what is causing the issue. I tried to replicate it on my end, however, I was not able to.

I am attaching a sample project I used for testing. Give it a try and see how it works for you. Let me know what should be changed in the sample in order to replicate the behavior.

Regards,
Viktor Tachev
Telerik

[Alexander]

It seems your example is missing the <DetailTables> node that should immediately follow the <MasterTableView> node.

I've made some code similar to what I'm using; I can't attach zip files so I'll just paste the code below.

<telerik:RadGrid ID="grid" runat="server" SkinID="TelerikRadGrid" AllowFilteringByColumn="False"
      AllowPaging="False" AllowSorting="False" AllowMultiRowSelection="false" OnPreRender="grid_PreRender"
      OnNeedDataSource="grid_NeedDataSource" OnDetailTableDataBind="grid_DetailTableDataBind"
      OnInsertCommand="grid_InsertCommand" OnUpdateCommand="grid_UpdateCommand" OnDeleteCommand="grid_DeleteCommand"
      OnItemDataBound="grid_ItemDataBound" style="margin-top:5px;" OnEditCommand="grid_EditCommand">
      <ClientSettings>
        <Selecting AllowRowSelect="False" />
      </ClientSettings>
      <MasterTableView EditMode="InPlace">
        <DetailTables>
          <telerik:GridTableView EditMode="InPlace" InsertItemDisplay="Bottom" Width="100%" ShowHeader="true" ShowFooter="false" AllowPaging="false" >
            <NoRecordsTemplate>
            </NoRecordsTemplate>
            <Columns>
              <%-- Delete button column --%>
              <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete" Text="Delete"
              UniqueName="DeleteColumn" ImageUrl="~/images/delete.gif">
                <ItemStyle HorizontalAlign="Center" VerticalAlign="Top" />
                <HeaderStyle Width="80px" />
              </telerik:GridButtonColumn>

              <%-- Some data column --%>
              <telerik:GridTemplateColumn HeaderText="Property">
                <ItemTemplate>
                  <%# Eval("PropertyName") %>
                </ItemTemplate>
                <EditItemTemplate>
                  <%-- Etc... --%>
                </EditItemTemplate>
              </telerik:GridTemplateColumn>

              <%-- Command column --%>
              <telerik:GridEditCommandColumn ButtonType="ImageButton"
                InsertImageUrl="~/Images/save.gif" InsertText="Save"
                EditImageUrl="~/Images/edit.gif" EditText="Edit"
                UpdateImageUrl="~/Images/save.gif" UpdateText="Save"
                CancelImageUrl="~/Images/cancel.gif" CancelText="Cancel"
              >
                <HeaderStyle Width="125px" />
                </telerik:GridEditCommandColumn>
            </Columns>
          </telerik:GridTableView>
        </DetailTables>
    </MasterTableView>
</telerik:RadGrid>

[Viktor Tachev]

Hello Alexander,

I tested the behavior with the code you have provided. However, the issue was still not replicated on my end. I am attaching the sample project I used for testing. Give the sample a try and let me know if I am missing something.

Regards,
Viktor Tachev
Telerik