Refresh/Replace DataSource of Foreignkey DropDown List

[Anthony]

I am attempting to refresh a foreign key DropDownList after the list of available foreign keys has changed. I have a grid of holiday schedules with a custom action in the toolbar to allow for the CRUD of holidays. The custom action brings up a popup form to allow this. My challenge is that when the grid is first created, the list of foreign keys for the holidays is statically assigned. What I have attempted to do is react to the edit event on the grid and at that time assign a new DataSource object to the DropDownList, update the DataTextField, DataValueFied, execute read on the dataSource object, then refresh the DropDownList. This is not working. Any help would be greatly appreciated!

APS.NET MVC 3

@using ePN.Core.Domain

@using Kendo.Mvc.UI.Fluent

@model VW_HolidayDatesGridDisplay

@{

    ViewBag.Title = "Holiday Schedule";

}

@functions {

 

    private void GridCommandDef(GridColumnFactory<VW_HolidayDatesGridDisplay> columns)

    {

        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);

        columns.Bound(p => p.ID).Hidden();

        columns.Bound(p => p.Year).Width(50);

        columns.Bound(p => p.Month).Width(100);

        columns.ForeignKey(p => p.HolidayID, (IEnumerable<BankHoliday>) ViewBag.Holiday, "ID", "Name")

            .Title("Name")

            .Groupable(false)

            .Sortable(false);

        columns.Bound(p => p.HolidayDate).Format("{0:MM/dd/yyyy}").Groupable(false).EditorTemplateName("Date").Width(100);

    }

 

    private void GridDataSource(DataSourceBuilder<VW_HolidayDatesGridDisplay> dataSource)

    {

        dataSource.Ajax()

            .Model(AjaxDataSourceBuilder)

            .Create(create => create.Action("Holidays_Create", "Holiday"))

            .Read(read => read.Action("Holidays_Read", "Holiday"))

            .Update(update => update.Action("Holidays_Update", "Holiday"))

            .Destroy(destroy => destroy.Action("Holidays_Destroy", "Holiday"));

    }

 

    private void AjaxDataSourceBuilder(DataSourceModelDescriptorFactory<VW_HolidayDatesGridDisplay> model)

    {

        model.Id(p => p.ID);

        model.Field(p => p.Year).Editable(false);

        model.Field(p => p.Month).Editable(false);

        model.Field(p => p.HolidayID).DefaultValue(1);

        model.Field(p => p.HolidayDate);

    }

 

    private void GridToolBarDef(GridToolBarCommandFactory<VW_HolidayDatesGridDisplay> toolbar)

    {

        toolbar.Create().Text("Schedule a Holiday");

        GridToolBarCustomCommandBuilder<VW_HolidayDatesGridDisplay> popup = toolbar.Custom();

        popup.Text("Create New Holiday");

        popup.Name("NewHoliday");

        popup.Url("#");

        popup.HtmlAttributes(new {onclick = "void(openModal())", style="float:right"});

    }

 

 

}

@section PageScripts

{

    <script type="text/javascript">

        // <reference path="/Scripts/kendo.all-vsdoc.js" />

        var holidayWindow;

        var holidayDataSource = new kendo.data.DataSource({

            transport: { dataType: "json", cache: false, read: { url: "@Url.Action("BankHolidays_Read","BankHoliday",null,"http")" } },

            schema: {

                type: "json",

                data: function(response) { return response.Data; },

                model: {

                    fields: {

                         ID: { editable: false, nullable: false, type: "number" },

                         Name: { editable: false }

                    }

                }

            }

        });

 

        var rowEdit = function(e) {

            var ddl = $("#HolidayID").data("kendoDropDownList");

            ddl.dataTextField = "Name";

            ddl.dataValueField = "ID";

            ddl.dataSource = holidayDataSource;

            ddl.refresh();

            console.log(["DDL",ddl]);

        };

 

        var openModal = function () {

            var mWindow  = holidayWindow || $("#modalWindow").kendoWindow({

                actions: ["Refresh", "Close"],

                title: "Manage Holidays",

                visible: false,

                height: "400px",

                width: "600px",

                modal: true,

                draggable: false,

                resizable: false,

                content : "@Url.Action("Index","BankHoliday",null,"http")"

            }).data("kendoWindow");

            mWindow.center().open();

        };

    </script>

}

<h2>Holiday Schedule</h2>

<div id="modalWindow"></div>

@(Html.Kendo().Grid<VW_HolidayDatesGridDisplay>()

    .Name("Grid")

    .Events(e => e.Edit("rowEdit"))

    .Columns(GridCommandDef)

    .DataSource(GridDataSource)

    .ToolBar(GridToolBarDef)

    .Editable(settingsBuilder => settingsBuilder.Mode(Kendo.Mvc.UI.GridEditMode.InLine))

    .Scrollable(settingsBuilder => settingsBuilder.Height(400))

    .Groupable()

    .Sortable()

)

[David]

I have a very similar situation, and I've been working on this problem for days...any solution yet?  I can't find any way of making this work, let alone a clean one...