Kendo UI Building Blocks

cody lindley

www.codylindley.com

bit.ly/kendouibb

Kendo UI Building Blocks

imperative instantiation via jQuery plugin
imperative instantiation via widget constructor
declarative instantiation via kendo.init()
declarative instantiation via render()
declarative instantiation via bind() (i.e. MVVM)
declarative instantiation via AngularJS

6 Widget Instantiation Patterns :

examine the demos
read the docs
reference the API

Learning To Do Something With A Widget :

http://demos.telerik.com/kendo-ui/

http://docs.telerik.com/kendo-ui/introduction


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

http://docs.telerik.com/kendo-ui/introduction


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

console.log(ac.options);

http://docs.telerik.com/kendo-ui/introduction


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

console.log(ac.value());

http://docs.telerik.com/kendo-ui/introduction


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

ac.bind('change',function(){
    console.log(this.value());
});

http://codylindley.github.io/the-kendo-ui-book/

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

Kendo UI Conceptual Building Blocks:

http://docs.telerik.com/kendo-ui/api/javascript/ui/widget

kendo.template()

http://docs.telerik.com/kendo-ui/framework/templates/overview


$("#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()

http://docs.telerik.com/kendo-ui/framework/datasource/overview

//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

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

Kendo UI Conceptual Building Blocks:

bitly.com/next-lindley-1