Editform above the columns names

4 posts, 1 answers
  1. Bader
    Bader avatar
    215 posts
    Member since:
    Aug 2008

    Posted 19 Jul 2011 Link to this post


    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 %>" />
                                    <telerik:GridEditCommandColumn UniqueName="EditCommandColumn1"  ItemStyle-VerticalAlign="Top" EditText="<%$ Resources:GeneralTelerikResource, TelerikRadGridEditColumnText %>">
                                    <telerik:GridTemplateColumn UniqueName="Status"  ItemStyle-VerticalAlign="Top" ItemStyle-Width="10%" HeaderStyle-Width="10%" HeaderText="Status" DataField="Status">
                                           <asp:Image ID="StatusImage" ImageUrl="~/Common/Design/Imgs/Tasks/Statuses/New.png" ToolTip="New" Width="20px" Height="20px" runat="server" />
                                    <telerik:GridBoundColumn UniqueName="Priority"  ItemStyle-VerticalAlign="Top" ItemStyle-Width="10%" HeaderStyle-Width="10%" HeaderText="Priority" DataField="Priority">
                                    <telerik:GridBoundColumn UniqueName="Title"  ItemStyle-VerticalAlign="Top" ItemStyle-Width="35%" HeaderStyle-Width="35%" HeaderText="Title" DataField="Title">
                                    <telerik:GridBoundColumn UniqueName="Comment"  ItemStyle-VerticalAlign="Top" ItemStyle-Width="30%" HeaderStyle-Width="30%" HeaderText="Comment" DataField="Comment">
                                    <telerik:GridDateTimeColumn UniqueName="EndDate"  ItemStyle-VerticalAlign="Top" ItemStyle-Width="15%" HeaderStyle-Width="15%" HeaderText="EndDate" DataField="EndDate">
                                     <telerik:GridButtonColumn ConfirmText="<%$ Resources:GeneralTelerikResource, TelerikRadGridDeleteColumnConfirmText %>"  ItemStyle-VerticalAlign="Top" ConfirmDialogType="RadWindow"
                                        ConfirmTitle="<%$ Resources:GeneralTelerikResource, TelerikRadGridDeleteColumnConfirmTitle %>" ButtonType="ImageButton" CommandName="Delete" Text="<%$ Resources:GeneralTelerikResource, TelerikRadGridDeleteColumnText %>"
                                        <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />
                                <EditFormSettings UserControlName="~/OU/Tasks/c/CreateTask/SubUserControl.ascx" EditFormType="WebUserControl">
                                    <EditColumn UniqueName="EditCommandColumn1">

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

  2. Answer
    Vasil avatar
    1640 posts

    Posted 22 Jul 2011 Link to this post

    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,
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  3. Timothy
    Timothy avatar
    12 posts
    Member since:
    Jun 2014

    Posted 11 Oct 2019 Link to this post

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

  4. Eyup
    Eyup avatar
    3962 posts

    Posted 16 Oct 2019 Link to this post

    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:

    2. Use a PopUp edit form and place it directly above the grid using CSS and/or JavaScript:

    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top