Intro Kendo UI Framework

Introducing Kendo UI
Framework
By Phil Huhn, September 30, 2014

2014 Northern Software Group
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
QUALITY DEBUGGING REPORTING & ACCESS

JustCode Fiddler Reporting
JustMock JustDecompile Data Access
Testing Framework JustTrace
Test Studio TeamPulse Sitefinity
2012 Northern Software Group 1

Kendo UI
The Art of Web Development
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 - Configuration

<link rel="stylesheet"
href="../Content/kendo.common.bootstrp.min.css" />
<link rel="stylesheet"
href="../Content/kendo.blueopal.min.css" />

<script src="../Scripts/jquery-1.9.1.min.js" />
<script src="../Scripts/kendo.all.min.js" />
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

Kendo - jQuery
<input id="kjDp" style="width: 150px" />
<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>
kendo.bind('#bindDiv',
{ dateValue: '06/30/2012' });
</script>

Kendo Grid - jQuery
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

Kendo - Observable
Methods
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
var userViewModel = new kendo.observable({
user: {
userName: 'PNH',
userEmail: 'PNH@yahoo.com
},
saveName: function (vm) {
if (this.validate() === true) {
alert('Saving');
} else {
alert('Please correct');
}
vm.preventDefault();
},

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
val = this.user.userEmail;
if (val.length < 3 || val.length > 255) {
errors.push({ id: 'userEmail', message:
"'User Email' is required." });
}
var validationSummary = $('#errors');
validationSummary.html('');
for (i = 0; i < errors.length; i++) {
validationSummary.append('<li>' +
errors[i].message + '</li>');
}
return errors.length > 0 ? false : true;
}
});
...
Kendo Observable
kendo.bind('#myform', userViewModel);
</script>

Kendo - Model
Field Method Event
uid bind change

dirty Model.define get
editable Set
get
isNew
set
toJSON
Kendo Model / define

<script type='text/javascript'>
var Model1 = kendo.data.Model.define({
id: 'makeId', // the identifier of the model
fields: {
'make': { type: 'string' },
'year': { type: 'number' },
'weight': { type: 'number' }
}
});
...

Kendo Model / define
var model1 = new Model1({make:'Scion xB', year: 2006 });
model1.set( 'weight', 2425 ); // Setting
var ansmodel1 = model1.get('make'); // Getting
var ansmodel2 = model1.get('weight');
</script>
Scion xB
2425
Kendo Model / defaults

id: 'personId',
fields: {
lastName: {type:'string', defaultValue: '' },
firstName: {type:'string', defaultValue: '' },
address1: {type:'string', defaultValue: '' },
city: {type:'string', defaultValue: '' },
state: {type:'string', defaultValue: 'MI' },
zip: {type:'numeric', defaultValue: 0 },
phone: {type:'string', defaultValue: '' },
gender: {type:'string', defaultValue: 'M' } }
});

Kendo Model / defaults
var model2_1 = new Model2({ lastName: 'Huhn',
firstName: 'Phil', phone: '7346461234' });
var ansmodel3 = model2_1.get('lastName');
var ansmodel4 = model2_1.get('state');// undefined
var model2_2 = new Model2();
var ansmodel4_2 = model2_2.get('state');
</script>
Huhn
MI
Kendo Model / calculated

var model3 = new kendo.data.Model ({
fields: {
l1: { type: 'numeric', defaultValue: 0 },
l2: { type: 'numeric', defaultValue: 0 },
},
square: function (l) {
this.set( 'l1', l);
this.set( 'l2', l);
},
area: function () {
return this.get('l1') * this.get('l2');
}
});

Kendo Model / calculated
model3.square(2.5);
var ansmodel5 = model3.area();
</script>
6.25
Kendo Model / events

var model4 = new Model2({ lastName: 'Hahn',
firstName: 'Phil', phone: '7346461234' });
model4.bind('change', function (e) {

var fldName = e.field;
console.log(fldName + ' ' + this.get(fldName));
});
model4.set( 'lastName', 'Huhn' );

var ansmodel6 = model4.get('lastName');
</script>
Huhn
lastName Huhn

Kendo - DataSource
Configuration Method Event
aggregate add change
aggregate.aggregate aggregate error
aggregate.field aggregates push
autoSync at requestEnd
batch cancelChanges requestStart
data data sync
filter fetch
filter.field filter
filter.filters get
filter.logic getByUid
filter.operator group
filter.value hasChanges
... ...
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) Method
schema.groups total
schema.model totalPages
schema.parse view
schema.total
schema.type
serverAggregates
serverFiltering
serverGrouping
serverPaging
serverSorting
sort
sort.dir
...
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
Configuration (cont) Configuration (cont)
transport.read.url transport.signalr.server.destroy
transport.signalr transport.signalr.server.read
transport.signalr.client transport.signalr.server.update
transport.signalr.client.create transport.update
transport.signalr.client.destroy transport.update.cache
transport.signalr.client.read transport.update.contentType
transport.signalr.client.update transport.update.data
transport.signalr.hub transport.update.dataType
transport.signalr.promise transport.update.type
transport.signalr.server transport.update.url
transport.signalr.server.create type
Kendo DataSource/Model
id: 'personId',
fields: {
lastName: {type:'string', defaultValue: '',
validation: { required: true } },
firstName: {type:'string', defaultValue: '',
validation: { required: true } },
city: {type:'string', defaultValue: '' },
state: {type:'string', defaultValue: 'MI' },
zip: {type:'numeric', defaultValue: 0,
validation: { min: 0, required: true } },
...

Kendo DataSource/Model
...
phone: {type:'string', defaultValue: '' },
gender: {type:'string', defaultValue: 'M' } }
},
fullName: function () {
return this.get('firstName') + ' ' +
this.get('lastName');
}
});
</script>
Kendo DataSource / data

