How to change update and cancel button templates

[Marc]

I have used templates to alter the styling of my inline edit and delete buttons. How can I now change the update and cancel buttons to match?

[Tsvetomir]

Hi Marc,

If you would like to modify the toolbar of the grid, I could recommend using the toolbar template option:

https://demos.telerik.com/aspnet-core/grid/toolbar-template

To include the built-in buttons, you should include their respective HTML within the template. For example, the template has to feature a button with any of the following classes:

k-grid-add
k-grid-save-changes
k-grid-cancel-changes

Basically, those classes are enough for the grid to wire its events.

 

Kind regards,
Tsvetomir
Progress Telerik

[Marc]

@Tsvetomir - thanks for taking the time to respond to my question, however, I did not inquire about modifying the toolbar. If you had taken the time to read the request, you would have seen that I was asking about the "inline" buttons.

I think it may be time to rip all Telerik controls from my projects. They are simply too time-consuming to learn how to use in a real-world application and too convoluted to implement. The amount of time I have wasted trying to accomplish the most basic of functionality...it's heart-breaking.

[Tsvetomir]

Hi, Marc, thank you for letting me know that you would like to update the buttons that are shown when the row is in edit mode. If the styling is applicable only to the CSS and not for the rendering, I could recommend using the following selectors:

    <style>
      .k-grid-edit-row .k-command-cell .k-grid-update{
        background-color:red;
      }

      .k-grid-edit-row .k-command-cell .k-grid-cancel{
        background-color:red;
      }
    </style>

If the rendering should be updated, you should handle the Edit event and adjust the HTML accordingly via the respective JavaScript/jQuery methods.

 

 

[Janko]

Is this still applicable? I've tried this but it doesn't work for me.

@(
                Html.Kendo().Grid<ToDestination>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.ForeignKey(c => c.TravelTypeId, ds => ds.Read(read => read.Url(Url.Page("Create", "TravelTypes"))), "TravelTypeId", "TravelTypeName", true).Title("Vrsta putovanja")
                    .EditorTemplateName("TravelTypeEditor"); // Specify a custom editor template for the TravelType dropdown.

                    columns.ForeignKey(c => c.CountryId, ds => ds.Read(read => read.Url(Url.Page("Create", "Countries"))), "CountryId", "CountryName", true).Title("Država")
                    .EditorTemplateName("CountryEditor"); // Specify a custom editor template for the Country dropdown.

                    columns.ForeignKey(c => c.PlaceId, ds => ds.Read(read => read.Url(Url.Page("Create", "Places"))), "PlaceId", "PlaceName", true).Title("Mjesto")
                    .EditorTemplateName("PlaceEditor"); // Specify a custom editor template for the Place dropdown.

                    columns.ForeignKey(c => c.CenterId, ds => ds.Read(read => read.Url(Url.Page("Create", "Centers"))), "CenterId", "CenterName", true).Title("Centar")
                    .EditorTemplateName("CenterEditor"); // Specify a custom editor template for the Center dropdown.

                    columns.Command(command =>
                    {
                        command.Edit().Text("Uredi").HtmlAttributes(new { @class = "custom-edit-button" });
                        command.Destroy().Text("Izbriši").HtmlAttributes(new { @class = "custom-remove-button" });
                    });
                })
                .ToolBar(toolbar =>
                {
                    toolbar.Create().Text("Novi").HtmlAttributes(new { @class = "k-grid-add" });
                })
                .Editable(editable => editable.Mode(GridEditMode.InLine))
                .Pageable()
                .Sortable()
                .Scrollable()
                .DataSource(ds => ds.Ajax()
                .Create(c => c.Url("/TravelOrders/Create?handler=Create").Data("forgeryToken"))
                .Read(r => r.Url("/TravelOrders/Create?handler=Read").Data("forgeryToken"))
                .Update(u => u.Url("/TravelOrders/Create?handler=Update").Data("forgeryToken"))
                .Destroy(d => d.Url("/TravelOrders/Create?handler=Destroy").Data("forgeryToken"))
                .Events(e => e.Error("error_handler"))
                .Model(m =>
                {
                    m.Id(id => id.ToDestinationId);
                }))
                .HtmlAttributes(new { style = "height: 20rem;" })
                )

.k-grid-toolbar .k-grid-add {
    color: #fff;
    background-color: rgb(0, 191, 0);
    border-color: rgb(0, 191, 0);
}

    .k-grid-toolbar .k-grid-add:hover {
        color: #fff;
        background-color: rgb(0, 127, 0);
        border-color: rgb(0, 127, 0);
    }

.custom-edit-button {
    color: #fff !important;
    background-color: rgb(0, 0, 191) !important;
    border-color: rgb(0, 0, 191) !important;
}

    .custom-edit-button:hover {
        color: #fff !important;
        background-color: rgb(0, 0, 127) !important;
        border-color: rgb(0, 0, 127) !important;
    }

