Editform above the columns names

[Bader]

Hello,

Can I change the radgrid design in order to display the editform above the columns names (Plaese view the attached image)?
Here is my code:

<telerik:RadGrid ID="TasksRadGrid" runat="server" PageSize="20" AllowFilteringByColumn="false" ValidationGroup="NewTaskValidationGroup"
                        GridLines="None" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" Width="700px"
                        ShowStatusBar="true" OnPreRender="TasksRadGrid_PreRender" OnNeedDataSource="TasksRadGrid_NeedDataSource" OnUpdateCommand="TasksRadGrid_UpdateCommand" OnInsertCommand="TasksRadGrid_InsertCommand" OnDeleteCommand="TasksRadGrid_DeleteCommand">
                        <MasterTableView GridLines="None" Width="700px" CommandItemDisplay="Top" DataKeyNames="TID">
                            <CommandItemSettings AddNewRecordText="<%$ Resources:GeneralTelerikResource, TelerikRadGridAddNewRecordText %>"
                                                    RefreshText="<%$ Resources:GeneralTelerikResource, TelerikRadGridRefreshText %>" />
                            <Columns>
                                <telerik:GridEditCommandColumn UniqueName="EditCommandColumn1"  ItemStyle-VerticalAlign="Top" EditText="<%$ Resources:GeneralTelerikResource, TelerikRadGridEditColumnText %>">
                                </telerik:GridEditCommandColumn>
                                <telerik:GridTemplateColumn UniqueName="Status"  ItemStyle-VerticalAlign="Top" ItemStyle-Width="10%" HeaderStyle-Width="10%" HeaderText="Status" DataField="Status">
                                   <ItemTemplate>
                                       <asp:Image ID="StatusImage" ImageUrl="~/Common/Design/Imgs/Tasks/Statuses/New.png" ToolTip="New" Width="20px" Height="20px" runat="server" />
                                   </ItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridBoundColumn UniqueName="Priority"  ItemStyle-VerticalAlign="Top" ItemStyle-Width="10%" HeaderStyle-Width="10%" HeaderText="Priority" DataField="Priority">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="Title"  ItemStyle-VerticalAlign="Top" ItemStyle-Width="35%" HeaderStyle-Width="35%" HeaderText="Title" DataField="Title">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="Comment"  ItemStyle-VerticalAlign="Top" ItemStyle-Width="30%" HeaderStyle-Width="30%" HeaderText="Comment" DataField="Comment">
                                </telerik:GridBoundColumn>

                                <telerik:GridDateTimeColumn UniqueName="EndDate"  ItemStyle-VerticalAlign="Top" ItemStyle-Width="15%" HeaderStyle-Width="15%" HeaderText="EndDate" DataField="EndDate">
                                </telerik:GridDateTimeColumn>
                                 <telerik:GridButtonColumn ConfirmText="<%$ Resources:GeneralTelerikResource, TelerikRadGridDeleteColumnConfirmText %>"  ItemStyle-VerticalAlign="Top" ConfirmDialogType="RadWindow"
                                    ConfirmTitle="<%$ Resources:GeneralTelerikResource, TelerikRadGridDeleteColumnConfirmTitle %>" ButtonType="ImageButton" CommandName="Delete" Text="<%$ Resources:GeneralTelerikResource, TelerikRadGridDeleteColumnText %>"
                                    UniqueName="DeleteColumn">
                                    <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />
                                </telerik:GridButtonColumn>
                            </Columns>
                            <EditFormSettings UserControlName="~/OU/Tasks/c/CreateTask/SubUserControl.ascx" EditFormType="WebUserControl">
                                <EditColumn UniqueName="EditCommandColumn1">
                                </EditColumn>
                            </EditFormSettings>
                        </MasterTableView>
                    </telerik:RadGrid>

Please, I need your help,
It is appreciated to send me the modified code.

Regards,
Bader 

[Vasil]

Hi Bader,

The grid does not provide such a build in functionality for placing the edit form above the column names. You could imitate the same user appearance using RadToolBar instead of the command item. Then place ExternalEditForm, and use the grid in the bottom of all.

I hope this helps.

All the best,
Vasil
the Telerik team

[Timothy]

Just wondering if this still holds true?  I'd also like to place the edit form above the column header.

[Eyup]

Hi Timothy,

 

I am afraid this requirement is still not provided built-in and forcing this change can break the layout of the grid. Nevertheless, you can log this idea as a Feature Request in our Public Portal:

Currently, you can use the following options:

1. Use an external edit form as suggested previously by my colleague Vasil, similar to this live sample:
https://demos.telerik.com/aspnet-ajax/dataform/application-scenarios/integration-with-radgrid/defaultcs.aspx

2. Use a PopUp edit form and place it directly above the grid using CSS and/or JavaScript:
https://www.telerik.com/forums/context-menu---open-a-pop-up#Qe9fJgzWrE2DhYPWX7OkCQ

Regards,
Eyup
Progress Telerik