[Solved] Knockout Binding

[Emad]

Can I bind my telerink controls using knockout?  How?

[Lini]

Hello,

 It is possible to use Knockout in Windows 8 HTML apps. In order to bind any of the RadControls for Windows 8, you need to create a custom binding. First of all this is needed so the control can be created correctly in each instance of a template. Second, in order to apply the bindings, some of the RadControls event handlers (such as change) need to be used. Here is a simple template for the RadDropDownList control, that allows you to create a select with some items (name/value pairs).

ko.bindingHandlers.telerikDropDownList = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        //create control and set properties, add handler for value binding

        var bindings = valueAccessor();
        //create dataSource from data array
        if (bindings.options) bindings.dataSource = new Telerik.Data.DataSource(bindings.options);

        var ddl = new Telerik.UI.RadDropDownList(element, valueAccessor());

        //set initial value and add handler for change
        if (typeof (bindings.value) === "function") {
            ddl.onchange = function ddl_change(args) {
                bindings.value(bindings.options[args.target.index]);
            }
            ddl.index = bindings.options.indexOf(bindings.value());

        }
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        //update value
        var bindings = valueAccessor(), ddl = element.winControl;
        if (!ddl || !bindings) return;
        if (typeof (bindings.value) == "function") ddl.index = bindings.options.indexOf(bindings.value());
    }
};

After you have added the custom binding, you can use it in your HTML page:

<span data-bind="telerikDropDownList: {options: $root.availableMeals, dataTextField:'mealName', dataValueField:'price', value: meal}"></span>

For a more complete example, I am attaching a simple page that I made using the above custom binding and one of the Knockout tutorials (http://learn.knockoutjs.com/#/?tutorial=collections). You can test it by creating a new JavaScript Navigation App, adding the Telerik.UI and Knockout references and the HTML/JS files from the attached ZIP file. Kind regards,
Lini
the Telerik team