This is a migrated thread and some comments may be shown as answers.
Templating & Binding Confusion Revisited
2 Answers 4 Views
This is a migrated thread and some comments may be shown as answers.
Eric
Top achievements
Rank 1
Eric asked on 11 Oct 2020, 03:53 PM

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?

2 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 13 Oct 2020, 12:24 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Eric
Top achievements
Rank 1
answered on 13 Oct 2020, 02:45 PM
Thank you Tsvetomir! I was able to capture the new values using your recommendation. 
Tags
Grid
Asked by
Eric
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Eric
Top achievements
Rank 1
Share this question
or