Kendo Jquery ForeignKey Dropdownlist values

Question

My application is MVC 5, using Kendo UI Jquery editable grid. One of the column is a dropdownlist using:

{ field: "ApplicableCourse_ID", title :"Course", values: myDDL1 }

I use the following Ajax to generate the values array myDDL1

$.ajax({
        url:  '@Url.Action("GetFreeAccessDropdownList", "fff")',
        type: "GET",
        async: false,
        cache: false,
        dataType: "json",
        success: function (result) {
            myDDL1.push(JSON.stringify(result.Grid1));
           var grid = $("#grid").data("kendoGrid");
            grid.refresh();
        },
        error: function (request, status, error) {
            alert(request.responseText);
        }
    });

I get the correct value and text:

However; the grid show the value instead of the text. If I use static array:

var myDDL1 = [
        { "value": 54, "text": "Fuel Spill Response Plan" },
        { "value": 56, "text": "Community Fuel Contractor Manual" },
        { "value": 91, "text": "Blocking and Cribbing" }];

The correct text is displayed. Is there a difference between dynamic array and static array?

Answer 1

Calling the refresh() method of the grid after populating the collection would be insufficient as it would not refresh the templates and the foreign key column.

There are two options:

1. Make the AJAX call directly from the column and there is no need for handing the success callback:

Remote data binding for foreign key

2. Set the autoBind property of the grid to false. Inside the success callback of your custom AJAX, call the fetch() method of the data source of the grid.

Answer 2

Just in case someone else has this problem; the solution I used was to generate in the controller a ViewBag of the list:

var grid1 = db.Courses.Select(c => new
            {
                value = c.ID,
                text = c.Name,
            }).ToList();
            ViewBag.Course = grid1;

In the view

var myDDL1 = @Html.Raw(Json.Encode(ViewBag.Course));

The Grid column

field: "ApplicableCourse_ID", filterable: { multi: true, search: true }, values: myDDL1