This is a migrated thread and some comments may be shown as answers.

Problem with HTML element binding for HTML select

0 Answers 32 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Patrick
Top achievements
Rank 1
Patrick asked on 19 Sep 2012, 07:35 AM
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.

No answers yet. Maybe you can help?

Tags
MVVM
Asked by
Patrick
Top achievements
Rank 1
Share this question
or