With GridEditActionCommand how do you position Save and Cancel buttons at top instead of bottom of form?

[Marianne]

We are using a GridColumnSettings for a grid view.

Because the data is text heavy, we are using a popup when editing it.

This puts the Save and Cancel buttons at the bottom of form.  We have a user who doesn't want to scroll down to Save. (We already have had to put Save at the top of another form with links to Top.)

Is there any way to force the buttons to appear at the top or in both places? Any suggestions welcome. 

These are the basic settings we are using:

on the grid page:

 @(Html.Kendo().Grid<TITLE_PATTERN_1>().Name("grid")
        .Sortable()
        .Editable(x => x.Mode(GridEditMode.PopUp).TemplateName("TITLEPATTERNEditor").Window(w => w.Width(700)))
        .Scrollable()
        .Filterable()
        .Resizable(r => r.Columns(true))
        .ToolBar(tools => tools.Excel().IconClass("k-icon k-i-download"))
        .Excel(excel => excel
        .FileName("TitlePatterns.xlsx")
        .Filterable(true)
        .AllPages(true)
        .ProxyURL("TitlePattern?handler=Save")
        )
          .Columns(columns => columns.LoadSettings(Model.columns)
   )
        .DataSource(ds => ds.Ajax().Events(events => events.Error("error_handler"))
        .Events(events => events.Error("error_handler"))
        .Read(r => r.Url(Url.Action() + "?handler=Read").Data("forgeryToken"))
        .Update(u => u.Url(Url.Action() + "?handler=UpdatePopUp").Data("forgeryToken"))
        .Destroy(d => d.Url(Url.Action() + "?handler=Destroy").Data("forgeryToken"))
        .Model(m =>
        {
            m.Id(id => id.Id);
            m.Field(p => p.Id).Editable(false);

        })
        .PageSize(50)
        )
        .Pageable()

          )

In the GridColumnSettings

 new GridCommandColumnSettings
            {
                Commands =
                {
                     new GridEditActionCommand()
                     {  
                         Name = "Update",
                         Text = "Update",
                         UpdateText = "Save",                         
                         CancelText = "Cancel"                         
                     },

                 },
                Width = "100px",
                Filterable = false,
                Locked = true,
                Title = "Update"
               },

And this is the template:

