DropDownList Text will disappears

[Nick Gerne]

I have a grid with a Country (ID, Name) and a DropDownList for a list of presidents. The drop down list needs to filter based on the Country. This far I have gotten, however I can't use ViewData because the list is dynamic based on the country and the # of presidents is large.

My problem...
When the grid first loads and there is a PresidentID in the row  - the President's name is not visible, only the PresidentID

Note that PresidentID is a nullable int!


The ViewModel

public class CountryViewModel
{
    public int CountryID { get; set; }
    public string CountryName { get; set; }

    [UIHint("Presidents")]
    public int? PresidentID { get; set; }
}

Simplified Grid

@(Html.Kendo().Grid<CountryViewModel>()
  .Name("CountriesGrid")
  .Columns(c =>
               {
                   c.Bound(x => x.CountryName)
                   c.Bound(x => x.PresidentID)
                       .EditorTemplateName("Presidents")
               })
  .Editable(e => e.Mode(GridEditMode.InCell))
  .Events(x => x.Edit("onEdit"))
  .DataSource(ds => ds
       .Ajax()
       .ServerOperation(false)
       .AutoSync(true)
       .Model(m =>
           {
           m.Id(x => x.CountryID);
           m.Field(x => x.CountryID).Editable(false);
           m.Field(x => x.PresidentID).DefaultValue(1);
           })
       .Read(r => r.Action("GetCountries", "Country"))
       .Update(u => u.Action("UpdateCountry", "Country"))
 ))

JavaScript on the same view as the grid...

<script>
function getCountryID() {
        var row = $(event.srcElement).closest("tr");
        var grid = $(event.srcElement).closest("[data-role=grid]").data("kendoGrid");
        var dataItem = grid.dataItem(row);

        return { CountryID: dataItem.CountryID }
    }

//for InCell edit mode
function onEdit(e) {
    var dropDown = e.container.find("[data-role=dropdownlist]").data("kendoDropDownList");
        if (dropDown) {
            dropDown.bind("change", function(e) {
                var grid = e.sender.wrapper.closest(".k-grid").data("kendoGrid");
                var dataItem = grid.dataItem(e.sender.wrapper.closest("tr"));

                //If current value is null
                if (!dataItem.PresidentID) {
                    //change the model value
                    dataItem.PresidentID = 0;
                    //get the currently selected value from the DDL
                    var currentlySelectedValue = e.sender.value();
                    //set the value to the model
                    dataItem.set('PresidentID', currentlySelectedValue);
                }
            });
        }
    }

</script>

Presidents.cshtml template file...

@(Html.Kendo().DropDownListFor(m => m)
        .DataValueField("ID")
        .DataTextField("Name")
        .AutoBind(true)
        .OptionLabel("Select...")
        .DataSource(ds => ds.Read(r => r.Action("GetPossiblePresidents", "Country")
            .Data("getCountryID()"))
            )
       )

Please help - I've been at this for hours

[Nick Gerne]

This solution is ugly, but it works...

The updated modified grid...

@(Html.Kendo().Grid<CountryViewModel>()
  .Name("CountriesGrid")
  .Columns(c =>
               {
                   c.Bound(x => x.CountryName)
                   c.Bound(x => x.PresidentID)
                       .EditorTemplateName("Presidents")
                       .ClientTemplate("#=getPresidentName(PresidentID)#")
               })
  .Editable(e => e.Mode(GridEditMode.InCell))
  .Events(x => x.Edit("onEdit"))
  .DataSource(ds => ds
        .Ajax()
        .ServerOperation(false)
        .AutoSync(true)
        .Model(m =>
            {
            m.Id(x => x.CountryID);
            m.Field(x => x.CountryID).Editable(false);
            m.Field(x => x.PresidentID).DefaultValue(1);
            })
        .Read(r => r.Action("GetCountries", "Country"))
        .Update(u => u.Action("UpdateCountry", "Country"))
  ))

The JavaScript on the view...

<script>
function getCountryID() {
        var row = $(event.srcElement).closest("tr");
        var grid = $(event.srcElement).closest("[data-role=grid]").data("kendoGrid");
        var dataItem = grid.dataItem(row);

        return { CountryID: dataItem.CountryID }
    }

//for InCell edit mode
function onEdit(e) {
     var dropDown = e.container.find("[data-role=dropdownlist]").data("kendoDropDownList");
        if (dropDown) {
            dropDown.bind("change", function(e) {
                var grid = e.sender.wrapper.closest(".k-grid").data("kendoGrid");
                var dataItem = grid.dataItem(e.sender.wrapper.closest("tr"));

                //If current value is null
                if (!dataItem.PresidentID) {
                    //change the model value
                    dataItem.PresidentID = 0;
                    //get the currently selected value from the DDL
                    var currentlySelectedValue = e.sender.value();
                    //set the value to the model
                    dataItem.set('PresidentID', currentlySelectedValue);
                }
            });
        }
    }
  function getPresidentName(e) {
        if (e != null) {
            var name = "";
            $.ajax({
                type: "POST",
                url: "/Base/GetPresidentNameByID",
                dataType: "json",
                data: "ID=" + e,
                async: false,
                success: function (result) {
                    name = result;
                },
                error: function (result) {

                }
            });

            return name;
        }
        return "";
    }
</script>

That is really ugly, but it works.  How are you supposed to use the ClientTemplate to pull back the text field of an item?