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

Refresh/Replace DataSource of Foreignkey DropDown List

1 Answer 255 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Anthony
Top achievements
Rank 2
Anthony asked on 01 Aug 2012, 05:40 PM
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()
)

1 Answer, 1 is accepted

Sort by
0
David
Top achievements
Rank 1
answered on 17 Aug 2012, 11:05 PM
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...
Tags
Grid
Asked by
Anthony
Top achievements
Rank 2
Answers by
David
Top achievements
Rank 1
Share this question
or