how to add columns to Kendo Grid that is filled with remote data?
Question
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.
1 answers
solution1
4 ACCPTED 2013-01-16 21:31:18
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 ).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.