How to allow Null for a Select.

[Tess]

OK, I have an editor form for a record in a datasource.  There is a foreign key in the record that calls out to another table.  To represent the legal values, we are using a dropdown list in the form, populated by a datasource that represents the foreign table.  The HTML looks like this (names have been changed):

<select data-role="dropdownlist" data-value-field="Other_Id" data-text-field="Name" data-bind="source: otherDataSource, value: record.Other_Id"></select>

This is working FINE, and populates the dropdown with the required values.  However, I need to be able to support null values in record.Other_Id.  Right now, if record.Other_Id is null, it instead sets it to the first value in otherDataSource.  That's not cool.

Is there some (ANY!) way for me to get this thing to provide a null option for cases in which record.Other_Id is null?

Thanks for your time!

Tess

[Tess]

In case nobody comes up with a more correct answer, I found a kludgy way to make this work.

Some background: My form is being loaded from an external html file, via jQuery's load function, and displayed in a window, and there may be multiple instances of that same form loaded into our page at any given point in time.  This created some interesting challenges for working around the stated problem.

The HTML I ended up using is this:

<div class="WindowContents SpellEditor">

    <label>ID</label>

    <span class="InputField" data-bind="text: record.Record_Id"></span>

    <label>Name</label>

    <div class="InputField">

        <input type="text" class="k-textbox EditorEntry" data-bind="value: record.Name, events: { change: change }" />

    </div>

 

    <!-- ETC... -->

 

    <label>Other Field:</label>

    <div class="InputField">

        <input id="other_picker" data-value-field="Other_Id" data-text-field="Name" data-bind="value: record.Other_Id"/>

    </div>

 

    <!-- ETC. -->

 

</div>

 

<script>

    $("#other_picker").kendoDropDownList({

        dataSource: dataSource['other'],

        dataTextField: "Name",

        dataValueField: "Other_Id",

        optionLabel: "None"

    });

 

    $("#other_picker").id = null;

</script>

Incredibly, this SEEMS to work.  Does anyone have a less-kludgy solution?