Hello, i'm trying to learn Kendo and would like to use my local drive initially, just to start off with simple examples and so i'm wondering if Telerik has some examples that i can simply cut and paste to my C:\ drive like below and where the data inputs are JSON files?
Or in the example below, can i somehow determine what the full path is for this input dataset?
//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers
thanks very much for any pointers!
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
</script>
</div>
<style type="text/css">
.customer-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px 35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
margin-left: 5px;
}
.customer-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
</style>
</body>
</html>
1 Answer, 1 is accepted
Please accept my apology for the delay.
There is a folder with examples that you can run locally in the Kendo UI Professional trial. The Kendo UI Grid with local data binding is available at:
C:\Users\[Username]\Downloads\telerik.kendoui.professional.2016.2.714.trial\examples\grid\local-data-binding.html
If you would like to use Visual Studio, navigate to the default folder for the UI for ASP.NET MVC trial examples and run the project:
- for ASP.NET MVC applications
C:\Program Files (x86)\Telerik\UI for ASP.NET MVC Q2 2016\wrappers\aspnetmvc\Examples
- for Kendo UI Web applications
C:\Program Files (x86)\Telerik\Kendo UI Professional Q2 2016\examples
Another great way to get familiar with simple examples is by using our documentation API reference. We have a Dojo embedded for most public configuration properties,methods, events and fields with simple examples that you can edit, run or open in another browser window to modify.
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid
I hope this helps, otherwise, let me know how I can assist further.
Regards,
Alex
Telerik by Progress