Kendo UI-rutnät är en kraftfull widget som låter dig visualisera och redigera data via dess tabellrepresentation. Det ger en mängd olika alternativ för hur man presenterar och utför operationer under de underliggande data, såsom personsökning, sortering, filtrering, gruppering, redigering etc. För att mata rutnätet med data kan du leverera antingen lokal eller fjärrdata via Kendo UI DataSource-komponent, används som medlar.
Dojo (Du kan göra online-demo och dela den med andra)
Vi kan lägga till Kendo-UI-nät i HTML5 / Javascript, ASP.NET MVC, JSP och PHP-projekt / applikation.
Skapa tom html5-sida.
Inkludera kendo.common.min.css och kendo.default.min.css . Lägg till en länktagg i huvudtaggen.
Kendo-UI-biblioteket är beroende av Jquery. Så inkludera kendo.all.min.js och kendo.aspnetmvc.min.js efter jQuery.
Det finns två möjliga sätt att instansera ett Kendo UI-nät.
I båda fallen registreras rutnätet som ett jQuery-plugin.
Du kan hitta cdn-väg här för ovan nämnda filer.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid">
</div>
<script>
var products = [{
ProductID: 11,
ProductName: "Chai",
}, {
ProductID: 22,
ProductName: "Chang",
}, {
ProductID: 33,
ProductName: "Aniseed Syrup",
}, {
ProductID: 44,
ProductName: "Chef Anton's Cajun Seasoning",
}, {
ProductID: 55,
ProductName: "Chef Anton's Gumbo Mix",
}];
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
id: "ProductID",
fields: {
ProductName: {
type: "string"
}
},
}
},
pageSize: 10
},
sortable: true,
filterable: true,
pageable: true,
columns: [
{ field: "ProductID", title: "ProductID" },
{ field: "ProductName", title: "ProductName" },
{ command: ["edit", "destroy"], title: " " }
],
editable: "inline"
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<table id="grid">
<colgroup>
<col />
<col />
<col style="width:110px" />
<col style="width:120px" />
<col style="width:130px" />
</colgroup>
<thead>
<tr>
<th data-field="make">Car Make</th>
<th data-field="model">Car Model</th>
<th data-field="year">Year</th>
<th data-field="category">Category</th>
<th data-field="airconditioner">Air Conditioner</th>
</tr>
</thead>
<tbody>
<tr>
<td>Volvo</td>
<td>S60</td>
<td>2010</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Audi</td>
<td>A4</td>
<td>2002</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Toyota</td>
<td>Avensis</td>
<td>2006</td>
<td>Saloon</td>
<td>No</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
height: 550,
sortable: true
});
});
</script>
</div>
</body>
</html>
Följ nedanstående steg för att lägga till kendo-UI-rutnät i ASP.NET MVC-applikation.
Använd lokal JavaScript och CSS
Navigera till installationsplatsen för Telerik UI för ASP.NET MVC. Som standard är det i C: \ Program Files (x86) \ Telerik.
Kopiera js katalogen från installationsplatsen och klistra in den i manusmappen i ansökan.
Kopiera stilar katalogen från installationsplatsen och klistra in den i innehållsmappen i ansökan.
Byt namn på Skript / js- katalogen till Skript / kendo . Byt namn på innehåll / stilar till Content / kendo .
Öppna App_Start / BundleConfig.cs för att lägga till skript- och stilpaket nedan för Telerik UI för ASP.NET MVC.
bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
"~/Scripts/kendo/kendo.all.min.js",
// "~/Scripts/kendo/kendo.timezones.min.js", // uncomment if using the Scheduler
"~/Scripts/kendo/kendo.aspnetmvc.min.js"));
bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
"~/Content/kendo/kendo.common.min.css",
"~/Content/kendo/kendo.default.min.css"));
bundles.IgnoreList.Clear(); //Tell the ASP.NET bundles to allow minified files in debug mode.
Flytta jQuery-paketet till huvudetiketten på sidan. Det är som standard i slutet av sidan. Återge Telerik UI för ASP.NET MVC-skriptpaket efter jQuery.
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")
Använd CDN-tjänster
Inkludera kendo.common.min.css och kendo.default.min.css . Lägg till en länktagg i huvudetiketten för layouten.
Inkludera kendo.all.min.js och kendo.aspnetmvc.min.js efter jQuery.
Om du använder Telerik MVC Scheduler-omslaget, inkludera kendo.timezones.min.js efter kendo.all.min.js .
Du kan hitta cdn-sökväg här för ovan nämnda filer.
Lägg till Kendo.Mvc.dll- referens i ditt projekt och DLL är tillgängligt i platsinpackningar / aspnetmvc / Binaries / MVC *.
Nästa steg är att informera ASP.NET MVC om Kendo.Mvc.UI-namnområdet där serverns omslag finns. För detta lägg till <add namespace="Kendo.Mvc.UI" />
namespace tagg i root web.config och Visa web.config.
Rakapparat
@(Html.Kendo().DatePicker().Name("datepicker"))
ASPX
<%: Html.Kendo().DatePicker().Name("datepicker") %>