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

2 posts, 0 answers
  1. Tim
    Tim avatar
    3 posts
    Member since:
    Sep 2017

    Posted 09 Feb Link to this post

    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.

  2. Neli
    Admin
    Neli avatar
    139 posts

    Posted 12 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top