Kendo UI ASP.net MVC - Why dropdownlist is getting empty data on select event?

Question

In my ASP.net MVC view I've a Kendo dropdownlist and a grid. What I'm after is the grid is hidden by default, based on the selection of the dropdownlist, the grid should populate with relevant data and be displayed.

However, the select event for the dropdownlist is not getting correct data. It gets the previous selection instead of the current selection.

Code for the view is:

@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>

What am I doing wrong and how can I correct it?

steamrolla steamrolla · Accepted Answer · 2016-07-19T13:49:22

I believe you'll want to use the change event, seen here.

EDIT: You're seeing what's essentially the previous selection because of your call here, within your select delegate:

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

The select event triggers before the element's value is set.

Kendo UI ASP.net MVC - Why dropdownlist is getting empty data on select event?

1 Answers