<html>
<body>
<div class = "addressContainer">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2014.1.318/js/kendo.all.min.js"></script>
<form id="testView">
Firstname: <input id="firstName"
type="text"
data-bind="value: fisrtName">
<br/>
Lastname: <input id="lastName"
type="text"
data-bind="value: lastName">
<br/>
Fullname: <input id="fullName"
type="text"
data-bind="value: fullName"
readonly>
<br/>
<input type="submit">
</form>
<script>
$('document').ready(function(){
var viewModel = kendo.observable({
fisrtName: "Sagar",
lastName: "Ganatra",
fullName: function() {
return this.get("fisrtName") + ' ' + this.get("lastName");
}
});
kendo.bind($('form#testView'),viewModel);
});
</script>
</body>
</html>
<html>
<body>
<div class = "addressContainer">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2014.1.318/js/kendo.all.min.js"></script>
<a data-bind="attr: {href: websiteLink}"
target="_blank">
Click Here
</a>
<script>
$('document').ready(function(){
var viewModel = kendo.observable({
websiteLink: 'http://www.google.com',
});
kendo.bind($('a'),viewModel);
});
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2014.1.318/js/kendo.all.min.js"></script>
<div id="view">
<span id="container"
data-bind="visible: isVisible">
Some content here....
</span>
<br/>
<button id="toggleVisible"
data-bind="click: updateVisible">
Toggle Visible
</button>
</div>
<script>
$('document').ready(function(){
var viewModel = kendo.observable({
isVisible: true,
updateVisible: function() {
this.set('isVisible', !this.get('isVisible'));
}
});
kendo.bind($('div#view'),viewModel);
});
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2014.1.318/js/kendo.all.min.js"></script>
<select data-template="select-template"
data-bind="source: optionsData">
</select>
<script id="select-template" type="text/x-kendo-template">
<option data-bind="attr: {value: optionValue}, html: optionName">
</option>
</script>
<script>
$('document').ready(function(){
optionsData: [
{optionValue:3, optionName: "Test3"}
]
});
kendo.bind($('select'),viewModel);
});
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2014.1.318/js/kendo.all.min.js"></script>
<form id="testView">
<label for="firstName">First Name</label>
<input id="firstName"
name="firstName"
type="text"
required
validationMessage="Please specify First Name">
<br>
<label for="emailId" class="required">Email Address</label>
<input id="emailId"
name="emailId"
type="email"
required
data-required-msg="Please specify Email Address"
data-email-msg="Email format is not correct">
<br>
<input type="submit">
</form>
<script>
$('document').ready(function(){
$("form#testView").kendoValidator({
validateOnBlur: false
});
});
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2014.1.318/js/kendo.all.min.js"></script>
<form id="testView">
<label for="firstName">First Name</label>
<input id="firstName"
name="First Name"
type="text"
required>
<br>
<label for="emailId" class="required">Email Address</label>
<input id="emailId"
name="Email Address"
type="email"
required>
<br>
<input type="submit">
</form>
<script>
$('document').ready(function(){
$("form#testView").kendoValidator({
validateOnBlur: false,
messages: {
// {0} would be replaced with the input element's name
required: '{0} is required',
email: 'Enter a valid email address'
}
});
});
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2014.1.318/js/kendo.all.min.js"></script>
<form id="testView">
<label for="firstName">First Name</label>
<input id="firstName"
name="First Name"
type="text"
required>
<br>
<label for="emailId" class="required">Email Address</label>
<input id="emailId"
name="Email Address"
type="email"
required>
<br>
<input type="submit">
</form>
<script>
$('document').ready(function(){
$("form#testView").kendoValidator({
rules: {
customRule1: function(input) {
var re = /^[A-Za-z@.]+$/;
return re.test(input.val());
}
},
messages: {
customRule1: 'Numbers are not allowed'
}
});
});
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<body>
<link rel="stylesheet" type="text/css" href="http://kendo.cdn.telerik.com/2014.1.318/styles/kendo.common.min.css" />
<link rel="stylesheet" type="text/css" href="http://kendo.cdn.telerik.com/2014.1.318/styles/kendo.blueopal.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2014.1.318/js/kendo.all.min.js"></script>
<div id="example" class="k-content">
<table id="grid">
<thead>
<tr>
<th>Employee ID</th>
<th>Full Name</th>
<th>Year of Joining</th>
<th>Designation</th>
<th>Extension No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>10001</td>
<td>Sagar H Ganatra</td>
<td>2008</td>
<td>Software Architect</td>
<td>49523</td>
</tr>
<tr>
<td>7008</td>
<td>Adam Wayne</td>
<td>2000</td>
<td>Engineering Manager</td>
<td>34890</td>
</tr>
<tr>
<td>10298</td>
<td>Nick Taylor</td>
<td>2012</td>
<td>Software Engineer</td>
<td>56823</td>
</tr>
<tr>
<td>10677</td>
<td>James Thompson</td>
<td>2010</td>
<td>Senior Software Engineer</td>
<td>48999</td>
</tr>
<tr>
<td>6745</td>
<td>Andrew Jones</td>
<td>2003</td>
<td>Senior Engineering Manager</td>
<td>48999</td>
</tr>
</tbody>
</table>
</div>
<script>
$('document').ready(function(){
$("#grid").kendoGrid();
});
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<body>
<link rel="stylesheet" type="text/css" href="http://kendo.cdn.telerik.com/2014.1.318/styles/kendo.common.min.css" />
<link rel="stylesheet" type="text/css" href="http://kendo.cdn.telerik.com/2014.1.318/styles/kendo.blueopal.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2014.1.318/js/kendo.all.min.js"></script>
<div id="grid">
</div>
<script>
$('document').ready(function(){
$("#grid").kendoGrid({
columns: [
{
field : 'movieName',
title : 'Movie'
},
{
field : 'year',
title : 'Year'
},
{
field : 'rating',
title : 'Rating'
}
],
dataSource: [
{
movieName : 'The Shawshank Redemption',
year : 1994,
rating : 9.2
},
{
movieName : 'The Godfather',
year : 1972,
rating : 9.2
},
{
movieName : 'The Godfather - Part 2',
year : 1974,
rating : 9.0
},
{
movieName : 'Pulp Fiction',
year : 1994,
rating : 8.9
},
{
movieName : 'The Good, the Bad and the Ugly',
year : 1966,
rating : 8.9
}
]
});
});
</script>
</body>
</html>
No comments:
Post a Comment