var profile1 = new Model1({ personId: 21, lastName:

'Huhn', firstName: 'Phil', address1: '123 Main St.',
city: 'Ann Arbor' });
'Huhn', firstName: 'Anthony' });
'Huhn', firstName: 'Thomas' });
</script>

Kendo DataSource
var dataSource1 = new kendo.data.DataSource({
data: [ profile1, profile2, profile3 ],
schema: {
model: Model1
}
});
dataSource1.fetch();
$('#outDataSource1').text(JSON.stringify(
dataSource1.data()));
</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
schema: {
model: Model1
}
});
dataSource2.add(profile1);
...

Kendo DataSource
add / event
...
dataSource2.bind('change', function (evt) {
var data = this.data();
console.log('DataSource 2 - change: ' +
JSON.stringify(evt.items[0].toJSON()));
$( '#outDataSource2_2' ).text(JSON.stringify(
evt.items[0].toJSON()));
});
</script>
[{"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)
$( '#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
remove / unshift
data: [
{ profile1, profile2 ],
schema: {
model: Model1
}
});
dataSource3.fetch(); // only 1 & 2
var dataItem = dataSource3.get( 21 );
dataSource3.remove(dataItem); // only 1
dataSource3.insert(0, profile3); // 3 & 2
</script>
[{"personId":23,"lastName":"Huhn","firstName":"Thomas"},{"personId":22,
"lastName":"Huhn","firstName":"Anthony"}]
Kendo DataSource
sort / view
dataSource1.sort([{ field: "firstName", dir: "desc" }]);
var sortView = dataSource1.view();
$('#outDataSource6_1').text(JSON.stringify(sortView));
</script>
"lastName":"Huhn","firstName":"Phil","address1":"123 Main St.","city":"Ann
Arbor"},{"personId":22,"lastName":"Huhn","firstName":"Anthony"}]

Kendo DataSource
filter / view
dataSource1.filter([{ field: "address1", operator: "eq",
value: undefined }]);
var filterView = dataSource1.view();
$('#outDataSource6_2').text(JSON.stringify(filterView));
</script>
"lastName":"Huhn","firstName":"Anthony"}]
Kendo - View
Configuration Methods Events
evalTemplate destroy hide
model render init
tagName show
wrap transitionStart
transitionEnd
Fields
element

Kendo View /Render
<div id="outview1"></div>
var view1 = new kendo.View( '<h3> Welcome</h3>' );
view1.render( '#outview1' );
</script>
Welcome
Kendo View / model

<script id='officer-template'
type='text/x-kendo-template'>
<div><h3>#= title #</h3> <div>#= name #</div></div>
</script>
<div id='outview3'></div>
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

Kendo View
model / template
<script id='input-template' type='text/x-kendo-template'>
<button id='saveOfc' type='button'>Save</button>
<div class='container'><label>Title: </label>
<input id='view4title' type='text' class='k-input
value='#= title #' />
</div>
<div class='container'><label>Name: </label>
<input id='view4name' type='text' class='k-input
value='#= name #' />
</div>
</script>
<div id="outview4"></div>
Kendo View
model / template
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 View
model / template
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 id='officer-template2'
<li><h3>#= title #</h3> <div>#= name #</div></li>
</script>
<ul id='listView1' class='k-list-container'

