Getting something in the editor to be in over the grid header

[JP]

Hello,

I have an editor (type GridEditFormType.Template) which itself can open a little popup window (just a little div with position: absolute and z-index: 5000). This works well, but it is hidden behind the table header. I posted you a screenshot where you can see the popup hidden behind the header.
Just raising the z-index won't work, some how its always hidden behind the grid.
Is there an easy way to get the div to be shown over the header?

Thanks!

[Konstantin Dikov]

Hello,

When you static headers and scrolling enabled, the data table of the grid will be with overflow property set to hidden. Generally, placing a DIV element with position set to absolute will not hide that DIV below the headers, unless that element is within another element with position set to relative:

<div style="position: relative;">
    <div style="position: absolute; top: -50px; left: -50px; width: 200px; height: 200px; background-color: red;"></div>
</div>

If you need the popup window to be displayed above the headers and pass the overflow hidden of the data table, you will have to move that DIV outside the element with relative position:

<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView>
        <Columns>
            <telerik:GridEditCommandColumn></telerik:GridEditCommandColumn>
        </Columns>
        <EditFormSettings EditFormType="Template">
            <FormTemplate>
                <div style="position: relative;">
                    Test
                </div>
                <div style="position: absolute; top: -50px; left: -50px; width: 200px; height: 200px; background-color: red;"></div>
            </FormTemplate>
        </EditFormSettings>
    </MasterTableView>
    <ClientSettings>
        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
    </ClientSettings>
</telerik:RadGrid>

Hope this helps.


Best Regards,
Konstantin Dikov
Telerik