kendo-gridKomma igång med kendo-rutnät
Anmärkningar
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)
Installation eller installation
Vi kan lägga till Kendo-UI-nät i HTML5 / Javascript, ASP.NET MVC, JSP och PHP-projekt / applikation.
Följ nedanstående steg för att lägga till kendo-UI-rutnät på HTML5-sidan.
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.
- Från ett tomt div-element. I det här fallet anges alla rutnätsinställningar i initieringsskriptet.
- Från ett befintligt HTML-tabellelement. I det här fallet kan några av rutnätsinställningarna dras ut från tabellstrukturen och elementens HTML-attribut.
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.
Exempel: Kendo-UI Grid på HTML5-sida - Tom div-element
<!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>
Exempel: Kendo-UI Grid på HTML5-sida - Befintligt HTML-tabellelement
<!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.
- Skapa ASP.NET MVC-projekt
- Inkludera Javascript och CSS-filer. Det finns två alternativ antingen inkludera en lokal kopia av dessa filer eller använda Kendo UI CDN-tjänster.
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.
- För att verifiera din inställning, vänligen lägg till Kendo UI DatePicker-widgeten i view / aspx-sidan.
Rakapparat
@(Html.Kendo().DatePicker().Name("datepicker"))
ASPX
<%: Html.Kendo().DatePicker().Name("datepicker") %>
