How to trigger change for dropdownlist to populate other field data

[Tim]

Hi

I have a dropdownlist that is setup like this:

<div class="requisitionForm-content">
    @(Html.Kendo().DropDownListFor(m => m.RequisitionModel.FormDto.VendorIdentifier)
                  .Events(e => e.Change("onVendorChange"))
                  .OptionLabel("Select a vendor...")
                  .DataValueField("Identifier")
                  .DataTextField("Name")
                  .Filter(FilterType.Contains)
                  .DataSource(s => s.Read(r => r.Action("GetVendors", "RequisitionForm", new { formVendor = Model.RequisitionModel.FormDto.VendorIdentifier }).Type(HttpVerbs.Post).Data("getVendorExtraData")))
                  .HtmlAttributes(new { style = "width:360px" }))
</div>

 

When a selection is made, it populates some text fields on the page.  onVendorChange is pretty simple:

function onVendorChange(e) {
    var phone = "";
    var address = "";
    var fax = "";
    var email = "";

    var vendorDropList = $('#RequisitionModel_FormDto_VendorIdentifier').data("kendoDropDownList");
    var dataItem = vendorDropList.dataItem();

    if (dataItem) {
        phone = dataItem.Phone ? dataItem.Phone : "";
        address = dataItem.Address ? dataItem.Address : "";
        fax = dataItem.Fax ? dataItem.Fax : "";
        email = dataItem.Email ? dataItem.Email : "";

        var requisitionList = $('#RequisitionModel_FormDto_RequisitionType').data("kendoDropDownList");
        var reqType = requisitionList.dataItem();

        if (dataItem.BlanketOrderPo &&
            reqType &&
            reqType.Identifier == "@RequisitionType.BlanketOrder.Identifier.ToString()") {
            $('#RequisitionModel_FormDto_PoNumber').val(dataItem.BlanketOrderPo);
        }
    }

    $('#RequisitionModel_FormDto_VendorContactPhone').val(phone);
    $('#RequisitionModel_FormDto_VendorAddress').val(address);
    $('#RequisitionModel_FormDto_VendorFax').val(fax);
    $('#RequisitionModel_FormDto_VendorEmail').val(email);
}

 

I am trying to save the state of form in localstorage.  I am retaining the "Identifier" value.

I am restoring the state of the form by:

(elem is the specific dropdownlist element)

..  snip ..
$(elem).data('kendoDropDownList').value(formObject[key]);
$(elem).data('kendoDropDownList').trigger("change");
.. snip ..

 

The dropdownlist shows the correct name, but it acts as though the onChange event does not trigger: none of the related text fields are populated.

However, if I run the following at the browser's console:

$("#RequisitionModel_FormDto_VendorIdentifier").data("kendoDropDownList").trigger("change");

 

the change event is triggered.

It feels like it's a bit of a race condition - the dropdownlist hasn't populated it's data yet, or ..  something?

How can I wait for the dropdownlist to be ready to be triggered?  Is there a better way to handle this?

Thanks in advance.

 

[Dimitar]

Hi,

I would suggest you to test in this scenario if triggering change, when the databound event is fired, will fix the issue.
As a side note, the change event is not fired, when the value of the widget is changed programmatically. In such cases, the cascade event should be used instead, as highlighted in the article.

Regards,
Dimitar
Progress Telerik