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

Understanding Kendo UI for jQuery

Understanding Kendo UI for jQuery

Avatar for Denis Kyashif

Denis Kyashif

November 17, 2017
Tweet

More Decks by Denis Kyashif

Other Decks in Programming

Transcript

  1. 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
  2. { {jQuery jQuery} } Simpli es document traversal and manipulation,

    event handling, animation, and Ajax with an easy-to-use API 6 . 3
  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
  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
  5. { {AJAX AJAX} } $.ajax({ url: '/api/getWeather', method: 'GET', data:

    { zipcode: 97201 }, success: function( result ) { $('#weather-temp').text(result + ' degrees'); } }); 6 . 6
  6. A jQuery plugin is simply a new method that extends

    jQuery's prototype object. 6 . 11
  7. { {KendoUI KendoUI} } A complete JavaScript UI component library

    that allows you to quickly build web apps using your framework of choice. 7
  8. { {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
  9. { {Syntax Syntax} } Render values as raw HTML: Display

    HTML encoded values: Execute arbitrary JavaScript code: #= value # #: value # # if(true) { # "Non-script content..." # } # 10 . 2
  10. Inline // compile var template = kendo.template('<span>#: message #</span>'); //

    render $("#container").html(template({ message: "Hello Kendo!" })); 10 . 3
  11. 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
  12. 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
  13. { {Using JSDO with Kendo UI Using JSDO with Kendo

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