Please ensure Javascript is enabled for purposes of website accessibility
Powered by Zoomin Software. For more details please contactZoomin

AVEVA™ Work Tasks

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

  1. 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";
    }());

  2. 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
    }
    });

TitleResults for “How to create a CRG?”Also Available in