Foreign Key column in KendoGrid not displaying anything

I want to make dropdown when i edit this kendogrid. I'm using inline editing. In my case, when i display this kendogrid, the foreign key column didn't display anything. But when i edit it, it display the data.

Model

public IEnumerable<KotaPreviewModel> Read()
        {
            return db.Tbl_Kota.Where(kt=>kt.flag=="Y").Select(kota => new KotaPreviewModel
            {
                 id_kota = kota.id_kota,
                 namaKota = kota.nama_kota,
                 id_propinsi = kota.id_propinsi.Value
            });
        }

Controller

public ActionResult GetKtByJSON([DataSourceRequest] DataSourceRequest request)
        {
            return Json(km.Read().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }
public ActionResult Kota(int id)
        {
            ViewData["id"] = id;
            ViewData["id_propinsi"] = (from a in db.Tbl_Propinsi
                                        where a.flag == "Y"
                                        select new
                                        {
                                            id_propinsi = a.id_propinsi,
                                            propinsi = a.propinsi
                                        }).ToList();
            return View();
        }

View

@model IEnumerable<admission.Models.KotaModel>
@{
    ViewBag.Title = "Kota";
    Layout = "~/Views/Shared/_adminLayout.cshtml";
}

<div class="tables">
    <div class="table-responsive bs-example widget-shadow">
        <h4>Data Kota:</h4>
    @(Html.Kendo().Grid<admission.Models.KotaPreviewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.id_kota).Width(70).Title("No").Hidden();
        columns.Bound(p => p.namaKota).Title("Nama Kota");
        columns.ForeignKey(p => p.id_propinsi, (System.Collections.IEnumerable)ViewData["id_propinsi"], "id_propinsi", "propinsi")
            .Title("Provinsi");
        columns.Command(command => { command.Edit(); command.Destroy().Text("Inactive"); }).Width(250);
    })
    .ToolBar(toolbar => toolbar.Create())
            .Editable(editable => editable.Mode(GridEditMode.InLine))
            .Pageable()
            .Sortable()
            .Filterable()
            .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(5)
        .Events(events => events.Error("error_handler").Sync("sync_handler"))
        .Model(model => model.Id(p => p.id_kota))
        .Create(update => update.Action("Kt_Create", "Lokasi"))
        .Read(read => read.Action("GetKtByJSON", "Lokasi"))
        .Update(update => update.Action("Kt_Update", "Lokasi"))
        .Destroy(update => update.Action("Kt_Delete", "Lokasi"))
    )
)

    </div>
    </div>
<script>
</script>
<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
    function sync_handler(e) {
        this.read();
    }
</script>

Please help me. Thanks in advanced