Problem with HTML element binding for HTML select

[Patrick]

Hi,

We have a web user control with an input and a HTML select:

<input id="createSubTenant_Name" type="text" data-bind="value: SubTenantName" />
<select id="CreateSubTenant_Parent" data-bind="value: TenantId">
    <option></option>
</select>

The options will be added by JavaScript (text and value).
The binding with kendo.observable and kendo.bind in JavaScript:

var viewModel = kendo.observable({
    SubTenantId: "",
    SubTenantName: "",
    TenantId: ""
});

kendo.bind(window, viewModel);

The user has to fill the input box and select an entry. In the submit method, we will get the view model:

viewModel.toJSON();

And here is the problem. By default the first entry of the select is selected. If the user does not select another option of the select, the “TenantId” of the viewModel will be null. If the user selects another option of the select, the “TenantId” will be set in the viewModel perfectly.
Our actual work around:

var sel = document.getElementById('CreateSubTenant_Parent');
viewModel.TenantId = sel.options[sel.selectedIndex].value;

Almost the same problem appears with an input box. In another web user control, the user only has to type a name in input box. By typing enter the submit method will be called. In this case the cursor does not leave the input box and the same problem appears.

Is it a general problem? Can someone help?

Thanks.