Kendo UI ASP.net MVC - Warum Dropdown-Liste erhält leere Daten auf ausgewählte Ereignis?

Question

In meiner ASP.net MVC-Ansicht habe ich eine Kendo Dropdown-Liste und ein Raster. Was ich möchte, ist das Raster ist standardmäßig ausgeblendet, basierend auf der Auswahl der Dropdown-Liste, sollte das Raster mit relevanten Daten gefüllt und angezeigt werden.

Das Auswahlereignis für die Dropdownliste erhält jedoch keine korrekten Daten. Es erhält die vorherige Auswahl anstelle der aktuellen Auswahl.

-Code für die Ansicht ist:

@model MyApplication.Models.CustomerModel 

@{ 
    ViewBag.Title = "Customer Information"; 
} 

<h2>Customer Information</h2> 
    <div class="container"> 
     <div class="row"> 
      @(Html.Kendo().DropDownList() 
         .Name("CustomerID") 
         .OptionLabel("Select Customer") 
         .BindTo((List<SelectListItem>)ViewBag.CustomerList) 
         .DataTextField("Text") 
         .DataValueField("Value") 
         .Events(e => e.Select("onSelect")) 
         .HtmlAttributes(new { @class = "k-textbox large" })) 
     </div> 

     <div class="row"> 
      @(Html.Kendo().Grid<MyApplication.Models.CustomerModel>() 
          .Name("contractGrid") 
          .Columns(columns => 
           { 
            columns.Bound(c => c.ContractCode).Title("Contract ID").Width(240); 
            columns.Bound(c => c.ContractDescription).Title("Description").Width(240); 
            columns.Bound(c => c.ContractPrice).Title("Price").Width(240); 
            columns.Bound(c => c.ExpirationDate).Title("Expiration Date").Width(240).Format("{0:MM/dd/yyyy}");         
           } 
         ) 
          .Sortable() 
          .Pageable(page => page 
           .Refresh(true) 
           .PageSizes(true) 
         ) 
          .DataSource(dataSource => dataSource 
             .Ajax() 
             .Read(read => read.Action("GetContracts", "Pricing").Data("additionalDataContracts")) 
             .PageSize(10) 
          ) 
      ) 
     </div> 
    </div> 

<script> 
    $(document).ready(function() { 
     $("#contractGrid").hide(); 
    }); 



    var ddlItem=null; 

    function additionalDataContracts(e) { 
     var dataItem = $("#CustomerID").data("kendoDropDownList").value(); 
     alert("Additional Data - Customer: " + dataItem); 
     return { 
      item: dataItem 
     } 
    } 

    function onSelect(e) { 
     ddlItem = this.dataItem(e.item); 
     var dataItem = $("#CustomerID").data("kendoDropDownList").value(); 
     alert("Select: " + dataItem); 
     $("#contractGrid").show(); 
     var gridContracts = $("#contractGrid").data("kendoGrid"); 
     gridContracts.dataSource.read();  
    } 
</script> 

Was mache ich falsch und wie kann ich es beheben?

Answer 1

Ich glaube, dass Sie das Änderungsereignis verwenden möchten, gesehen here.

EDIT: Sie sehen, was wegen Ihres Anrufs im Wesentlichen die vorherige Auswahl ist hier, in Ihrem ausgewählten Delegierten:

$("#CustomerID").data("kendoDropDownList").value()

Das select Ereignis löst, bevor der Wert des Elements festgelegt ist.