In addition to the standard edit/delete buttons I have a custom command button defined in a kendo grid:
{ name: "submit", text: " ", visible: "isSubmitable", click: submitItem }
The button is assigned an icon on databind:
$(".k-grid-submit").prepend("<span class='k-icon k-i-redo' style='color: blue'></span>");
But if I click the edit button and then cancel, the custom button loses its icon. One workaround suggested by a Telerik Admin is to refresh the datasource on the cancel event. This works but is ridiculous, particularly for large datasets, requiring a request to the server to get the same data that is already in the datasource.
One thing I tried was attaching the class to the button in the cancel event handler but at that point the button doesn't exist:
onCancel: function (e) {
// NB: following does not work - submit button doesn't exist until after this function is called
const currentRow = $(e.container).closest("tr");
currentRow.find(".k-grid-submit").prepend("<span class='k-icon k-i-redo' style='color: blue'></span>");
Another suggestion was to set the command text using jQuery:
col.Command(c => c.Custom("History").Click("showHistory")).Text($"<span class='k-icon k-i-reorder'></span> History");
Which would be great except the mvvm approach to defining the grid doesn't appear to provide an option for binding the button text property. Currently I'm using the workaround of refreshing the datasource from the server but it would be helpful to be able to resolve this without a server round-trip.
