Grid InsertItemDisplay="bottom" is breaking layout

4 posts, 0 answers
  1. Alexander
    Alexander avatar
    3 posts
    Member since:
    Aug 2012

    Posted 17 Aug 2015 Link to this post

    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?

     

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2251 posts

    Posted 19 Aug 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Alexander
    Alexander avatar
    3 posts
    Member since:
    Aug 2012

    Posted 19 Aug 2015 in reply to Viktor Tachev Link to this post

    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>
  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2251 posts

    Posted 21 Aug 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top