Kendo UI

javascript-mvc

http://www.kendoui.com/

http://www.icenium.com/community/blog/icenium-team-blog/2013/03/26/demystifying-cordova-and-phonegap
http://www.kendoui.com/blogs/teamblog/posts/13-03-28/what-is-the-point-of-promises.aspx
http://www.kendoui.com/blogs/teamblog/posts/13-04-11/the-kendoui-backbone-integration-project-and-repository.aspx
http://www.kendoui.com/blogs/teamblog/posts/13-03-27/introducing-the-kendo-ui-labs.aspx

http://www.kendoui.com/videos.aspx
http://onabai.wordpress.com/2012/09/13/zafu-couchdb-and-kendo-ui-part-3/

Declarative initialization:
http://docs.kendoui.com/howto/add-widgets
http://docs.kendoui.com/howto/declarative_initialization
http://docs.kendoui.com/getting-started/framework/mvvm/bindings/attr

Styling:
http://docs.kendoui.com/getting-started/web/appearance-styling

Charts & Graphs:
http://docs.kendoui.com/tutorials/five-tips-for-accessible-charts-with-dataviz
http://docs.kendoui.com/howto/add-charts-and-graphs-to-an-application

MVVM:
http://docs.kendoui.com/howto/declarative_initialization
http://docs.kendoui.com/getting-started/framework/mvvm/overview
http://docs.kendoui.com/getting-started/framework/mvvm/observableobject
http://docs.kendoui.com/tutorials/mvvm-in-kendo-ui
http://docs.kendoui.com/getting-started/framework/mvvm/bindings/attr
http://www.kendoui.com/blogs/teamblog/posts/12-03-09/bind_this_a_look_at_kendo_ui_mvvm.aspx

Template:
http://docs.kendoui.com/getting-started/framework/templates/overview
http://docs.kendoui.com/getting-started/framework/templates/performance
http://docs.kendoui.com/howto/load-templates-external-files
http://www.kendoui.com/blogs/archive/11-08-26/kendo_ui_templates_faster_than_a_speeding_resig.aspx
http://demos.kendoui.com/web/templates/index.html

Validation:
http://docs.kendoui.com/getting-started/framework/validator/overview

Globalization:
http://docs.kendoui.com/getting-started/framework/globalization/dateformatting
http://docs.kendoui.com/getting-started/framework/globalization/dateparsing
http://docs.kendoui.com/getting-started/framework/globalization/definecultureinfo
http://docs.kendoui.com/getting-started/framework/globalization/overview
http://docs.kendoui.com/getting-started/framework/globalization/numberformatting
http://docs.kendoui.com/getting-started/framework/globalization/numberparsing

DataSource:
http://docs.kendoui.com/howto/use-the-datasource-component
http://docs.kendoui.com/getting-started/framework/datasource/overview
http://docs.kendoui.com/getting-started/framework/hierarchicaldatasource/overview
http://docs.kendoui.com/howto/bind-the-grid-to-remote-data
http://docs.kendoui.com/howto/interact-with-an-existing-database
http://demos.kendoui.com/web/datasource/index.html

ListView:
http://docs.kendoui.com/howto/howto-use-the-listview-of-kendo-ui-web

Grid:
http://docs.kendoui.com/getting-started/web/grid/walkthrough
http://docs.kendoui.com/getting-started/web/grid/overview
http://docs.kendoui.com/getting-started/web/grid/editing

Mobile:
http://docs.kendoui.com/howto/build-apps-with-kendo-ui-mobile
http://docs.kendoui.com/howto/universal-mobile-apps-html5
http://docs.kendoui.com/tutorials/build-apps-with-kendo-ui-mobile

Various widgets:
http://docs.kendoui.com/getting-started/framework/draganddrop/drag
http://docs.kendoui.com/getting-started/web/autocomplete/overview

Detail examples:
http://docs.kendoui.com/tutorials/PHP/build-apps-with-kendo-ui-and-php
http://docs.kendoui.com/tutorials/PHP/build-apps-with-kendo-ui-and-php-2

Templates:

Normal tokens are denoted by:

#= tokenName #

You can have expression:

#= new Date().toLocaleDateString() #

Simple template string:

var templateString = "Hello, #= firstName # #= lastName #";

We can use an HTML element to store complex template:

var template = kendo.template($('#template').html());

Data is a JSON object:

var data = { firstName: "John", lastName: "Doe" };

The template object is a function. To process the template, invoke the template function and pass in the data object:

var template = kendo.template(templateString);
var result = template(data);

HTML can be encoded using ${ tokenName }:

    var encodingTemplate = kendo.template("HTML tags are encoded like this - ${ html }");
    var encodingData = { html: "<strong>lorem ipsum</strong>" };
    var result = encodingTemplate(encodingData);

We can use JavaScript inside the template:

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

Data Source:

Simple data source:

    var dataSource = new kendo.data.DataSource({
        data: movies,
        change: function() { // subscribe to the CHANGE event of the data source
            $("#movies tbody").html(kendo.render(template, this.view())); // populate the table
        }
    });
    // read data from the "movies" array
    dataSource.read();

    var orders = [ { orderId: 10248, customerName: "Paul Smith" }, { orderId: 10249, customerName: "Jane Jones" }];
    var dataSource = new kendo.data.DataSource({
             data: orders
    });

Remote data source: must define the "transport" and "schema" configuration properties:

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "http://search.twitter.com/search.json", // the remove service url
            dataType: "jsonp", // JSONP (JSON with padding) is required for cross-domain AJAX
            data: { //additional parameters sent to the remote service
                q: function() {
                    return $("#searchfor").val();
                }
            }
        }
    },
    schema: { // describe the result format
        data: "results" // the data which the data source will be bound to is in the "results" field
    },
    change: function() { // subscribe to the CHANGE event of the data source
        $("#tweets").html(kendo.render(template, this.view()));
    }
});

// read data from the remote service
dataSource.read();

Shared data source:

    var transport = {
        read: {
            url: "../../content/web/datasource/internet-users.json",
            dataType: "json"
        }
    };

    var countriesDataSource = new kendo.data.DataSource({
        transport: transport,
        group: {
            field: "country",
            dir: "asc"
        }
    });

    var sharedDataSource = new kendo.data.DataSource({
        transport: transport,
        sort: {
            field: "year",
            dir: "asc"
        }
    });

    function filterCountries() {
        sharedDataSource.filter([{
            field: "country",
            operator: "equals",
            value: $("#country").val()
        }, {
            field: "year",
            operator: "greaterThanEqual",
            value: 2000
        }]);
    }

    for (var group in countriesDataSource.view())  {
        group = countriesDataSource.view()[group];
        for (var i = 1; i < group.items.length; i++) {
            group.items[i].growth = (group.items[i].value - group.items[i-1].value) / 100.0;
        }
    }

Validation:
Form Validation

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License