[Solved] Choosing by value on dropdown list, populate other fields on the page

[Tim]

Hello

 

I have a dropdown list that, on change, populates a few other fields on a page.  This functionality works provided that it's taking place as a result of a user interaction.

 

I am trying to make the form data persistent between page refreshes.  I have captured the value of the selection in local storage, and populate it on page load using the methods described https://www.telerik.com/forums/how-do-you-set-the-value-of-a-dropdownlist-after-reading-external-data and in this JSFiddle.

 

However, on page load, the dropdown list has the correct selection, the change() event triggers, but fails to populate data.  The dataItem variable is null (I think) and I'm not clear why.

 

Any help is appreciated.  Relevant code below...

 

DropDownList widget

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

 

onVendorChange function:

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);
}

 

Page document.ready() to get data from local storage

var WipRequisition = localStorage.getItem(employeeGuid);
if (WipRequisition !== null) {
    var formObject = JSON.parse(WipRequisition);
    stringToForm(formObject, $("#requisitionFormForm"));

    // Now deal with the dropdown list elements.
    var kendoDropDownElements = [
        "RequisitionModel_FormDto_VendorIdentifier",
        "RequisitionModel_FormDto_RequisitionType",
        "RequisitionModel_FormDto_DeliveryLocationIdentifier",
        "RequisitionModel_JobIdentifier",
        "RequisitionModel_FormDto_CostCodeIdentifier",
        "RequisitionModel_FormDto_CurrencyIdentifier",
        "RequisitionModel_Officer1Identifier",
        "RequisitionModel_Officer2Identifier"
    ];
    for (var element in kendoDropDownElements) {
        $("#" + kendoDropDownElements[element]).data('kendoDropDownList').value(formObject[kendoDropDownElements[element]]);
        $("#" + kendoDropDownElements[element]).data('kendoDropDownList').trigger("change");

    }
}

 

Thanks in advance.

[Neli]

Hi Tim,

I tried to reproduce the issue, but I did not manage to replicate the described problem. 

Based on the provided code I have prepared a sample project, that you will find attached. The project contains a DropDownList and two buttons. On click on the first button ('Add to LS') an item is added to the localStorage. When the 'Select' button is clicked, the value of the DropDownList is changed based on the value retrieved from the localStorage. Then, the change event is triggered.

function addTolocalStorage() {
        localStorage.setItem('Value', 5);
    }

function selectItem() {
   var value = localStorage.getItem('Value');
    var ddl = $('#CategoryID').data('kendoDropDownList');
    ddl.value(value);
    ddl.trigger('change');
}

In the change event handler, the dataItem() method is used to retrieve the data about currently selected item. Then, the data regarding the selected item is console logged. 

Could you please modify the provided sample project in order to demonstrate the issue the way it is at your end? This way we could examine it locally and provide further assistance. 

Regards,
Neli
Progress Telerik