<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 250,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field:"OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
width: 100,
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name",
width: 200
}, {
field: "ShipCity",
title: "Ship City"
}
]
});
});
</script>
No seu controller você vai criar um método que retorna um JSON
public JsonResult....
Depois altera o Read da grid:
http://demos.kendoui.com/service/Northwind.svc/Orders
Utiliza o @Url.Action para mapear o caminho do seu jsonresult
Altera também o type de oData para Json
Assim, tenha em mente o seguinte:
- Vai escrever bastante JavaScript (A não ser que compre a suite completa, que tem os Helpers do MVC)
- Vai precisar entender, fazer vários exemplos, começar do básico.
Abraços,
Se sua questão foi respondida, favor marcar.
André Baltieri
MTAC – Microsoft Technical Audience Contributor
Twitter: @andrebaltieri
Blog: http://andrebaltieri.net
Site: http://sismat.com.br
André,
obrigado mas eu peguei este seu código e sobrescrevi na minha engine razor e deu erro ao rodar: Erro em tempo de execução do Microsoft JScript: O objeto não oferece suporte à propriedade ou método 'kendoGrid'
Veja o source da pagina:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JOGOS HD - My ASP.NET MVC Application</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="../../Scripts/kendo.all.min.js" type="text/javascript"></script>
<script src="../../Scripts/kendo.web.min.js" type="text/javascript"></script>
<script src="../../Scripts/kendo.grid.min.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.5.3.js"></script>
</head>
<body>
<!-- <p class="site-title"><a href="/">your logo here</a></p>-->
<div id="body">
<section class="content-wrapper main-content clear-fix">
<div id="header">
<h1>
ASP.NET MVC STORE </h1>
<ul id="navlist">
<li class="first"><a href="/" id="current">Home</a></li>
<li><a href="/Store/">Store</a></li>
<li><a href="/JogosHd/">Jogos HD</a></li>
</ul>
</div>
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 250,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
width: 100,
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name",
width: 200
}, {
field: "ShipCity",
title: "Ship City"
}
]
});
});
</script>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2012 - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
<script src="/Scripts/jquery-1.7.1.js"></script>
</body>
</html>
sabe o q pode estar errado?
obrigado mais uma vez!
