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

DropDownList Text will disappears

1 Answer 397 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nick Gerne
Top achievements
Rank 1
Nick Gerne asked on 02 Aug 2013, 04:57 AM
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

1 Answer, 1 is accepted

Sort by
0
Nick Gerne
Top achievements
Rank 1
answered on 02 Aug 2013, 06:12 AM
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?
Tags
Grid
Asked by
Nick Gerne
Top achievements
Rank 1
Answers by
Nick Gerne
Top achievements
Rank 1
Share this question
or