KendoUI Bridge Documentation
  • Introduction
  • About this application
    • Introduction
    • Navigation guide
    • Components catalog
    • Installation
    • Catalog index
    • Themes selector
  • About Aurelia
    • Key features
  • About KendoUI
    • Integrated with Aurelia
    • Why choose KendoUI
  • Developers tutorials
    • Introduction
    • Sample application structure
    • esnext - kendo
    • esnext-aspnetcore - kendo-2017
    • esnext-aspnetcore - kendo-2015
    • typescript - kendo
    • typescript-aspnetcore - kendo
    • esnext- webpack
    • typescript-webpack kendo
  • Developers notes
    • Current limitations
    • Loading a subset of controls
    • Lazy loading wrappers
    • Running gists
    • Kendo Tooltip HTML content
    • Bundling details
    • Dynamic content creation
    • Bundling step by step instructions
    • What you need to know
    • Localization
    • Prevent JSPM from loading jQuery
  • Bridge developers notes
    • Introduction
    • Bridge utilities
    • Generation of bindables
    • Babel DTS generator
    • Grid HTML api
    • Template compilation
    • Harvesting bindable variables
    • Registry helper class
    • Creating gists for the catalog app
  • Troubleshooting
    • Introduction
    • Using gists and GistRun
Powered by GitBook
On this page
  • 5.1 Current limitations
  • Two way binding
  1. Developers notes

Current limitations

PreviousDevelopers notesNextLoading a subset of controls

Last updated 7 years ago

Application Developer notes

5.1 Current limitations

This section contains additional information which we hope will be of value to Aurelia application developers using KendoUI bridge.

Two way binding

Let's just begin by saying that with plain Kendo controls it's not possible to have two-way databinding at all. We build a value-binding feature that allows you to two-way databind the value property and it uses the value() function of the Kendo control to tell it to update the value. So this is not "real" two-way databinding, but from a user perspective it would seem as shown in this: .

The datasource is also a bit unique. You can bind the datasource property of a control to a plain javascript object like we do here. Kendo's combobox is getting this javascript object and wraps it into a datasource class instance. The original reference to the datasource is lost, so if you update a property in there it will not be noticed by the control. Wrapping the plain javascript object into a new kendo.data.DataSource() is one of the solutions you may consider:

    datasource = new kendo.data.DataSource({
        transport: {
          read: function(options) {
            return System.import('samples/chart/area-charts/json/spain-electricity.json!json')
            .then(data => options.success(data));
          }
        },
        sort: {
          field: 'year',
          dir: 'asc'
        }
    });

That way Kendo's control wont wrap the datasource into a a kendo.data.DataSource instance again, but it will just use the original instance (call by reference is used instead of call by value with plain javascript objects). So if you use kendo.data.DataSource instead of the plain javascript object, so you should be able to bind a single datasource to multiple controls.

In all other cases you'd need to either use functions as enable(), setOptions() or even our recreate()function to tell the control to pick up the changed value

Note: Some Kendo controls have functions like setOptions() or setDataSource() that allows you to change an option of the Kendo control without having to destroy and recreate it.

example