Trigger telerik edit/update/create actions with external button click

[Andrés]

Recently I've been working with telerik devcraft for the last couple of weeks, I'm interested in using the grid controller to display data, I've reached the point where I'm working with CRUD operations and I need to led the user make delete, create and edit operations of the displayed rows my client really doesn't like the way the controller displays the edit and delete buttons next to the rows, he would like to be available to invoke the edit and delete operations via external html buttons on the bottom of the page

 

 

[Dimiter Madjarov]

Hello Andrés,

You could achieve this task by invoking the Grid API methods when the external buttons are clicked:

editRow - http://docs.telerik.com/KENDO-UI/api/javascript/ui/grid#methods-editRow
removeRow - http://docs.telerik.com/KENDO-UI/api/javascript/ui/grid#methods-removeRow
saveRow - http://docs.telerik.com/KENDO-UI/api/javascript/ui/grid#methods-saveRow

Regards,
Dimiter Madjarov
Telerik

[Andrés]

Hi, 

It doesn't work properly it turns out than when the user selects a row and then presses the edit/new button it creates a loop that locks the create/edit popover. on this point is impossible to either create or edit a row 

[Dimiter Madjarov]

Hello Andrés,

From the provided screenshot it is not clear what is the reason for the described behavior. Please send us small isolated runnable example that demonstrates it, so we could inspect it and provide assistance.

Regards,
Dimiter Madjarov
Telerik

[Priyanka]

Can you please provide a sample to trigger the whole popup with an external link is clicked (present in kendo grid)and the edit pop up appears? TIA

[Alex Hajigeorgieva]

Hi, Priyanka,

The Kendo UI grid documentation reference by my colleague features runnable examples throughout. You can bring up the example by either clicking preview or edit in Dojo for a more convenient testing:




Since this is a method, you may call it in a button click event handler, for example:

$(".edit").on("click", function(){
    grid.editRow($("#grid tr:eq(1)"));
};)

Here is a simple example which demonstrates this:

http://dojo.telerik.com/@bubblemaster/EGikOTis

I have enhanced it with the addRow() method which brings up an empty popup window for new records creation:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/addrow

Kind Regards,
Alex Hajigeorgieva
Progress Telerik