Templating & Binding Confusion Revisited

[Eric]

I posted a similar question before but I'll try to be as clear as possible this time. I created a template for my "DealerAddressStreet" field.

{
    field: "DealerAddressStreet",
    title: "Address",
    sortable: false,
    width: "140px",
    editor: googleAutoComplete
},

 

This is my template which creates a text input that calls a JS function called "initAutocomplete()". 

function googleAutoComplete(container, options) {
    var input = $('<input id="Dynamic_DealerAddressStreet" type="text" class="k-textbox" name="DealerAddressStreet" data-bind="value:DealerAddressStreet" onfocus="initAutocomplete()">');
    input.appendTo(container);
}

 

The JS function gets the user's location and provides autocomplete for the address typed in. It also inserts the values into the address text inputs without the user having to type them in manually.

function initAutocomplete() {
    console.log('Function executed...');
    autocomplete = new google.maps.places.Autocomplete(
        document.getElementById("Dynamic_DealerAddressStreet"),
        { types: ["geocode"] }
    );
    autocomplete.setFields(["address_component"]);
    autocomplete.addListener("place_changed", fillInAddress);
}

function fillInAddress() {
    const place = autocomplete.getPlace();

    var tbAddress = $('#DealerAddressStreet');
    var tbCity = $('#DealerAddressCity');
    var tbState = $('#DealerAddressState');
    var tbZip = $('#DealerAddressZip');

    var address = place.address_components[0].short_name + ' ' + place.address_components[1].short_name;
    var city = place.address_components[2].short_name;
    var state = place.address_components[4].short_name;
    var zipcode = place.address_components[6].short_name;
    //var country = place.address_components[5].short_name

    // Set input values
    tbAddress.attr('value', address);
    tbCity.attr('value', city);
    tbState.attr('value', state);
    tbZip.attr('value', zipcode);

    tbAddress.val(address);
    tbCity.val(city);
    tbState.val(state);
    tbZip.val(zipcode);
}

 

The problem is that the new text input values are NOT being read when UPDATING or CREATING a new record if the values are inserted dynamically through my script. How can this issue be resolved?

[Tsvetomir]

Hi Eric,

Thank you for the additional details. Indeed, I have provided an answer to your query in the other thread. Could you try it out and see if that would resolve the issue?

For your convenience, I am sharing the link here:

https://www.telerik.com/forums/inserting-values-to-inputs-are-not-captured-when-saved

 

Kind regards,
Tsvetomir
Progress Telerik

[Eric]

Thank you Tsvetomir! I was able to capture the new values using your recommendation.