.custom-remove-button {
    color: #fff !important;
    background-color: rgb(191, 0, 0) !important;
    border-color: rgb(191, 0, 0) !important;
}

    .custom-remove-button:hover {
        color: #fff !important;
        background-color: rgb(127, 0, 0) !important;
        border-color: rgb(127, 0, 0) !important;
    }

I've successfully changed the styling of create, edit and destroy buttons but I haven't figured out how to change "save" and "cancel" buttons. Additionally, save and cancel buttons have edit button styling applied to them.

How to change styling and text of save and cancel buttons?

[Alexander]

Hi Janko,

Thank you for reaching out and for taking extra time and effort to share the CSS rules that cause the stylization falters to the embedded Grid commands.

Generally, as of the 2023 R1 SP1 release we have employed a majority of rendering changes with the core aim of unifying our rendering in order to support our new ThemeBuilder Pro tool. You can find a list of all the affected components in the following resource:

Telerik UI for ASP.NET Core R1 2023 SP1 (Breaking Changes)

For your scenario, in particular, the following changes to the common classes rendered by Kendo have been made to the commands:

• Edit - k-grid-edit-command instead of k-grid-edit.
• Save - k-grid-save-command instead of k-grid-update.
• Cancel - k-grid-cancel-command instead of k-grid-cancel.
• Remove - k-grid-remove-command instead of k-grid-delete.

With that in mind, I would recommend altering the employed CSS rules in the following manner:

<style>
    .k-grid-toolbar .k-grid-add {
        color: #fff;
        background-color: rgb(0, 191, 0);
        border-color: rgb(0, 191, 0);
    }

    .k-grid-toolbar .k-grid-add:hover {
        color: #fff;
        background-color: rgb(0, 127, 0);
        border-color: rgb(0, 127, 0);
    }
    .k-grid-save-command{
        color: #fff;
        background-color: rgb(0, 127, 0) !important;
        border-color: rgb(0, 127, 0) !important;
    }
    .k-grid-save-command: hover{
        color: #fff;
        background-color: rgb(0, 127, 0) !important;
        border-color: rgb(0, 127, 0) !important;
    }
     .k-grid-cancel-command{
        color: #fff;
        background-color: rgb(191, 0, 0) !important;
         border-color: rgb(191, 0, 0) !important;
    }
     .k-grid-cancel-command :hover{
        color: #fff;
        background-color: rgb(191, 0, 0) !important;
         border-color: rgb(191, 0, 0) !important;
    }
    .custom-edit-button {
        color: #fff;
        background-color: rgb(0, 0, 191);
        border-color: rgb(0, 0, 191);
    }

    .custom-edit-button:hover {
        color: #fff;
        background-color: rgb(0, 0, 127);
        border-color: rgb(0, 0, 127);
    }

    .custom-remove-button {
        color: #fff !important;
        background-color: rgb(191, 0, 0) !important;
        border-color: rgb(191, 0, 0) !important;
    }

    .custom-remove-button:hover {
        color: #fff !important;
        background-color: rgb(127, 0, 0) !important;
        border-color: rgb(127, 0, 0) !important;
    }
</style>    

For your convenience, here is a Telerik REPL example for you that tackles the aforementioned CSS rules:

Telerik REPL for ASP.NET Core Example

[Janko]

Thank you for your answer Alexander.

How would I go about changing the text of Save and Cancel buttons?

[Alexander]

In order to change the text of the Cancel command button, a possible recommendation would be to utilize the Columns.Command.Edit.CancelText() API configuration:

.Columns(columns =>
{
    {
        command.Edit().Text("Uredi").CancelText("My Cancel");
    });
})

For the save command, on the other hand, a more programmatic approach would be required by:

• Subscribing to the Edit event of the Grid:
  

.Events(events => events.Edit("onEdit"))

• Within the handler, manually getting a hold of the save command for the currently edited row by using conventional jQuery selectors:
  

<script type="text/javascript">
        function onEdit(e){
            var row = $(`tr[data-uid=${e.model.uid}]`);
            var saveBtn = $(row).find(".k-grid-save-command");
            $(saveBtn).find(".k-button-text").text("My Save");
        }
</script>

This should then produce the following visual incarnation for the "Save" and "Cancel" commands:

For your convenience, here is another Telerik REPL example that tackles this approach:

Telerik REPL for ASP.NET Core Example (Revised)

I hope this helps.

[Janko]

columns.Command(command =>
                    {
                        command.Edit().Text("Uredi").UpdateText("Spremi").CancelText("Odustani").HtmlAttributes(new { @class = "custom-edit-button" });
                        command.Destroy().Text("Izbriši").HtmlAttributes(new { @class = "custom-remove-button" });
                    });

There is also a possibility to use UpdateText() to change the name of the "Save" button and CancelText() to change "Cancel" button (as you have already demonstrated).

Thank you :)