Custom Command Kendo UI MVC 5 - Error Server binding

Question

I try to add a button detail on a grid according KENDO example, and to execute throws me the error: Custom command routes is available only for server binding.

This is my view and contolador.

@(Html.Kendo().Grid<PedidosOnline.Models.Proveedor>()
.Name("Proveedores")
.Selectable()
.Columns(columns =>
{
    columns.Bound(c => c.ID);
    columns.Bound(c => c.sRazonSocial);
    columns.Bound(c => c.sCodigoTrib);
    columns.Bound(c => c.sDireccion);
    columns.Bound(c => c.sTelefono);
    columns.Bound(c => c.sEmail);
    columns.Bound(c => c.bActivo);
    columns.Command(command =>
    {
        command.Edit();
        command.Destroy();
        // Declare a custom command named "showDetails"
        command.Custom("showDetails")
                     .Text("Show details")
                     .Action("ShowDetails", "Proveedores")
                     .DataRouteValues(route =>
                     {
                         route.Add(o => o.ID).RouteKey("ID");
                     });
    }).Width(200);
})
.DataSource(datasourse => datasourse
    .Ajax()
    .Events(events => events.Error("errorHandler"))
    .Model(model =>
    {
        model.Id(prov => prov.ID);
        model.Field(prov => prov.ID).Editable(false);
    })
    .Read(read => read.Action("GetAllProveedores", "Proveedores"))
    .Update(update => update.Action("UpdateProveedores","Proveedores"))
    .Create(create => create.Action("CreatePorveedores","Proveedores"))
    .Destroy(destory=> destory.Action("DeleteProveedores","Proveedores"))
)
.ToolBar(toolbar => toolbar.Create())
.ToolBar(tools => tools.Excel())
.ToolBar(tools => tools.Pdf())

.Editable(editable => editable.Mode(GridEditMode.InLine))
//.Editable(editable => editable.Mode(GridEditMode.InCell))
//.Editable(editable => editable.Mode(GridEditMode.PopUp))

.Sortable()
.Selectable(selectable => selectable
        .Mode(GridSelectionMode.Multiple)
        //.Type(GridSelectionType.Cell)
        )

)

--------- CONTROLLER -----------

public ActionResult Index()
    {
        return View();
    }
    public ActionResult GetAllProveedores([DataSourceRequest] DataSourceRequest request)
    {
        try
        {
            //var query = db.Proveedores.Select(p => new { ID = p.ID, sRazonSocial = p.sRazonSocial });
            var query = from p in db.Proveedores
                        select new 
                        {
                             ID = p.ID, 
                             sRazonSocial = p.sRazonSocial
                        };

            return Json(query.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }
        catch (Exception ex)
        {                
            //throw;
            return Json(ex.Message);
        }
    }

    public ActionResult ShowDetails(int ID)
    {
        var detalles = db.Proveedores.FirstOrDefault(o => o.ID == ID);
        return View(detalles);
    }

Answer 1

Solution:

   @(Html.Kendo().Grid<PedidosOnline.Models.Proveedor>()
.Name("Proveedores")
.Selectable()
.Columns(columns =>
{
    columns.Bound(s => s.ID).Filterable(false);
    columns.Bound(c => c.sRazonSocial);
    columns.Bound(c => c.sCodigoTrib);
    columns.Bound(c => c.sDireccion);
    columns.Bound(c => c.sTelefono);
    columns.Bound(c => c.sEmail);
    columns.Bound(c => c.bActivo);

    columns.Template(@<text></text>)
        .ClientTemplate(@"<a class=""btn btn-info btn-xs k-grid-edit"" href=""\#""><i class='fa fa-edit'></i></a> " +
                        @"<a class=""btn btn-danger btn-xs k-grid-delete"" href=""\#""><i class='fa fa-trash'></i></a> " +
                        @"<a class=""btn btn-warning btn-xs k-grid-detalle"" href='javascript:;' onclick='detalleProv();'""><i class='fa fa-eye'></i></a>").Width(100);


})
.DataSource(datasourse => datasourse
        .Ajax()
        .Events(events => events.Error("errorHandler"))
        .Model(model =>
        {
            model.Id(prov => prov.ID);
            model.Field(prov => prov.ID).Editable(false);
        })
        .Read(read => read.Action("GetAllProveedores", "Proveedores"))
        .Update(update => update.Action("UpdateProveedores", "Proveedores"))
        .Create(create => create.Action("CreateProveedores", "Proveedores"))
        .Destroy(destory => destory.Action("DeleteProveedores", "Proveedores"))
)
.ToolBar(toolbar => toolbar.Create().HtmlAttributes(new { @class = "btn btn-primary btn-xs pull-right" }))
.ToolBar(tools => tools.Excel().HtmlAttributes(new { @class = "btn btn-primary btn-xs pull-right" }))
.ToolBar(tools => tools.Pdf().HtmlAttributes(new { @class = "btn btn-primary btn-xs pull-right" }))

    .Events(e => e.Edit("HideGridFields"))
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Sortable()
.Selectable()
.Navigatable()
.AllowCopy(true)
.ColumnMenu()
.Resizable(resizable => resizable.Columns(true))
.Reorderable(reorderable => reorderable.Columns(true))
.Filterable()
.Groupable()
.Pageable(pageable =>
    {
        pageable.Refresh(true);
        pageable.PageSizes(true);
    }
)    

/****** Seleccionar una fila del registro *******/
function getSelected() {
    var grid = $("#Proveedores").data("kendoGrid");

    if (grid != null) {
        var selectedRow = grid.dataItem(grid.select());
        if (selectedRow != null) {
            return selectedRow.ID;
        } else {
            bootbox.alert('Seleccione un Registro de la Grilla');
            return 0;
        }
    }
    return 0;
};

/****** Mostrar Modal de proveedores a partir del registro seleccionado *******/
function detalleProv (e) {
    //e.preventDefault();
    var modalHtml;
    var idProveedor = getSelected();

    if (idProveedor == 0) { return false;}
    $.ajax({
        mimeType: "text/html",
        url: '/Proveedores/ShowDetails?&ID='+idProveedor,
        type: 'GET',
        contentType: "application/json;charset=utf-8",
        async: false,
        success: function (data) {
            modalHtml = data;
        }
    });

    bootbox.dialog({
        message: modalHtml,
        title: "",

    });
}

Answer 2

As the messages describes the Action command is available only for Server binding. If you want to create a buttom with which points to a different view when using Ajax binding you can use a template column with a hyperlink inside of it.

columns.Template(@<text></text>).ClientTemplate("<a href='"+Url.Action("ShowDetails","Proveedores")+"/#=ID#'>Show details</a>");