KendoUI implemention issue

Question

I have a combo box and a check box in a page. Also, I used KendoUi library. The combo box has two options (0% and 100%) and if the check box is checked the combo box value would be 100%. The problem is, Kendoui library hide the main combo box and generate its own elements look like the combo box. However, by clicking check box the generated combo box's value isn't changed( not the original combo box). My question is:
Is it possible to implement "KendoUi" library on some elements not all in a page?

Answer 1

If this is your HTML code:

<div>
    <div>
        Combobox:
        <select id="combo"></select>
    </div>
    <div>
        <label>
            100%:
            <input id="hundred" type="checkbox" data-bind="checked: option1"/>
        </label>
    </div>
</div>

And the JavaScript initialization of the combobox:

$("#combo").kendoComboBox({
    dataTextField : "text",
    dataValueField: "value",
    dataSource    : [
        { text: "0", value: "1" },
        { text: "100%", value: "2" }
    ]
});

You should define a handler for changes in the checkbox as follow:

$("#hundred").on("change", function () {
    if ($(this).is(":checked")) {
        $("#combo").data("kendoComboBox").value(2)
    }
})

Where I intercept any change of the combobox and if it is checked then I set the value of the combobox to 2 that according with previous definition is 100%.

JSFiddle showing it here http://jsfiddle.net/OnaBai/uA6F3/