Beruflich Dokumente
Kultur Dokumente
Framework
Telerik Products
WEB HTML5 / JS MOBILE
UI for ASP.NET AJAX Kendo UI UI for PhoneGap
UI for ASP.NET MVC UI for iOS
UI for PHP DESKTOP UI for Android
UI for JSP UI for WPF UI for Windows Universal
UI for Silverlight UI for WinForms UI for Windows Phone
UI for Windows 8
Agenda
Configuration Kendo UI Framework
Kendo UI Widgets Observable
Kendo date picker Model
A tale of two interfaces DataSource
Kendo Grid View
ListView
Demo
References
Kendo UI Widgets
AutoComplete Grid Scheduler
Button ListView Slider
Calendar MaskedTextBox Sortable
ColorPalette Menu Splitter
ColorPicker MultiSelect TabStrip
ComboBox Notification TimePicker
ContextMenu NumericTextBox ToolBar
DatePicker Pager Tooltip
DateTimePicker PanelBar TreeView
DropDownList PivotGrid ui
Editor ProgressBar Upload
FlatColorPicker RangeSlider Window
<script type="text/javascript">
$(document).ready(function () {
$("#kjDp").kendoDatePicker({
value: "06/30/2012" });
});
</script>
Kendo data-
<div id='bindDiv'>
<input id='kd-Dp' data-role='datepicker'
style='width: 150px;' data-bind='value: dateValue'
/>
</div>
<script type="text/javascript">
kendo.bind('#bindDiv',
{ dateValue: '06/30/2012' });
</script>
groupable: true
scrollable: true,
sortable: true
pageable: true - pageSize: 5
filterable: true
Kendo UI Framework
Binder GanttDependencyDataSource Node
Class ataSource Observable
Color GanttTask ObservableArray
DataSource HierarchicalDataSource ObservableObject
Draggable Kendo PivotDataSource
DropTarget Layout SchedulerEvent
DropTargetArea MobileWidget Validator
GanttDataSource Model View
GanttDependency Widget
bind
one
trigger
unbind
Kendo - Observable
<div id='myform' class='container padLeft25'>
<div class='float-left'>Name: </div>
<div class='float-left'
data-bind='text: user.userName'></div><br />
<input id='userName' class='k-input' maxlength='30
data-bind='value: user.userName' required /> <br />
<input id='userEmail' class='k-input' maxlength='255
data-bind='value: user.userEmail' required /> <br />
<button id='save' class='k-button'
data-bind='click: saveName'>Save</button>
<button id='new' class='k-button'
data-bind='click: newName'>New</button>
<ul id='errors'></ul>
</div>
Kendo - Observable
newName: function (vm) {
this.user.userName = '';
this.user.userEmail = '';
kendo.bind('#myform', userViewModel);
},
validate: function () {
var errors = [];
var val = this.user.userName;
if (val.length < 3 || val.length > 30) {
errors.push({ id: 'userName', message:
"'User Name' must be length 3." });
}
...
Kendo Observable
kendo.bind('#myform', userViewModel);
</script>
Scion xB
2425
Huhn
MI
6.25
Huhn
lastName Huhn
Kendo - DataSource
Configuration (cont) Method (cont)
group indexOf
group.aggregates insert
group.aggregates.aggregate page
group.aggregates.field pageSize
group.dir pushCreate
group.field pushDestroy
page pushUpdate
pageSize query
schema read
schema.aggregates remove
schema.data sort
schema.errors sync
... ...
Kendo - DataSource
Configuration (cont) Configuration (cont)
sort.field transport.destroy.data
transport transport.destroy.dataType
transport.create transport.destroy.type
transport.create.cache transport.destroy.url
transport.create.contentType transport.parameterMap
transport.create.data transport.push
transport.create.dataType transport.read
transport.create.type transport.read.cache
transport.create.url transport.read.contentType
transport.destroy transport.read.data
transport.destroy.cache transport.read.dataType
transport.destroy.contentType transport.read.type
...
Kendo DataSource/Model
<script type='text/javascript'>
var Model1 = kendo.data.Model.define({
id: 'personId',
fields: {
lastName: {type:'string', defaultValue: '',
validation: { required: true } },
firstName: {type:'string', defaultValue: '',
validation: { required: true } },
address1: {type:'string', defaultValue: '' },
address2: {type:'string', defaultValue: '' },
city: {type:'string', defaultValue: '' },
state: {type:'string', defaultValue: 'MI' },
zip: {type:'numeric', defaultValue: 0,
validation: { min: 0, required: true } },
...
</script>
[{"personId":21,"lastName":"Huhn","firstName":"Phil","address1":"123 Main
St.","city":"Ann Arbor"},
{"personId":22,"lastName":"Huhn","firstName":"Anthony"},{"personId":23,"lastN
ame":"Huhn","firstName":"Thomas"}]
Kendo DataSource
add / event
<script type='text/javascript'>
var dataSource2 = new kendo.data.DataSource({
schema: {
model: Model1
}
});
dataSource2.add(profile1);
dataSource2.add(profile2);
...
[{"personId":21,"lastName":"Huhn","firstName":"Phil","address1":"123 Main
St.","city":"Ann Arbor"},
{"personId":22,"lastName":"Huhn","firstName":"Anthony"},{"personId":23,"las
tName":"Huhn","firstName":"Thomas"}]
{"personId":23,"lastName":"Huhn","firstName":"Thomas"}
Kendo DataSource
at / get (id)
<script type='text/javascript'>
$( '#outDataSource4_1' ).text(
JSON.stringify(dataSource1.at( 2 )));
$( '#outDataSource4_2' ).text(
JSON.stringify(dataSource1.get( 22 )));
</script>
{"personId":23,"lastName":"Huhn","firstName":"Thomas"}
{"personId":22,"lastName":"Huhn","firstName":"Anthony"}
Kendo DataSource
sort / view
<script type='text/javascript'>
dataSource1.sort([{ field: "firstName", dir: "desc" }]);
var sortView = dataSource1.view();
$('#outDataSource6_1').text(JSON.stringify(sortView));
</script>
[{"personId":23,"lastName":"Huhn","firstName":"Thomas"},{"personId":21,
"lastName":"Huhn","firstName":"Phil","address1":"123 Main St.","city":"Ann
Arbor"},{"personId":22,"lastName":"Huhn","firstName":"Anthony"}]
[{"personId":23,"lastName":"Huhn","firstName":"Thomas"},{"personId":22,
"lastName":"Huhn","firstName":"Anthony"}]
Kendo - View
Configuration Methods Events
evalTemplate destroy hide
model render init
tagName show
wrap transitionStart
transitionEnd
Fields
element
<script type='text/javascript'>
var view1 = new kendo.View( '<h3> Welcome</h3>' );
view1.render( '#outview1' );
</script>
Welcome
<script type='text/javascript'>
var view3Model = { title: 'Treasurer',
name: 'Phil Huhn' };
var view3 = new kendo.View('officer-template',
{ model: view3Model, evalTemplate: true });
view3.render('#outview3');
</script>
Treasurer
Phil Huhn
<div id="outview4"></div>
Kendo View
model / template
<script type='text/javascript'>
var view4Model = { title: 'Treasurer',
name: 'Phil Huhn' };
var view4 = new kendo.View('input-template',
{ model: view4Model, evalTemplate: true });
view4.render( '#outview4' );
$('#saveOfc' ).kendoButton({
click: function (e) {
var t = $('#view4title').val();
var n = $('#view4name').val();
alert( 'Title: ' + t + ', name: ' + n);
}
});
</script>
Kendo - ListView
Configuration Methods Events
autoBind add cancel
dataSource cancel change
editTemplate clearSelection dataBound
navigatable destroy dataBinding
selectable edit edit
template refresh remove
altTemplate remove save
save
select
setDataSource
Kendo ListView
render
<script type='text/javascript'>
$('#listView1').kendoListView({
dataSource: {
data: [{ name: M. P.', title: 'President' },
{ name: 'J. O C.', title: 'Vice President' },
{ name: 'P. H.', title: 'Treasurer' },
{ name: 'B. M.', title: 'Webmaster' }]
},
template: kendo.template(
$('#officer-template').html()),
selectable: true
});
</script>
Kendo ListView
events / data-
<script id='officer-template2'
type='text/x-kendo-template'>
<li id='#: id #'
data-bind='events:{ mouseover: listener }'>
<h3>#= title #</h3> <div>#= name #</div>
</li>
</script>
Kendo ListView
events / data-
Event: mouseover M. P.
Event: mouseover M. P.
Event: mouseover M. P.
Event: mouseover J. O. C.
Event: mouseover J. O. C.
Event: mouseover P. H.
Event: mouseover P. H.
Event: mouseover P. H.
Event: mouseover B. M.
Event: mouseover B. M.
Event: mouseover B. M.
Kendo Demo