Kendo Cascade DropDownList MVC - set value

Question

I have DropDownList, his data are dynamicly loaded due to Project DropDownList. In DataBound event I want change to select first value by JavaScript. I use SetDefValuesO function for this. It works, when data are loaded in Operation list function automaticly select first item. But when i click to save in inline edit Grid Row, update request do not contain changed value. It works only when i do it by mouse click.

How to solve this ? Thanks!

Grid:

   columns.Bound(work => work.Operation).ClientTemplate("#=Operation.Code#").Width(100);
.Model(model =>
 {
    model.Id(p => p.Id);
    model.Field(p => p.Operation).DefaultValue(ViewData["defaultOperation"] as TT.Web.Models.ViewModel.OperationViewModel);
    model.Field(p => p.Spp).DefaultValue(ViewData["defaultSpp"] as TT.Web.Models.ViewModel.SppViewModel);
    model.Field(p => p.Project).DefaultValue(ViewData["defaultProject"] as TT.Web.Models.ViewModel.ProjectViewModel);
})

Editor template:

@(Html.Kendo().DropDownList()
    .Name("Operation")
    .OptionLabel("Vyberte výkon...")
    .CascadeFrom("Project")
    .DataValueField("Id")
    .Events(ev => ev.DataBound("SetDefValuesO") )
    .HtmlAttributes( new { requiredvalidationmessage = "required field", required = "required" })
    .DataTextField("Code")
                      .DataSource(source =>
                      {

                          source.Read(read =>
                          {
                              read.Action("GetCascadeOperations", "Home")
                                    .Data("filterOperations");
                          }).ServerFiltering(true); 
                      })
                      .Enable(false)
                      .AutoBind(false))


function SetDefValuesO(){

var OperationCount = $("#Operation").data("kendoDropDownList").dataSource._data.length;
console.log(OperationCount);

if(OperationCount == 1){
    $("#Operation").data("kendoDropDownList").value($("#Operation").data("kendoDropDownList").dataSource._data[0].Id);
    console.log($("#Operation").val());
}

SOLVED BY:

    function SetDefValuesO(){
    var OperationCount = $("#Operation").data("kendoDropDownList").dataSource._data.length;
    if(OperationCount == 1){
       // $("#Operation").data("kendoDropDownList").select(1);
        $("#Operation").data("kendoDropDownList").value($("#Operation").data("kendoDropDownList").dataSource._data[0].Id);
        this.trigger("change"); // solution
    }
}

Hi, did my answer help you solve your issue? If yes, could you please mark my reply as an answer? That way, people who find the question using Google can have more assurance that the answer is correct. Thanks in advance. — Vladimir Iliev

Vladimir Iliev Vladimir Iliev · Accepted Answer · 2015-10-17T09:19:30

First I would suggest to use the dropDownList dataSource data method instead of internal methods like "_data" method.

Also with current approach you should make sure the default value is set only for new records as otherwise on edit you will override the current value. Possible solution for this is to update the "dataBound" event handler as follows:

function SetDefValuesO(){
   var widget = this;
   var row = widget.wrapper.closest("tr");
   var grid = row.closest("[data-role=grid]").data("kendoGrid");
   var model = grid.dataItem(row);
   if (model.isNew()) {
     model.set("Operation", widget.dataSource.data()[0]);
   }

Kendo Cascade DropDownList MVC - set value

1 Answers