Understanding Kendo UI for jQuery

{ {KendoUI for jQuery KendoUI for jQuery} } 1

{ {Denis Kyashif Denis Kyashif} } denis@newventuresoftware.com github.com/deniskyashif @deniskyashif 2
. 1

Say NO to the slow and painful 3

{ {Breaking the Ice Breaking the Ice} } 4 .
2

{ {Agenda Agenda} } jQuery UI Components Data Source Templates
5

Element: <head> Element: <body> Element: <title> Text: "My title" Element:
<h1> Text: "A heading" Element: <a> Text: "Link text" DOM Document Object Model document Attribut: href Root element: <html> 6 . 2

{ {jQuery jQuery} } Simpli es document traversal and manipulation,
event handling, animation, and Ajax with an easy-to-use API 6 . 3

{ {jQuery jQuery} } Been around since 2006 Open Source
Simple and easy to use Extensive browser support Used by 73% of the top 100k sites 6 . 4

{ {A Brief Look A Brief Look} } <button class="continue">Click</button>
$('button.continue').text('Next Step...'); $('button.continue').on('click', function(event) { hiddenBox.show(); }); 6 . 5

{ {AJAX AJAX} } $.ajax({ url: '/api/getWeather', method: 'GET', data:
{ zipcode: 97201 }, success: function( result ) { $('#weather-temp').text(result + ' degrees'); } }); 6 . 6

{ {jQuery Plugins jQuery Plugins} } 6 . 7

{ {How jQuery works How jQuery works} } $('section').css('color', 'red');
6 . 8

6 . 9

6 . 10

A jQuery plugin is simply a new method that extends
jQuery's prototype object. 6 . 11

{ {Live Demo Live Demo} } Implementing a custom jQuery
plugin. 6 . 12

{ {KendoUI KendoUI} } A complete JavaScript UI component library
that allows you to quickly build web apps using your framework of choice. 7

{ {UI Components UI Components} } 8 . 1

Kendo UI Components are simply jQuery plugins. $('#menu').kendoMenu(); 8 .
2

{ {Live Demo Live Demo} } 8 . 3

{ {Data Source Data Source} } An abstraction for using
local or remote data. 9 . 1

UI ≠ Data 9 . 2

{ {DataSource Features DataSource Features} } Retrieve from a remote
endpoint Maintain the data type and the structure Process serialization formats to and from an endpoint Synchronize CRUD operations Maintain an in-memory data caching Provide query mechanism via lter expressions Handles sorting, paging, grouping and aggregates 9 . 3

{ {Data Source Data Source} } 9 . 4

{ {Shared Data Source Shared Data Source} } 9 .
5

{ {Templates Templates} } 10 . 1

{ {Syntax Syntax} } Render values as raw HTML: Display
HTML encoded values: Execute arbitrary JavaScript code: #= value # #: value # # if(true) { # "Non-script content..." # } # 10 . 2

Inline // compile var template = kendo.template('<span>#: message #</span>'); //
render $("#container").html(template({ message: "Hello Kendo!" })); 10 . 3

External <div id="container"></div> <script id="externalTemplate" type="text/x-kendo-template"> <ul> # for (var
i = 0; i < collection.length; i++) { # <li>#: collection[i] #</li> # } # </ul> </script> // compile var template = kendo.template($('#externalTemplate').html()); // render $('#container').html(template({ collection: [0, 1, 2, 3, 4, 5] }) 10 . 4

{ {Escaping Escaping} } var templateWithHashSymbol = '<span> #: value
# \\# </span>'; 10 . 5

Templates in Kendo are rendered using string concatenation by executing
pure JavaScript code. For maximum performance they should be compiled with the following ag set to false: kendo.template('<p> #: message #</p>', { useWithBlock: false }); 10 . 6

{ {Kendo UI Theme Builder Kendo UI Theme Builder} }
11 . 1

{ {Using JSDO with Kendo UI Using JSDO with Kendo
UI} } telerik.com/whitepapers/kendo-ui/using-the-progress- jsdo-with-kendo-ui 11 . 2

When JS developers argue about which framework is the best.
11 . 3

{ {KendoUI Supports KendoUI Supports} } jQuery Angular React Vue
JSP ASP.NET MVC ASP.NET Core PHP 11 . 4

{ {Northwind Dashboard Northwind Dashboard} } demos.telerik.com/aspnet-mvc/html5-dashboard- sample-app/ github.com/telerik/kendoui-northwind-dashboard 11
. 5

{ {Learning Resources Learning Resources} } docs.telerik.com/kendo-ui/ demos.telerik.com/kendo-ui/ github.com/telerik/kendo-ui-core telerik.com/support/whats-new/kendo-ui/roadmap
newventuresoftware.com/blog 12

{ {Questions? Questions?} } 13

{ {Thank You! Thank You!} } denis@newventuresoftware.com github.com/deniskyashif @deniskyashif 14

{www.newventuresoftware.com}

Understanding Kendo UI for jQuery

Understanding Kendo UI for jQuery

More Decks by Denis Kyashif

Other Decks in Programming

Featured

Transcript