CODEWITHSUNDEEP
javascriptgridviewasp.net-mvc-4kendo-ui
Uriel Arvizu
Uriel Arvizu

Reputation: 1916

how to add columns to Kendo Grid that is filled with remote data?

So I have this view

<!DOCTYPE html>

<html>
<head >
    <link href="<%: Url.Content("~/Content/kendo/2012.3.1114/kendo.common.min.css")%>" rel="stylesheet" type="text/css" />
    <link href="<%: Url.Content("~/Content/kendo/2012.3.1114/kendo.default.min.css")%>" rel="stylesheet" type="text/css" />
    <title><%: ViewBag.GestionTitle %></title>
</head>
    <body>


        <h1><%: ViewBag.GestionTitle %></h1>
        <div id="usuariosGrid"></div>
        <button id="addUsuario" type="button" class="k-input"><%: ViewBag.Agregar %></button>

        <script src="<%: Url.Content("~/Scripts/jquery-1.7.1.min.js")%>"></script>
        <script src="<%: Url.Content("~/Scripts/kendo/2012.3.1114/kendo.web.min.js")%>"></script>
        <script src="<%: Url.Content("~/Scripts/usuario/usuario.js")%>"></script>
    </body>
</html>

The div usuariosGrid is filled with remote data with the following function:

$(function () {
    var ds = new kendo.data.DataSource({
        transport: {
            read: {
                url: "http://127.0.0.1:81/SismosService.svc/usuario/index",
                dataType: "json"
            }
        },
        schema: {
            data: "Response"
        },
    });
    $("#usuariosGrid").kendoGrid({
        columns: ["UsuarioId", "Nombre", "ApellidoP", "ApellidoM"],
        dataSource: ds
    });
});

This creates a grid with the columns specified in the function. Now what I want to do is for every row inserted also to add a column with two hyperlinks, one that would redirect me to an Edit page and another one that would redirect me to a Delete page.

How can I do this? I've looked for examples but haven't been able to find anything that resembles what I'm trying to achieve. Any help will be appreciated.

Upvotes: 0

Views: 2039

Answers (1)

OnaBai
OnaBai

Reputation: 40887

Basically you have to add a column to the columns definition of your kendoGrid. This new cell will contain the links (or even some buttons).

For this you would probably be interested on using columns.template field where you can merge HTML with variable data, for example, data from row that you editing or deleting.

Instead of a link you might define a custom action by doing something like:

columns : [
    ...
    { command: { text: "Edit", click: editRecord }, title: " ", width: "140px" }
]

and in editRecord you can do whatever you want (see KendoUI example here).

Upvotes: 4

Related Questions