@Html.HiddenFor(model => model.Id)

    <div class="k-edit-label" style="padding: 10px;">
        @Html.LabelFor(model => model.TITLE_CODE)
    </div>
    <div class="k-textbox" style="padding: 10px;">
        @Html.EditorFor(model => model.TITLE_CODE)
        @Html.ValidationMessageFor(model => model.TITLE_CODE)
    </div>

    <div class="k-edit-label"  style="padding: 10px;">
        @Html.LabelFor(model => model.FIELD1)
    </div>
    <div class="k-textarea"  style="padding: 10px;">
        @Html.Kendo().TextAreaFor(model => model.FIELD1).Rows(5)
    </div>

    <div class="k-edit-label" style="padding: 10px;">
        @Html.LabelFor(model => model.FIELD2)
    </div>

    <div class="k-textarea" style="padding: 10px;">
        @Html.Kendo().TextAreaFor(model => model.FIELD2).Rows(5)
    </div>
    <div class="k-edit-label" style="padding: 10px;">
        @Html.LabelFor(model => model.FIELD3)
    </div>
    <div class="k-textarea" style="padding: 10px;">
        @Html.Kendo().TextAreaFor(model => model.FIELD3).Rows(5)
    </div>
    <div class="k-edit-label" style="padding: 10px;">
        @Html.LabelFor(model => model.FIELD4)
    </div>
    <div class="k-textarea" style="padding: 10px;">
        @Html.Kendo().TextAreaFor(model => model.FIELD4).Rows(5)
    </div>
    <div class="k-edit-label" style="padding: 10px;">
        @Html.LabelFor(model => model.FIELD5)
    </div>
    <div class="k-textarea" style="padding: 10px;">
        @Html.Kendo().TextAreaFor(model => model.FIELD5).Rows(5)
    </div>
    <div class="k-edit-label" style="padding: 10px;">
        @Html.LabelFor(model => model.FIELD7)
    </div>
    <div class="k-textarea" style="padding: 10px;">
        @Html.Kendo().TextAreaFor(model => model.FIELD7).Rows(5)
    </div>
    <div class="k-edit-label" style="padding: 10px;">
        @Html.LabelFor(model => model.FIELD8)
    </div>
    <div class="k-textarea" style="padding: 10px;">
        @Html.Kendo().TextAreaFor(model => model.FIELD8).Rows(5)
    </div>
    <div class="k-edit-label" style="padding: 10px;">
        @Html.LabelFor(model => model.NOTE1)
    </div>
    <div class="k-textarea" style="padding: 10px;">
        @Html.Kendo().TextAreaFor(model => model.NOTE1).Rows(5)
    </div>
    <div class="k-edit-label" style="padding: 10px;">
        @Html.LabelFor(model => model.NOTE2)
    </div>
    <div class="k-textarea" style="padding: 10px;">
        @Html.Kendo().TextAreaFor(model => model.NOTE2).Rows(5)
    </div>
    <div class="k-edit-label" style="padding: 10px;">
        @Html.LabelFor(model => model.NOTE3)
    </div>
    <div class="k-textarea" style="padding: 10px;">
        @Html.Kendo().TextAreaFor(model => model.NOTE3).Rows(5)
    </div>
    <div class="k-edit-label" style="padding: 10px;">
        @Html.LabelFor(model => model.NOTE4)
    </div>
    <div class="k-textarea" style="padding: 10px;">
        @Html.Kendo().TextAreaFor(model => model.NOTE4).Rows(5)
    </div>
    <div class="k-edit-label" style="padding: 10px;">
        @Html.LabelFor(model => model.NOTE5)
    </div>
    <div class="k-textarea" style="padding: 10px;">
        @Html.Kendo().TextAreaFor(model => model.NOTE5).Rows(5)
    </div>
    <div class="k-edit-label" style="padding: 10px;">
        @Html.LabelFor(model => model.NOTE6)
    </div>
    <div class="k-textarea" style="padding: 10px;">
        @Html.Kendo().TextAreaFor(model => model.NOTE6).Rows(5)
    </div> <div class="k-edit-label" style="padding: 10px;">
        @Html.LabelFor(model => model.NOTE7)
    </div>
    <div class="k-textarea" style="padding: 10px;">
        @Html.Kendo().TextAreaFor(model => model.NOTE7).Rows(5)
    </div>
    <div class="k-edit-label" style="padding: 10px;">
        @Html.LabelFor(model => model.NOTE8)
    </div>
    <div class="k-textarea" style="padding: 10px;">
        @Html.Kendo().TextAreaFor(model => model.NOTE8).Rows(5)
    </div>

 

                   

[Mihaela]

Hello Marianne,

Indeed, you could render the "Update"/"Cancel" buttons at the top of the Popup form by adding them in the custom Popup template:

//TITLEPATTERNEditor.cshtml

    <div class="k-edit-buttons k-actions-end" style="margin:0">
        <button type="button" class="k-grid-update k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary">
            <span class="k-icon k-i-check k-button-icon"></span><span class="k-button-text">Update</span>
        </button>
        <button type="button" class="k-grid-cancel k-button k-button-md k-rounded-md k-button-solid k-button-solid-base">
            <span class="k-icon k-i-cancel k-button-icon"></span><span class="k-button-text">Cancel</span>
        </button>
    </div>

    @Html.HiddenFor(model => model.Id)
    ....

According to this example, the buttons will be rendered at both places (at the top and the bottom).

If you would like to hide the default buttons that appear at the bottom, add a custom class to the "div" element that holds the buttons at the top, and hide the bottom buttons container with CSS:

//TITLEPATTERNEditor.cshtml

<style>
    .k-edit-buttons:not(.custom-form-buttons) {
        display: none;
    }
</style>


    <div class="k-edit-buttons k-actions-end custom-form-buttons" style="margin:0">
        <button type="button" class="k-grid-update k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary">
            <span class="k-icon k-i-check k-button-icon"></span><span class="k-button-text">Update</span>
        </button>
        <button type="button" class="k-grid-cancel k-button k-button-md k-rounded-md k-button-solid k-button-solid-base">
            <span class="k-icon k-i-cancel k-button-icon"></span><span class="k-button-text">Cancel</span>
        </button>
    </div>

    @Html.HiddenFor(model => model.Id)
    ....

Regards, Mihaela Progress Telerik