Añadir botón en columna del grid Telerik Kendo MVC

En esta fantástica suite de Telerik, podemos encontrar un grid completamente configurable y hoy voy  a apuntar cómo añadir un botón como columna, que nos puede servir para llamar al Controller para que ejecute su acción y luego añadiré un mensajito de confirmación en javascript. Vamos allá:

VIEW (no completa):

 @(Html.Kendo().Grid<RealCourseViewModel>()
.Name(“grid”)
          .Columns(columns =>
{
              columns.Bound(c => c.Code);
columns.Bound(c => c.Name);
              columns.Bound(c => c.Id).Title(“”).ClientTemplate(“<text><a href='” + @Url.Action(“Edit”) + “/#:data.Id#'</a>Ver</text>”).Width(70).Filterable(false);
//AQUÍ EL BOTÓN
              columns.Command(command => command.Custom(“Acción”).Click(“clickAction”)).Width(180);
})
y el javascript:
 function clickAction(e) {
e.preventDefault();

        var tr = $(e.target).closest(“tr”);

// get the data bound to the current table row
var dataItem = this.dataItem(tr);

        $.ajax({
type: “POST”,
url: ‘@Url.Action(“Metodo_Controller”)’,
content: “application/json; charset=utf-8”,
dataType: “json”,
data: { id: dataItem.Id },
success: function (d) {
if (d.Success === “true”) {
                    //borro la fila del botón… por hacer algo
var grid = $(“#grid”).data(“kendoGrid”);
grid.dataSource.remove(dataItem);
grid.dataSource.sync();
}
else {
alert(“ERROR.”);
}
},
error: function (xhr, textStatus, errorThrown) {
alert(“ERROR.”);
}
});

 

}

y el CONTROLLER:
 [HttpPost]
public JsonResult Metodo_Controller(int id)
{
           //aquí haremos las virguerías…
var result = new { Success = “true” };
return Json(result);
        }
Pues ya está, así de simple… me encanta Telerik… ¿se nota?
🙂
Anuncios

2 comentarios en “Añadir botón en columna del grid Telerik Kendo MVC

  1. Ulises dijo:

    Una pregunta en un command agreugé un template que contiene una condición IF, pero al cargar el grid me dice que la variable a evaluer en la condición no está definida, dicha variable está dentro de mi datasource. Cómo pudiera realizar esta condición?

    {
    command:
    {
    text: “Tarea”,
    click: function (e) {

    console.log(“Hola”)
    },
    template: ‘#if(Comentario != 0){# # } else {# #} #’,
    },
    title: “Tarea”,
    width: 80,
    headerAttributes: { style: “text-align: center; vertical-align: middle; white-space: pre-wrap;” },
    attributes: { class: “text-center” },

    },

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s