kendo-gridकीन्डो-ग्रिड से शुरुआत करना
टिप्पणियों
केडो यूआई ग्रिड एक शक्तिशाली विजेट है जो आपको इसकी तालिका प्रतिनिधित्व के माध्यम से डेटा की कल्पना और संपादित करने की अनुमति देता है। यह अंतर्निहित डेटा पर संचालन कैसे प्रस्तुत करें और निष्पादित करें, जैसे पेजिंग, सॉर्टिंग, फ़िल्टरिंग, समूहीकरण, संपादन, आदि के बारे में कई विकल्प प्रदान करता है। डेटा के साथ ग्रिड को खिलाने के लिए, आप केन्डो के माध्यम से स्थानीय या दूरस्थ डेटा की आपूर्ति कर सकते हैं। यूआई डेटा स्रोत घटक, एक मध्यस्थ के रूप में उपयोग किया जाता है।
Dojo (आप ऑनलाइन डेमो बना सकते हैं और इसे दूसरों के साथ साझा कर सकते हैं)
स्थापना या सेटअप
हम HTML5 / Javascript, ASP.NET MVC, JSP और PHP प्रोजेक्ट / एप्लिकेशन में Kendo-UI ग्रिड जोड़ सकते हैं।
HTML5 पेज में केडो-यूआई ग्रिड जोड़ने के लिए कृपया नीचे दिए गए चरणों का पालन करें।
खाली html5 पेज बनाएं।
Kendo.common.min.css और kendo.default.min.css शामिल करें। हेड टैग के भीतर एक लिंक टैग जोड़ें।
Kendo-UI लाइब्रेरी को Jquery पर निर्भर किया गया है। तो, jQuery के बाद kendo.all.min.js और kendo.aspnetmvc.min.js शामिल करें।
एक केडो यूआई ग्रिड को त्वरित करने के दो संभावित तरीके हैं।
- एक खाली दिव्य तत्व से। इस स्थिति में सभी ग्रिड सेटिंग्स इनिशियलाइज़ेशन स्क्रिप्ट स्टेटमेंट में प्रदान की जाती हैं।
- मौजूदा HTML तालिका तत्व से। इस स्थिति में कुछ ग्रिड सेटिंग्स तालिका संरचना और तत्वों HTML विशेषताओं से अनुमान लगाया जा सकता है।
दोनों ही मामलों में ग्रिड एक jQuery प्लगइन के रूप में पंजीकृत है।
आप ऊपर बताई गई फ़ाइलों के लिए यहाँ cdn पा सकते हैं।
उदाहरण: HTML5 पेज में कैंडो-यूआई ग्रिड - खाली दिव्य तत्व
<!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>
उदाहरण: HTML5 पृष्ठ में कैंडो-यूआई ग्रिड - मौजूदा 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>
ASP.NET MVC एप्लिकेशन में केडो-यूआई ग्रिड जोड़ने के लिए कृपया नीचे दिए गए चरणों का पालन करें।
- ASP.NET MVC प्रोजेक्ट बनाएँ
- जावास्क्रिप्ट और सीएसएस फ़ाइलों को शामिल करें। दो विकल्प हैं या तो उन फ़ाइलों की एक स्थानीय प्रतिलिपि शामिल करें या केडो यूआई सीडीएन सेवाओं का उपयोग करें।
स्थानीय जावास्क्रिप्ट और सीएसएस का उपयोग करें
ASP.NET MVC के लिए Telerik UI के इंस्टॉल स्थान पर नेविगेट करें। डिफ़ॉल्ट रूप से, यह C: \ Program Files (x86) \ Telerik में है।
स्थापित स्थान से जेएस निर्देशिका को कॉपी करें और इसे एप्लिकेशन के स्क्रिप्स फ़ोल्डर में पेस्ट करें।
स्थापित स्थान से शैलियों निर्देशिका को कॉपी करें और इसे एप्लिकेशन के सामग्री फ़ोल्डर में पेस्ट करें।
लिपियों / जे डी निर्देशिका का नाम बदलें लिपियों / मेंडोज़ के लिए । सामग्री / मेंडोज़ के लिए सामग्री / शैलियों का नाम बदलें।
ASP.NET MVC के लिए Telerik UI के लिए स्क्रिप्ट और स्टाइल बंडलों को जोड़ने के लिए App_Start / bundConfig.cs खोलें।
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.
पेज के हेड टैग में jQuery का बंडल ले जाएँ। यह डिफ़ॉल्ट रूप से पृष्ठ के अंत में है। JQuery के बाद ASP.NET MVC स्क्रिप्ट बंडल के लिए टेलिक यूआई को रेंडर करें।
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")
CDN सेवाओं का उपयोग करें
Kendo.common.min.css और kendo.default.min.css शामिल करें। लेआउट के हेड टैग के भीतर एक लिंक टैग जोड़ें।
JQuery के बाद kendo.all.min.js और kendo.aspnetmvc.min.js शामिल करें।
यदि Telerik MVC शेड्यूलर रैपर का उपयोग कर रहे हैं, तो kendo.allzones.min.js को kendo.all.min.js के बाद शामिल करें।
आप ऊपर बताई गई फाइलों के लिए यहाँ cdn पा सकते हैं।
अपनी परियोजना में Kendo.Mvc.dll संदर्भ जोड़ें और DLL स्थान रैपर / एस्पनेट पीवीसी / बायनेरिज़ / एमवीसी * में उपलब्ध है।
अगला कदम ASP.NET MVC को Kendo.Mvc.UI नामस्थान के बारे में बताने के लिए है जहाँ सर्वर-साइड रैपर हैं। इसके लिए
<add namespace="Kendo.Mvc.UI" />web<add namespace="Kendo.Mvc.UI" />नाम को रूट web.config और View web.config में जोड़ें।
- अपने सेट अप को सत्यापित करने के लिए, कृपया देखें / aspx पृष्ठ में Kendo UI DatePicker विजेट नीचे जोड़ें।
उस्तरा
@(Html.Kendo().DatePicker().Name("datepicker"))
ASPX
<%: Html.Kendo().DatePicker().Name("datepicker") %>
