Edit this page

Markup Widget Initialization

In addition to the jQuery plugin syntax, the Kendo UI widgets might be instantiated based on custom HTML attributes in several ways:

Option 1 The View and the mobile Application instantiate widgets based on the role HTML5 data attributes. Both use the MVVM internally.

Option 2 The kendo.bind method scans the passed DOM element contents for the data-role attributes and instantiates the respective widgets.

Option 3 The Kendo UI AngularJS directives support declarative initialization based on custom element attributes or custom tag names.

Important

The data attribute initialization is not designed to be combined with the Kendo UI server wrappers. The usage of wrappers is equivalent to jQuery plug-in syntax initialization. To create Kendo UI widget instances through the MVVM or AngularJS mechanisms, use no server wrappers for these instances.

While it is theoretically possible to initialize several different Kendo UI widgets from the same DOM element through the jQuery plug-in syntax, this is not recommended and is not supported with declarative initialization from markup.

Important

It is strongly recommended to initialize Kendo UI widgets from HTML elements, which are part of the DOM tree. The creation of widgets from document fragments might cause undesired side effects or JavaScript errors.

Declarative Widgets

In SPA View

The example below refers to a Single-Page-Application (SPA) View with an AutoComplete widget in the template. For more information on the SPA View, see the article on building Single Page Applications.

Example
    <div id="container"></div>
    <script id="index" type="text/x-kendo-template">
        <div>Hello <input data-role="autocomplete" data-source="['foo', 'bar', 'baz']" />!</div>
    </script>

    <script>
        var index = new kendo.View('index');
        index.render("#container");
    </script>

In MVVM Pattern

The example below refers to an MVVM-bound DOM element with an AutoComplete widget.

Example
    <div id="container">
        <div>Hello <input data-role="autocomplete" data-bind="source: source" />!</div>
    </div>

    <script>
        kendo.bind($("#container"), {
            source: ['foo', 'bar', 'baz']
        });
    </script>

Important

The data-bind attribute syntax establishes a two-way binding between the widget options—in that case, the data source—and the view model field (the source). For more information, refer to the MVVM introduction help topic.

In Hybrid UI Applications

The example below refers to a Kendo UI hybrid Application with a view and an AutoComplete widget. For more information about Hybrid UI applications, refer to the article on building hybrid mobile applications.

Example
    <div data-role="view" data-model="foo">
        <div>
        An autocomplete widget
        <input data-role="autocomplete" data-source="['foo', 'bar', 'baz']" />
        </div>

        <div>
        A widget bound to the mobile view ViewModel dataSource field
        <input data-role="autocomplete" data-bind="source: dataSource" />
        </div>
    </div>

    <script>
        var foo = kendo.observable({
            dataSource: ['foo', 'bar', 'baz']
        });

        new kendo.mobile.Application();
    </script>

Configuration

In addition to the data-role attribute, the declarative initialization parses other data attributes and passes them as configuration options to the widget constructor. For more information on the supported data attributes and on how to bind them to widget events, see the section on data attributes.

AngularJS Directives

The example below refers to the Kendo UI AngularJS AutoComplete directive. For more information on the features of the Kendo UI AngularJS directives, see the introductory article on AngularJS.

Example

    <div ng-app="myApp">
        <div ng-controller="MyController">
            <input kendo-autocomplete k-data-source="dataSource" />
        </div>
    </div>

    <script>
        var myApp = angular
                        .module("myApp", [ "kendo.directives" ])
                        .controller("MyController", function($scope) {
                          $scope.dataSource = [
                                     'foo', 'bar', 'baz'
                                      ]
                            });
    </script>

See Also

Other articles on getting started with Kendo UI: