Kendo UI Building Blocks

Kendo UI Building Blocks

cody lindley

Kendo UI Building Blocks

Kendo UI Building Blocks

  1. imperative instantiation via jQuery plugin
  2. imperative instantiation via widget constructor
  3. declarative instantiation via kendo.init()
  4. declarative instantiation via render()
  5. declarative instantiation via bind() (i.e. MVVM)
  6. declarative instantiation via AngularJS

6 Widget Instantiation Patterns :

  1. examine the demos
  2. read the docs
  3. reference the API

Learning To Do Something With A Widget :


$('#autocomplete').kendoAutoComplete({
    configuration_options: 'value',
    configuration_options: 'value',
    configuration_options: 'value'
});

var ac = $('#autocomplete').kendoAutoComplete().getKendoAutoComplete();

console.log(ac.options);

var ac = $('#autocomplete').kendoAutoComplete().getKendoAutoComplete();

console.log(ac.value());

var ac = $('#autocomplete').kendoAutoComplete().getKendoAutoComplete();

ac.bind('change',function(){
    console.log(this.value());
});
  1. inherited widget methods
  2. kendo.template() configuration option
  3. kendo.data.DataSource() configuration option

Kendo UI Conceptual Building Blocks:

kendo.template()


$("#dropdown").kendoDropDownList({
    template: kendo.template('<img src="#:url#/#:width#/#:height#"> #:name#')
});

'<p>Hello, #= firstName # #= lastName #</p>'


 +


{ firstName: 'John', lastName: 'Doe' } 


 = 


'<p>Hello, John Doe</p>'
    

    <script type="text/x-kendo-template" id="myTemplate">
        #if(isAdmin){#
            <li>#: name # is Admin</li>
        #}else{#
            <li>#: name # is User</li>
        #}#
    </script>




    <script id="javascriptTemplate" type="text/x-kendo-template">
        # var myCustomVariable = "foo"; #
        <p>
            #= myCustomVariable #
        </p>
    </script>




    <script id="javascriptTemplate" type="text/x-kendo-template">
        <ul>
        # for (var i = 0; i < data.length; i++) { #
            <li>#= data[i] #</li>
        # } #
        </ul>
    </script>

kendo.DataSource()

//Instance of kendo.data.DataSource();

$("#dropdown").kendoDropDownList({
    dataSource: new kendo.data.DataSource({ 
        data: [
            {url: 'http://p-hold.com/', name:'p-hold.com'}, 
            {url: 'http://lorempixel.com', name:'lorempixel.com'},
            {url: 'http://placehold.it', name:'placehold.it'}
        ]
    })
});
//Instance of kendo.data.DataSource();

$("#dropdown").kendoDropDownList({
    dataSource: new kendo.data.DataSource({ 
        data: [
            {url: 'http://p-hold.com/', name:'p-hold.com'}, 
            {url: 'http://lorempixel.com', name:'lorempixel.com'},
            {url: 'http://placehold.it', name:'placehold.it'}
        ]
    })
});

//array
$("#dropdown").kendoDropDownList({
    dataSource: [
        {url: 'http://p-hold.com/', name:'p-hold.com'}, 
        {url: 'http://lorempixel.com', name:'lorempixel.com'},
        {url: 'http://placehold.it', name:'placehold.it'}
    ]
});

//object, that mimics DataSource instance
$("#dropdown").kendoDropDownList({
    dataSource: {
        data:[
            {url: 'http://p-hold.com/', name:'p-hold.com'}, 
            {url: 'http://lorempixel.com', name:'lorempixel.com'},
            {url: 'http://placehold.it', name:'placehold.it'}
        ]
    }
});

"DataSource fully supports CRUD operations (Create, Read, Update, Destroy), and provides both client-side and server-side support for sorting, paging, filtering, grouping and aggregates."

- the docs

review

  1. inherited widget methods
  2. kendo.template() configuration option
  3. kendo.data.DataSource() configuration option

Kendo UI Conceptual Building Blocks:

Kendo UI Building Blocks

By Telerik DevRel

Kendo UI Building Blocks

Kendo UI widgets, in their most basic form, can be thought of as simple jQuery plugins. But this, of course, is only a cognitive tip of the iceberg in the understanding of a Kendo UI widget. Any serious usage of Kendo UI widgets can, and more than likely will, require knowledge of the methods inherited by all widgets and the use of kendo.template()'s and kendo.data.DataSource() instances as widget configuration values. These Kendo parts play an integral role in the lifecycle of Kendo UI widgets. I consider them the major building blocks one must grok when developing with Kendo UI. In this talk, we will examine the purpose and function of each of these parts and their usage with Kendo UI widgets.

  • 2,957