Create Knockout Bindings for Kendo UI
- Last UpdatedNov 15, 2023
- 1 minute read
Create Knockout bindings for specific Kendo UI widgets.
To create the Knockout bindings for the specific Kendo UI Widget
-
Create and add the following code to your knockout-kendo.custom.min.js file.
(function ()
{
var createBinding = ko.kendo.bindingFactory.createBinding.bind(ko.kendo.bindingFactory);//use constants to ensure consistency and to help reduce minified file size
var CLICK = "click",
CLICKED = "clicked",
CLOSE = "close",
COLLAPSE = "collapse",
CONTENT = "content",
DATA = "data",
ENABLE = "enable",
EXPAND = "expand",
ENABLED = "enabled",
EXPANDED = "expanded",
ERROR = "error",
FILTER = "filter",
HIDE = "hide",
INFO = "info",
ISOPEN = "isOpen",
MAX = "max",
MIN = "min",
OPEN = "open",
PALETTE = "palette",
READONLY = "readonly",
RESIZE = "resize",
SEARCH = "search",
SELECT = "select",
SELECTED = "selected",
SHOW = "show",
SUCCESS = "success",
SIZE = "size",
TARGET = "target",
TITLE = "title",
VALUE = "value",
VALUES = "values",
WARNING = "warning";
}()); -
Create binding for the specific Kendo UI widget to the function.
For information on Knockout bindings for Kendo UI widgets, see Knockout Bindings for Kendo UI (In this file, the Kendo UI widgets that are currently not used are commented. Uncomment the specific Kendo UI widget to create the bindings to the function).
// For example, to create Knockout binding for Autocomplete Kendo UI widget, use the following code
createBinding({
name: "kendoAutoComplete",
events: {
change: VALUE,
open: {
writeTo: ISOPEN,
value: true
},
close: {
writeTo: ISOPEN,
value: false
}
},
watch: {
enabled: ENABLE,
search: [SEARCH, CLOSE],
data: function (value)
{
ko.kendo.setDataSource(this, value);
},
value: VALUE
}
});