style='width: 200px;'>
</ul>
Kendo ListView
render
$('#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
render
.
Kendo ListView
events / data-
<script id='officer-template2'
<li id='#: id #'
data-bind='events:{ mouseover: listener }'>
<h3>#= title #</h3> <div>#= name #</div>
</li>
</script>
<ul id='listView1' class='k-list-container'

style='width: 200px;' data-role='listview'
data-template='officer-template2'
data-bind='source: officers' data-selectable='true' >
</ul>

Kendo ListView
events / data-
var viewModel2 = new kendo.observable({
officers: [
{ id: 1, name: 'M. P.', title: 'President' },
{ id: 2, name: 'J. O. C.', title: 'Vice President'},
{ id: 3, name: 'P. H.', title: 'Treasurer' },
{ id: 4, name: 'B. M.', title: 'Webmaster' }],
listener: function (e) {
console.log('Event: ' + e.type + ' ' + e.data.name);
}
});
kendo.bind($('#listView2'), viewModel2);
</script>
Kendo ListView
events / data-
Event: mouseover M. P.
Event: mouseover J. O. C.
Event: mouseover J. O. C.
Event: mouseover P. H.
Event: mouseover B. M.

Kendo Demo / Prism
App contains everything

Layouts contains Regions
Regions contains Views
New Save Delete
Nav Welcome / Edit
Kendo Demo

Kendo Custom ListView
(function ($, kendo) {
var ui = kendo.ui, ListView = ui.ListView;
//
var AlertListView = ListView.extend({
_self: {}, // this ListView widget
_jqElement: {}, // the dom element
// Initialize the options
init: function (element, options) {
// base call to widget initialization
ListView.fn.init.call(this, element, options);
// can now use ListView properties
_self = this; // this ListView widget
_jqElement = $('#' + element.id); // set the jQ el
this.messageAlertHide();
},

...
//
options: {
// the name is: (i.e. kendo.ui.AlertListView).
name: 'AlertListView',
autoBind: false,
template: '<li>#: message #</li>'
},
// establish the CSS (success/error/info),
// remove any previous classes then apply the
// established CSS and add click event,
// assign the list messages and render them in a UL.
...

...
messageAlert: function (listOfMsgs, err) {
var cls = 'k-block k-success-colored';
if (err == undefined || err) cls =
'k-block k-error-colored';
_jqElement.removeClass().addClass(cls).show('slow')
.on('click', this.messageAlertHide);
_self.dataSource.data(listOfMsgs);
_self.refresh();
return _self;
},
// hide the above
...

...
messageAlertHide: function (evt) {
_self.dataSource.data([]);
_jqElement.hide('slow');
if (evt != undefined) evt.preventDefault();
return _self;
},
// calls above message alert method
whereWhatAlert: function (where, what, err) {
console.log(where + ' ' + what);
return _self.messageAlert(
[{ id: 'where', message: where },
{ id: 'what', message: what }], err);
},
...

...
// calls above message alert method
modelAlert: function (mdl, where, what, err) {
console.log(where + ' ' + what);
return _self.messageAlert(
[{ id: 'where', message: where },
{ id: 'what', message: what },
{ id: 'model', message: 'Model: ' +
JSON.stringify(mdl) }], err);
}
});
ui.plugin(AlertListView);
})(window.jQuery, window.kendo);
...

...
// Apply this to the un-order list (ul)
$(function () {
$("#alertMessages").kendoAlertListView();
window.alertList =
$("#alertMessages").data("kendoAlertListView");
});

References
Kendo UI Core https://github.com/telerik/kendo-ui-core
Kendo UI api http://docs.telerik.com/kendo-ui/api/javascript/
Kendo UI Forum http://www.telerik.com/forums/kendo-ui/
Kendo http://en.wikipedia.org/wiki/Kendo
Vasil Terziev and Svetozar Georgiev,
two of the four co-founders of the
software company Telerik and AUBG
graduates. Boyko Laramov and Hristo
Kosev are the other co-founders.

Intro Kendo UI Framework

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Intro Kendo UI Framework

Uploaded by

Copyright:

Available Formats

Introducing Kendo UI

By Phil Huhn, September 30, 2014

QUALITY DEBUGGING REPORTING & ACCESS

Test Studio TeamPulse Sitefinity

2012 Northern Software Group 1

2012 Northern Software Group 2

2012 Northern Software Group 3

2012 Northern Software Group 4

2012 Northern Software Group 5

2012 Northern Software Group 6

2012 Northern Software Group 7

2012 Northern Software Group 8

uid bind change

Kendo Model / define

2012 Northern Software Group 9

Kendo Model / defaults

2012 Northern Software Group 10

Kendo Model / calculated

2012 Northern Software Group 11

Kendo Model / events

model4.bind('change', function (e) {

model4.set( 'lastName', 'Huhn' );

2012 Northern Software Group 12

2012 Northern Software Group 13

2012 Northern Software Group 14

2012 Northern Software Group 15

Kendo DataSource / data

var profile1 = new Model1({ personId: 21, lastName:

2012 Northern Software Group 16

2012 Northern Software Group 17

2012 Northern Software Group 18

2012 Northern Software Group 19

2012 Northern Software Group 20

Kendo View / model

2012 Northern Software Group 21

2012 Northern Software Group 22

2012 Northern Software Group 23

<ul id='listView1' class='k-list-container'

2012 Northern Software Group 24

<ul id='listView1' class='k-list-container'

2012 Northern Software Group 25

2012 Northern Software Group 26

App contains everything

New Save Delete

Nav Welcome / Edit

2012 Northern Software Group 27

Kendo Custom ListView

2012 Northern Software Group 28

Kendo Custom ListView

2012 Northern Software Group 29

Kendo Custom ListView

2012 Northern Software Group 30

2012 Northern Software Group 31

You might also like