Kendo dropdownlist default selected item - kendo-ui

Question

I have the following code in a
jsfiddle example
var remainingFalilities = [
{"Text":"Facility 1","Value":"1"},
{"Text":"Facility 2","Value":"2"},
{"Text":"Facility 3","Value":"3"},
{"Text":"Facility 4","Value":"4"},
{"Text":"Facility 5","Value":"5"},
{"Text":"Facility 6","Value":"6"},
{"Text":"Facility 7","Value":"7"},
];
var ds = new kendo.data.DataSource({
data: remainingFalilities
});
var selectedFacilities = [
{"Text":"Facility 8","Value":"8"},
{"Text":"Facility 9","Value":"9"}];
var dataSource = new kendo.data.DataSource({
data: selectedFacilities,
batch: false,
pageSize: 20,
schema: {
model: {
id: "Value",
fields: {Text: { type: "string" }}
}
}
});
$("#FacilityGrid").kendoGrid({
dataSource: dataSource,
autoBind: true,
editable: { mode: "inline" },
sortable: true,
selectable: true,
toolbar: ["create"],
columns: [
{ command: ["destroy", "edit"], title: " ", width: "250px" },
{ field: "Text", title: "Facility Name", editor: facilityDropDownEditor },
]
});
function facilityDropDownEditor(container, options) {
$('<input required data-text-field="Text" data-value-field="Value" data-bind="value: Text"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataSource: ds
});
}
The Problem is, when a user clicks "Add new record" it adds a new item with the facility name dropdown showing the 1st item in the list. If the user clicks "Update", it saves the record but blanks out the facility name. The reason is, there really isn't an item selected in the dropdown. I know this because the selected value is null when it is passed to my controller code. So, I really want to know how to either
Not show the first item in the list until the user actually selects it in the list OR
set the selected item to the first item in the list so the value will not be null when passed to my controller.
The answer for both ways would be even better.

Answer 1

To not showing the dropdown's items until user select them manually use optionLabel
function facilityDropDownEditor(container, options) {
$('<input required data-text-field="Text" data-value-field="Value" data-bind="value: Text"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataSource: ds,
optionLabel: "Select an item..."
});
}
OR
Use index to put initially selected item.
function facilityDropDownEditor(container, options) {
$('<input required data-text-field="Text" data-value-field="Value" data-bind="value: Text"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataSource: ds,
index : 1
});
}

Answer 2

One option, not listed among your proposals, is setting optionLabel that is displayed when the value is null.
$('<input required data-text-field="Text" data-value-field="Value" data-bind="value: Text"/>')
.appendTo(container)
.kendoDropDownList(
{
autoBind: true,
dataSource: ds,
optionLabel:"Select Facility"
}
);
Your jsfiddle modified here