Binds a HTML View to a View-Model.

Model View ViewModel (MVVM) is a design pattern which helps developers separate the Model from the View. The View-Model part of MVVM is responsible for exposing the data objects from the Model in such a way that those objects are easily consumed in the View.

Example

 <!-- View -->
 <div id="view">
   <!-- The value of the INPUT element is bound to the "firstName" field of the View-Model.
   When the value changes so will the "firstName" field and vice versa.  -->
   <label>First Name:<input data-bind="value: firstName" /></label>
   <!-- The value of the INPUT element is bound to the "lastName" field of the View-Model.
   When the value changes so will the "lastName" field and vice versa.   -->
   <label>Last Name:<input data-bind="value: lastName" /></label>
   <!-- The click event of the BUTTON element is bound to the "displayGreeting" method of the View-Model.
   When the user clicks the button the "displayGreeting" method will be invoked.  -->
   <button data-bind="click: displayGreeting">Display Greeting</button>
 </div>
 <script>
   // View-Model
   var viewModel = kendo.observable({
      firstName: "John",
      lastName: "Doe",
      displayGreeting: function() {
          // Get the current values of "firstName" and "lastName"
          var firstName = this.get("firstName");
          var lastName = this.get("lastName");
          alert("Hello, " + firstName + " " + lastName + "!!!");
      }
   });

   // Bind the View to the View-Model
   kendo.bind($("#view"), viewModel);
 </script>

Creates an ObservableArray instance that is bound to a HierarchicalDataSource. Required to bind a HierarchicalDataSource-enabled widget (such as the Kendo TreeView) to an observable array.

Example

var viewModel = kendo.observable({
    products: kendo.observableHierarchy([
        { text: "foo", items: [
            { text: "bar" }
        ] },
        { text: "baz" }
    ])
});

Sets or gets the current culture. Uses the passed culture name to select a culture from the culture scripts that you have included and then sets the current culture. If there is no corresponding culture then the method will try to find culture which is equal to the country part of the culture name. If no culture is found the default one is used.

Include culture JavaScript files and select a culture

<script src="jquery.js" ></script>
<script src="kendo.all.min.js"></script>
<script src="kendo.culture.en-GB.js"></script>
<script>
//set current culture to "en-GB".
kendo.culture("en-GB");
</script>

Get the current culture

var culture = kendo.culture();

Finds all Kendo widgets that are children of the specified element and calls their destroy method.

Replaces each format item in a specified string with the text equivalent of a corresponding object's value.

Example

kendo.format("{0} - {1}", 12, 24); //12 - 24
kendo.format("{0:c} - {1:c}", 12, 24); //$12.00 - $24.00

Returns

String The formatted string.

Encodes HTML characters to entities.

Example

var html = kendo.htmlEncode("<span>Hello</span>");
console.log(html); // outputs "<span>Hello</span>"

Returns

String The encoded string.

Initializes Kendo UI widgets in a given DOM element, based on data attributes.

Example

 <!-- View -->
 <div id="view">
    <select data-role="dropdownlist">
        <option>Foo</option>
        <option>Bar</option>
    </select>
 </div>

 <script>
   kendo.init($("#view"));
 </script>

Parses as a formatted string as a Date.

Example

kendo.parseDate("12/22/2000"); //Fri Dec 22 2000
kendo.parseDate("2000/12/22", "yyyy/MM/dd"); //Fri Dec 22 2000

Returns

Date the parsed date.

Parses as a formatted string as a floating point number.

Example

kendo.parseFloat("12.22"); //12.22

kendo.culture("de-DE");
kendo.parseFloat("1.212,22 €"); //1212.22

Returns

Number the parsed number.

Parses as a formatted string as an integer.

Example

kendo.parseInt("12.22"); //12

kendo.culture("de-DE");
kendo.parseInt("1.212,22 €"); //1212

Returns

Number the parsed number.

Parse a color string into a Color object. If the input is not valid, it throws an Error, unless the noerror argument is given.

Example

red = kendo.parseColor("#ff0000");
green = kendo.parseColor("#0f0");
// the sharp is optional:
blue = kendo.parseColor("0000ff"); // or 00f

red = kendo.parseColor("rgb(255, 0, 0)");
halfBlue = kendo.parseColor("rgba(0, 0, 255, 0.5)");

Returns

Color A Color object.

Renders the specified template using the provided data.

Example

var template = kendo.template("<li>#: name #</li>");
var data = [ { name: "John Doe" }, { name: "Jane Doe" }];
$("ul").html(kendo.render(template, data)); // sets the html to <li>John Doe</li><li>Jane Doe</li>

Converts a value to JSON. Uses JSON.stringify in browsers that support it.

Returns

String The JSON representation of the value.

Example

var json = kendo.stringify({ foo: "bar" });
console.log(json); // displays {"foo":"bar"}

Compiles a template to a function that builds HTML. Useful when a template will be used several times. Templates offer way of creating HTML chunks. Options such as HTML encoding and compilation for optimal performance are available.

Returns

Function the compiled template as a JavaScript function. When called this function will return the generated HTML string.

Basic template

var inlineTemplate = kendo.template("Hello, #= firstName # #= lastName #");
var inlineData = { firstName: "John", lastName: "Doe" };
$("#inline").html(inlineTemplate(inlineData));

Output:

Hello, John Doe!

Encode HTML

var encodingTemplate = kendo.template("HTML tags are encoded as follows: #:html#");
var encodingData = { html: "<strong>lorem ipsum</strong>" };
$("#encoding").html(encodingTemplate(encodingData));

