Compatibility with Knockout ?

[Carl]

The Knockout JavaScript library (see http://knockoutjs.com/) appears to be growing in popularity, and offers a number of advantages that exploit the MVVM pattern in contrast with jQuery. And according to the Knockout web site docs, Knockout can co-exist with jQuery.

So my question to the Development Team for MVC Extensions, especially the Grid, will there be support for enabling extensibility of the Telerik Grid using Knockout?

Please offer any comments... Thanks!

[Atanas Korchev]

Hi Carl,

I am sending a sample project showing how to use the input components (DateTimePicker and  NumericTextBox) with KnockoutJS (there is some JavaScript required).

As for the grid could you share with us what kind of support you mean? The grid editing is done by the grid itself - it tracks the changes of the model internally without the need of a third party JavaScript library.

Regards,
Atanas Korchev
the Telerik team

[Corey Gaudin]

What about the ComboBox/AutoComplete box? Can you do a Knockout JS Example with those. I agree that it would be hard to see a direct need for the Grid with Knock JS as it relies on Server Side calls itself, but a dropdown is something that would be in line with the Date/Numeric control in being databound to a View Model clientside.

[Marcus]

Just thought I'd share my experiences with getting KnockoutJS working with a RADDatePicker control.
Note that I'm using ASP.NET rather than the MVC framework...
I based my code from the example posted above.

<telerik:RadDatePicker ID="RadDatePicker1" runat="server" data-bind="value: fromDate">

<ClientEvents OnDateSelected="DatePicker_DateSelected" />

<DateInput runat="server" data-bind="value: fromDate"/>

</telerik:RadDatePicker>

and...

function DatePicker_DateSelected(sender, e) {

$(sender.get_textBox()).val(sender.get_dateInput()._initialValue);

$(sender.get_textBox()).trigger("change");    

};

All well and good but it would be nice to avoid having to call the hidden _initialValue field on the date input - if I don't do this then entering eg. 18 in the DatePicker (which neatly translates to 18-Aug-2011 as I would like) leaves the value in the view model as 18 whereas I want the parsed "date".
Does anyone have similar experiences or suggestions as to how to avoid this somewhat "hacky" way of doing things?

If you would like to see more code to support the above sing out and I will put together an example but this should hopefully be enough to see what I'm doing.

Thanks!

Marcus

[bdukes]

I built a custom binding for the RadDatePicker, rather than doing a value binding on the two inputs.  It seems to be working pretty well for me so far.

ko.bindingHandlers.date = {
    init: function (element, getValue) {
        var datePicker = getDatePicker(element),
            dateObservable = getValue();

        datePicker.add_dateSelected(function (sender, args) {
            dateObservable(args.get_newDate());
        });
    },
    update: function (element, getValue) {
        var datePicker = getDatePicker(element),
            dateValue = ko.utils.unwrapObservable(getValue());

        datePicker.set_selectedDate(dateValue);
    }
};

The getDatePicker function is hardcoding the ID.  You could probably add the client ID to the control's attributes collection, and use that instead of hardcoding there.

getDatePicker = function (datePickerParentElement) {
    return $telerik.findControl(datePickerParentElement, 'SpecificDatePicker');
}

Hope that helps someone.

I've also tried doing this on the RadNumericTextBox, but when I add the data-bind attribute there, it doesn't go on the wrapper, so I probably will need to adjust how I'm getting the client-side control for that case.

[Kenneth]

Atanas!  Thanks so much for the reference solution, it's exactly what I need!

I'm doing something with an additional twist -- the Telerik control (in this case, a DropDownList) -- is loaded after initial page load via Ajax.  I have to make a specific ko.applyBindings() call with the pertinent ViewModel and the newly created DOM element.  Everything works great except for the initial selected value, I'll have to figure it out.

[Jeremy]

Hi Kenneth, are you able to share your code for the dropdownlist bindings? I wouldnt mind getting some hints on how this is implemented.

[Jonathan]

Is it possible to make the combos work with knockout?

[Kenneth]

Hey Jeremy -- Could you be more specific of what you'd like some insight on?  It's been a couple of months (and a couple of holidays) since I last worked with this. =)