Kendo UI Overview
description
Transcript of Kendo UI Overview
![Page 1: Kendo UI Overview](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816359550346895dd41757/html5/thumbnails/1.jpg)
Kendo UI OverviewWhat it is, and does it work
Learning & Developmenthttp://academy.telerik.com
Telerik School Academy
![Page 2: Kendo UI Overview](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816359550346895dd41757/html5/thumbnails/2.jpg)
Table of Contents1. Installation2. DataSource3. Templates4. Validator5. UI Widgets6. Bonus – Server Side Wrappers and
Mobile
2
![Page 3: Kendo UI Overview](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816359550346895dd41757/html5/thumbnails/3.jpg)
InstallationGetting ready for Kendo UI
![Page 4: Kendo UI Overview](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816359550346895dd41757/html5/thumbnails/4.jpg)
Installation First include the style sheets
kendo.common.min.css (common css first)
kendo.{theme}.min.css (theme css) Then include the JavaScript files
jquery.min.js (jQuery is needed first)
kendo.web.min.js (Kendo Ui web) Enable intellisence
kendo.web.min.intellisense.js in scripts folder
![Page 5: Kendo UI Overview](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816359550346895dd41757/html5/thumbnails/5.jpg)
Installing Kendo UI
Live Demo
![Page 6: Kendo UI Overview](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816359550346895dd41757/html5/thumbnails/6.jpg)
DataSourceData, data, data
![Page 7: Kendo UI Overview](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816359550346895dd41757/html5/thumbnails/7.jpg)
DataSource Abstraction over local or remote data
Play central role in Kendo UI applications
Retrieve data from local or remote end point
Provides CRUD operations and serialization
Provides filtering, grouping, page sizing
Synchronizing updates (batch and normal)
And many more
![Page 8: Kendo UI Overview](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816359550346895dd41757/html5/thumbnails/8.jpg)
DataSource Initialization with new kendo.data.DataSource
Takes an JSON object as parameter The JSON object contains variable options
data option – array of same objects or string
var cars = [{ make: 'Opel', model: 'Insignia' , year: '2009'},{ make: 'Audi', model: 'A5', year: '2008'},{ make: 'BMW', model: 'M3', year: '2010'},{ make: 'Mercedes', model: 'CL', year: '2011'}];var carsDataSource = new kendo.data.DataSource({ data: cars});
![Page 9: Kendo UI Overview](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816359550346895dd41757/html5/thumbnails/9.jpg)
DataSource columns option – array of objects
field, width, title aggregate option – array of objects
field, aggregate "average", "count", "max", "min",
"sum"…columns: [
{ field: 'make', width: 50, title: 'Make' },{ field: 'model', width: 50, title:
'Model' }],aggregate: [
{ field: 'power', aggregate: 'sum' },]…
![Page 10: Kendo UI Overview](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816359550346895dd41757/html5/thumbnails/10.jpg)
DataSource filter option – array of objects
logic option: ‘and’, ‘or’ filters option: array of objects
field, operator, value operators: "eq", "neq", "lt", "lte",
"gt", "gte"…filter: { logic: 'and', filters: [ { field: 'make', operator: 'eq', value: 'Audi' }, { field: 'year', operator: 'gt', value: 2006 } ]}…
![Page 11: Kendo UI Overview](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816359550346895dd41757/html5/thumbnails/11.jpg)
DataSource group option – array of objects
field, dir, aggregates dir: ‘asc’ and ‘desc’
…group: { field: 'make', dir: 'desc', aggregates: [ { field: 'power', aggregate: 'max' }, { field: 'make', aggregate: 'count' } ]}…
![Page 12: Kendo UI Overview](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816359550346895dd41757/html5/thumbnails/12.jpg)
DataSource sort option – array of objects
field, dir dir: ‘asc’ and ‘desc’
…sort: {[ { field: 'year', dir: 'desc' }, { field: 'make', dir: 'asc' }]}…
![Page 13: Kendo UI Overview](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816359550346895dd41757/html5/thumbnails/13.jpg)
DataSource transport option – array of objects
create, read, update, destroy url, dataType
parameterMap – function for parsing data
…transport: { read: { url: 'http://someurl.com/api/read', dataType: 'json'},…
![Page 14: Kendo UI Overview](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816359550346895dd41757/html5/thumbnails/14.jpg)
DataSource batch option – boolean page option – number pageSize option – number serverPaging option – boolean serverSorting option - boolean events – change, error, sync…change: function (e) { …}…
![Page 15: Kendo UI Overview](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816359550346895dd41757/html5/thumbnails/15.jpg)
DataSource Methods
add – object or Kendo.data.model aggregate – get or set configuration aggregates – returns result at – indexator data – gets or sets the data array fetch – reads the data, needs ready
function filter – gets or sets the
configuration group – gets or sets the
configuration indexOf – return the index of an
object in data
![Page 16: Kendo UI Overview](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816359550346895dd41757/html5/thumbnails/16.jpg)
DataSource Methods
insert – inserts data at specified index
page – gets or sets the current page pageSize – gets or sets the page
size read – reads the data remove – removes item sort – gets or sets the configuration sync – syncs data with remote
service total – number of items in data view – return corresponding data
(with fetch)
![Page 17: Kendo UI Overview](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816359550346895dd41757/html5/thumbnails/17.jpg)
DataSourceLive Demo
![Page 18: Kendo UI Overview](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816359550346895dd41757/html5/thumbnails/18.jpg)
TemplatesMustache, Beard, Eyebrows
![Page 19: Kendo UI Overview](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816359550346895dd41757/html5/thumbnails/19.jpg)
Templates Kendo UI templates – in script tags Type of tag – “text/x-kendo-
template” Should have id attribute Initialized with kendo.template($
('#id').html()) Takes object parameter with data Appended to other DOM (jQuery)
elements
<script type="text/x-kendo-template" id="some-id">// template </script>
var tmpl = kendo.template($('#some-id').html());
$('#some-tag').append(template({ /* data obj */ }));
![Page 20: Kendo UI Overview](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816359550346895dd41757/html5/thumbnails/20.jpg)
Templates Syntax
Normal HTML syntax # Between number sign you can
write JS code #: Takes a string from a parameter #= Takes the value from a
parameter<script type="text/x-kendo-template" id="car"> <div> <span>#: make #, </span> <a href="/cars/#= id #">#: model #</a> </div></script>var carTemplate = kendo.template($('#car').html());$('#some-tag').append(template({ id: i, make: car.make, model: car.model }));
![Page 21: Kendo UI Overview](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816359550346895dd41757/html5/thumbnails/21.jpg)
TemplatesLive Demo
![Page 22: Kendo UI Overview](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816359550346895dd41757/html5/thumbnails/22.jpg)
WidgetsThe cool stuff!
![Page 23: Kendo UI Overview](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816359550346895dd41757/html5/thumbnails/23.jpg)
Widgets Widgets
Appended to jQuery objects (DOM elements)
May have additional options depending on the widget and the usage of it$('#menu').kendoMenu();
$('#grid').kendoGrid({ dataSource: carsDataSource, editable: true, toolbar: ['create']});
![Page 24: Kendo UI Overview](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816359550346895dd41757/html5/thumbnails/24.jpg)
WidgetsLive Demo
![Page 25: Kendo UI Overview](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816359550346895dd41757/html5/thumbnails/25.jpg)
форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно
програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки
уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop
уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC
безплатен курс "Разработка на софтуер в cloud среда"
BG Coder - онлайн състезателна система - online judge
курсове и уроци по програмиране, книги – безплатно от Наков
безплатен курс "Качествен програмен код"
алго академия – състезателно програмиране, състезанияASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NET
курсове и уроци по програмиране – Телерик академия
курс мобилни приложения с iPhone, Android, WP7, PhoneGapfree C# book, безплатна книга C#, книга Java, книга C# Дончо Минков - сайт за програмиране
Николай Костов - блог за програмиранеC# курс, програмиране, безплатно
?? ? ?
??? ?
?
? ?
??
?
?
? ?
Questions?
?
Kendo UI Web
http://academy.telerik.com