Output:

HTML tags are encoded as follows: <strong>lorem ipsum</strong>

Use JavaScript in templates

var encodingTemplate = kendo.template("#if (foo) {# bar #}#");
var data = { foo: true};
$("#encoding").html(encodingTemplate(data)); // outputs bar

Escape sharp symbols in JavaScript strings

var encodingTemplate = kendo.template("<a href='\\#'>Link</a>");

Escape sharp symbols in script templates

<script type="text/x-kendo-template" id="template">
 <a href="\#">Link</a>
</script>

<script>
var encodingTemplate = kendo.template($("#template").html());
</script>

Example

var template = kendo.template("<strong>#: d.name #</strong>", { paramName: "d", useWithBlock: false });

options.useWithBlock Boolean(default: true)

Wraps the generated code in a with block. This allows the usage of unqualified fields in the template. Disabling the with block will improve the performance of the template.

Example

var template = kendo.template("<strong>#: data.name #</strong>", { useWithBlock: false }); // Note that "data." is used to qualify the field

console.log(template({ name: "John Doe" })); // outputs "<strong>John Doe</strong>"

Enables kinetic scrolling on touch devices

Formats a Number or Date using the specified format and the current culture. It allows to pass a specific culture setting.

Returns

String the string representation of the formatted value.

Formatting numbers and dates

//format a number using standard number formats and default culture en-US
kendo.toString(10.12, "n"); //10.12
kendo.toString(10.12, "n0"); //10
kendo.toString(10.12, "n5"); //10.12000
kendo.toString(10.12, "c"); //$10.12
kendo.toString(0.12, "p"); //12.00 %
//format a number using custom number formats
kendo.toString(19.12, "00##"); //0019
//format a number using standard number format and a specific culture de-DE (default culture is en-US)
kendo.toString(10.12, "c", "de-DE"); //10,12 €
//format a date
kendo.toString(new Date(2010, 9, 5), "yyyy/MM/dd" ); // "2010/10/05"
kendo.toString(new Date(2010, 9, 5), "dddd MMMM d, yyyy" ); // "Tuesday October 5, 2010"
kendo.toString(new Date(2010, 10, 10, 22, 12), "hh:mm tt" ); // "10:12 PM"

A range of useful supported by the current browser capabilities and features.

Returns a number of browser specific transformation properties

Returns a number of browser specific transition properties

Returns a number of properties that identify the current mobile browser. Parses navigator.userAgent to do it. Undefined on desktop.

0 - zero placeholder

Replaces the zero with the corresponding digit if one is present; otherwise, zero appears in the result string. kendo.toString(1234.5678, "00000"); // 01235

# - digit placeholder

Replaces the pound sign with the corresponding digit if one is present; otherwise, no digit appears in the result string. kendo.toString(1234.5678, "#####"); // 1235

. - decimal placeholder

Determines the location of the decimal separator in the result string. kendo.tostring(0.45678, "0.00"); // 0.46

, - group separator placeholder

Inserts a group separator between each group of digits. kendo.tostring(12345678, "##,#"); // 12,345,678

% - percentage placeholder

Multiplies a number by 100 and inserts a the percentage symbol (according to the current culture) in the result string.

e - exponential notation

kendo.toString(0.45678, "e0"); // 5e-1

; - section separator

Defines sections of separate format strings for positive, negative, and zero numbers.

"string"|'string' - literal string

Indicates literal strings which should be included in the result verbatim.

d - the day of the month, from 1 to 31

dd - the zero-padded day of the month - from 01 to 31

ddd - the abbreviated name of the day of the week

dddd - the full name of the day of the week

f - the tenths of a second

ff - the hundreds of a second

fff - the milliseconds

M - the month, from 1 to 12

MM - the zero-padded month, from 01 to 12

MMM - the abbreviated name of the month

MMMM - the full name of the month

h - the hour, using 12-hour clock - from 1 to 12

hh - the zero-padded hour, using 12-hour clock - from 01 to 12

H - the hour, using 24-hour clock - from 0 to 23

HH - the zero-padded hour, using 24-hour clock - from 00 to 23

m - the minute, from 0 to 59

mm - the zero-padded minute, from 00 to 59

s - the second, from 00 to 59

ss - the zero-padded second, from 00 to 59

tt - the AM/PM designator

Unbinds a tree of HTML elements from a View-Model.

Example

kendo.unbind($("body"));

toHSV

Returns the color in HSV representation. As HSV object, it has the following properties:

• h -- hue, an integer between 0 and 360
• s -- saturation, floating point between 0 and 1
• v -- value, floating point between 0 and 1
• a -- alpha, floating point between 0 and 1

This does not modify the current object, it creates a new one instead.

toRGB

Returns the color in RGB representation. The result has the following properties:

• r -- red component as floating point between 0 and 1
• g -- green component
• b -- blue component
• a -- alpha

This does not modify the current object, it creates a new one instead.

toBytes

Returns the color in "Bytes" representation. It has the same properties as RGB, but r, g and b are integers between 0 and 255 instead of floats.

This does not modify the current object, it creates a new one instead.

toHex

Returns a string in "FF0000" form (without a leading #).

toCss

Like toHex, but includes a leading #.

toCssRgba

Returns the color in RGBA notation (includes the opacity).

toDisplay

Returns the color in the best notation supported by the current browser. In IE < 9 this returns the #FF0000 form; in all other browsers it returns the RGBA form.

equals

Returns true if two colors are identical.

Parameters

other Color

This can also be a String parse-able with kendo.parseColor.