Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Understanding Kendo UI for jQuery

7a3f4cf57e03f53e7b37c8ef84338460?s=47 Denis Kyashif
November 17, 2017
Programming
0
50

Understanding Kendo UI for jQuery

7a3f4cf57e03f53e7b37c8ef84338460?s=128

Denis Kyashif

November 17, 2017
Tweet

More Decks by Denis Kyashif

See All by Denis Kyashif
7a3f4cf57e03f53e7b37c8ef84338460?s=48 deniskyashif
3
120
7a3f4cf57e03f53e7b37c8ef84338460?s=48 deniskyashif
0
10
7a3f4cf57e03f53e7b37c8ef84338460?s=48 deniskyashif
0
36
7a3f4cf57e03f53e7b37c8ef84338460?s=48 deniskyashif
0
72
7a3f4cf57e03f53e7b37c8ef84338460?s=48 deniskyashif
0
62

Other Decks in Programming

See All in Programming
B3d6e998ff66c957f00da6d795f9e32c?s=48 akihiroshiota
2
350
44f19f6204c2b29d3d430d91c389c6ea?s=48 ikikko
1
880
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
PRO
1
490
4c0c2a5a353b06c9d0238373872822bb?s=48 jason13f
1
3.8k
D63b0683b8fdd02c71c802691f97c04c?s=48 jogannaoki
0
1.3k
F21d69109b1c03921abf7d12f0fb6654?s=48 dscs
0
100
D4133d8efb46ae872d7a563b619bfc83?s=48 jmatsu
1
880
Bf04d1ee6fa2216133b23af8f609c70a?s=48 gatchan0807
0
1k
E41c91eb3efe7a796b8ae20c51a07f06?s=48 takoba
1
210
F21d69109b1c03921abf7d12f0fb6654?s=48 dscs
0
120
6e704ad00f166b420eba3d174713c82b?s=48 urushiyama
0
380
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
140

Featured

See All Featured
A9704266587836f7e784235e5073b93e?s=48 jmmastey
20
5.1k
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
261
20k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
236
18k
9128d500301ae51524e887bb680f471d?s=48 caitiem20
314
18k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
148
20k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
92
4.2k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
11
1.1k
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
778
200k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
270
17k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
55
4.8k
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
73
7.7k

Transcript

  1. { {KendoUI for jQuery KendoUI for jQuery} } 1

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

    . 1

  3. 2 . 2

  4. 2 . 3

  5. 2 . 4

  6. Say NO to the slow and painful 3

  7. 4 . 1

  8. { {Breaking the Ice Breaking the Ice} } 4 .

    2

  9. 4 . 3

  10. 4 . 4

  11. 4 . 5

  12. 4 . 6

  13. 4 . 7

  14. 4 . 8

  15. { {Agenda Agenda} } jQuery UI Components Data Source Templates

    5

  16. 6 . 1

  17. 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

  18. { {jQuery jQuery} } Simpli es document traversal and manipulation,

    event handling, animation, and Ajax with an easy-to-use API 6 . 3

  19. { {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

  20. { {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

  21. { {AJAX AJAX} } $.ajax({ url: '/api/getWeather', method: 'GET', data:

    { zipcode: 97201 }, success: function( result ) { $('#weather-temp').text(result + ' degrees'); } }); 6 . 6

  22. { {jQuery Plugins jQuery Plugins} } 6 . 7

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

    6 . 8

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

    6 . 9

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

    6 . 10

  26. A jQuery plugin is simply a new method that extends

    jQuery's prototype object. 6 . 11

  27. { {Live Demo Live Demo} } Implementing a custom jQuery

    plugin. 6 . 12

  28. { {KendoUI KendoUI} } A complete JavaScript UI component library

    that allows you to quickly build web apps using your framework of choice. 7

  29. { {UI Components UI Components} } 8 . 1

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

    2

  31. { {Live Demo Live Demo} } 8 . 3

  32. { {Data Source Data Source} } An abstraction for using

    local or remote data. 9 . 1

  33. UI ≠ Data 9 . 2

  34. { {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

  35. { {Data Source Data Source} } 9 . 4

  36. { {Shared Data Source Shared Data Source} } 9 .

    5

  37. { {Live Demo Live Demo} } 9 . 6

  38. { {Templates Templates} } 10 . 1

  39. { {Syntax Syntax} } Render values as raw HTML: Display

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

  40. Inline // compile var template = kendo.template('<span>#: message #</span>'); //

    render $("#container").html(template({ message: "Hello Kendo!" })); 10 . 3

  41. 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

  42. { {Escaping Escaping} } var templateWithHashSymbol = '<span> #: value

    # \\# </span>'; 10 . 5

  43. 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

  44. { {Live Demo Live Demo} } 10 . 7

  45. { {Kendo UI Theme Builder Kendo UI Theme Builder} }

    11 . 1

  46. { {Using JSDO with Kendo UI Using JSDO with Kendo

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

  47. When JS developers argue about which framework is the best.

    11 . 3

  48. { {KendoUI Supports KendoUI Supports} } jQuery Angular React Vue

    JSP ASP.NET MVC ASP.NET Core PHP 11 . 4

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

    . 5

  50. { {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

  51. { {Questions? Questions?} } 13

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

  53. {www.newventuresoftware.com}