Knockout binding to Kendo controls

Question

I am new to KO and Kendo.

I have a form that has the following kendo controls: date picker, text box, radio button, checkbox

The view model is prepared like so:

function CouponViewModel(data) {
        selfCoupon.Code = ko.observable(data.Code);
        selfCoupon.DiscountValue = ko.observable(data.DiscountValue);
        selfCoupon.DiscountLevel = ko.observable(data.DiscountLevel);
        selfCoupon.OneTimeUse = ko.observable(data.observable);
        selfCoupon.CombineWithOther = ko.observable(data.CombineWithOther);
        selfCoupon.MinOrderPrice = ko.observable(data.MinOrderPrice);
        selfCoupon.MaxOrderPrice = ko.observable(data.MaxOrderPrice);
        selfCoupon.MinQty = ko.observable(data.MinQty);
        selfCoupon.MaxQty = ko.observable(data.MaxQty);
        selfCoupon.Status = ko.observable(data.Status);
}

The DiscountValue has three options from which the user can selct any one. So all three are radio buttons. The same goes for DiscountLevel.

OneTimeUse and CombineWithOther are functionally checkboxes but are shown as Yes/No toggles Same is for Status.

Rest all are plain text boxes.

The textboxes are binded like so:

@Html.TextBoxFor(p => p.Code, new { @class = "form-control", @data_bind = "value: Name", @autofocus = true, @maxlength = "50" })

For datepicker this is how far I got:

<input id="startDate" value="" style="width:150px;" />

No clue on the checkbox and radiobutton.

How do I go about binding the rest of the controls with KO? Any resources on this will greatly help.

Thanks in advance.

Daniel Daniel · Accepted Answer · 2014-10-16T09:37:14

0

votes

On the official website, there is a simple example of various form elements.

Knockout binding to Kendo controls

1 Answers