Add additional button to Grid Popup Editor Template

1 Answer 248 Views
Button Editor Grid
Bermuda
Top achievements
Rank 1
Iron
Iron
Bermuda asked on 23 Apr 2024, 07:11 PM

I have review this form discussions but cannot get this working.

How to add a delete button to editor template Grid Popup? in Kendo UI for jQuery | Telerik Forums

 

How can I add an additional update button inside of my grid popup editor template? I have the exact same requirements as discussed in 

Add extra button to Grid popup editor template in UI for ASP.NET MVC | Telerik Forums

Perhaps little different as I am using a custom popup editor template called RecordEdit.cshtml as outlined in  ASP.NET MVC Data Grid Component Use Custom Popup Editors - Telerik UI for ASP.NET MVC
@(Html.Kendo().Grid//....
  //....
 .Events(ev=>ev.Edit("onEdit"))  
 .Editable
  (
      editable => editable.Mode(GridEditMode.PopUp)
      .TemplateName("RecordEdit")
      .Window(e => e.Width(1400).Height(1200))
  )
)
 
function onEdit() {
    $('<a class="k-button k-button-icontext k-grid-delete" href="\\#"><span class="k-icon k-delete"></span>Delete</a>').insertAfter(".k-grid-cancel");
}
Any assistance would be most helpful.

1 Answer, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 26 Apr 2024, 02:36 PM

Hello,

There is a support ticket open on the same topic, but I'll re-post the solution here, as it could be helpful to someone from the community who is after the same scenario:

You can use the Edit event handler of the Grid to add a button next to the popup Save and Cancel buttons. Here's how:

1. Attach the handler:

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

2. In the handler find the default Cancel button and insert a new button after it:

function onEdit(e) {
    $("<button class='k-button k-button-md k-button-solid k-rounded-md'>My Button</button>").insertAfter(".k-grid-cancel-command");
}

The Save and Cancel buttons can be found with the following selectors:

$(".k-grid-save-command")

and

$(".k-grid-cancel-command")

So, for example to hide the Cancel button, you can do the following:

$(".k-grid-cancel-command").hide();


Regards,
Ivan Danchev
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.

Adrian Segovia
Top achievements
Rank 1
commented on 17 Oct 2024, 07:41 PM

How do I find the same buttons on the popup editor .k-grid-update is no longer working. I can see .k-grid-save-command only for inline editing
Ivan Danchev
Telerik team
commented on 22 Oct 2024, 12:52 PM

Adrian,

In the current version (2024.3.1015), you can get the Save and Cancel buttons in the Grid's popup editor like this:

<script>
    function onEdit(e) {
        var updateBtn = e.container.parent().find('button[ref-update-button]'); 
        var cancelBtn = e.container.parent().find('button[ref-cancel-button]');

        updateBtn.css("background-color", "lightgreen");
        cancelBtn.css("background-color", "lightcoral");
    }
</script>

The following example shows this in action - custom background colors are applied to both buttons: https://netcorerepl.telerik.com/celkQmFm498B4qN846

Tags
Button Editor Grid
Asked by
Bermuda
Top achievements
Rank 1
Iron
Iron
Answers by
Ivan Danchev
Telerik team
Share this question
or