[Solved] Custom Edit Button for Grid

[Sushruth]

Was wondering if there is way to attach javascript to the grid edit button , without having the need to databind it.

ie the code  here http://demos.telerik.com/aspnet-mvc/razor/grid/clientsideevents does show how to associate javascript to the edit button , but then it would not work if we remove   .Update("_SaveAjaxEditing", "Grid"). The end goal is to have custom edit UI for the grid ( or rather not model centric edit UI). Thanks Sush

[Atanas Korchev]

Hello Sushruth,

 If you want to implement custom editing UI you need an entirely custom edit button. This means that you also should update the model from your own code as you can't use the grid's update capabilities for that.

 If you still want to create a custom edit command you can use a template column (set Template or ClientTemplate depending on how your grid is bound - server/ajax). In the template define a new button or hyperlink which upon clicking will navigate to a new page (or display a popup window). Here is a sample implementation:

server bound grid:

columns.Template(c => 
{
     %>
     <%= Html.ActionLink("Edit", "Edit", "Home", new { id = c.ID }) %>
     <%
});

ajax bound grid:

columns.Temaplate(c => {}).ClientTemplate("<a href='/Home/Edit/<#= ID #>'>Edit</a>");

 If you just want to customize the edit form you can define a customer editor template for your model. This code library shows how to do it.

All the best,
Atanas Korchev
the Telerik team

[Victor]

I was just wanting to get the same edit/details/delete buttons from the default MVC 3 scaffold.

This post was really helpful.  Did not realize there was no way to do it other than a custom template.

Hope my code snippets below help someone.

Regards,
Vic

                                                columns.Template(
                                                    @<text>
                                                         
                                                            <a href="/Program/Edit/@item.Id">Edit</a> |


                                                            <a href="/Program/Details/@item.Id">Details</a> |


                                                            <a href="/Program/Delete/@item.Id">Delete</a>
                                                         
                                                    </text>
                                                ).Title("Actions");