How to add Google Places Autocomplete feature in Batch Edit Cell

[Jawwad]

Hello,
    I want to add Google places autocomplete feature in batch edit cell. Any ideas to accomplish this?

Here is the code for adding autocomplete feature in a textbox :

var searchTxt = (document.getElementById("textboxid"));
            var searchBox = new google.maps.places.SearchBox(searchTxt);
            google.maps.event.addListener(searchBox, 'places_changed', function()
 { // any action
 });

also to include this

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>

[Jawwad]

The solution is putting a radtextbox in EditColumnTemplate and then adding it by id only once in Javascript.

var grid = $telerik.findElement(document.body, "myGrid");

           var txtAdd = $telerik.findElement(grid, "txtAddress");

           var srchBox = new google.maps.places.SearchBox(txtAdd);

           google.maps.event.addListener(srchBox, 'places_changed', function()
{ // some action while predictions are changing
});

Its working now. As you type, you will get the places predictions.

The second problem arises here, thats when I select (click on) any place from the prediction area, its pasted in the edit textbox  but removes immidiately and the text i was entering to search shows.
For example
1. In edit textbox, I entered "ar".
2. Selected "Arizona" from prediction bar.
3. Arizona is pasted
4. Immidiately the text is again "ar".

I think some BatchEditEvent is causing this.
Any suggestions ?

Thanks in advance,
Jawwad

[Jawwad]

sorry its  EditItemTemplate not EditColumnTemplate

[Jawwad]

SOLVED

The code below worked. But if you think there is even more or simpler way, I will be glad to know that.

OnBatchEditGetEditorValue="GetEditorValue"

function GetEditorValue(sender, args) {

                if (args.get_columnUniqueName() == "Description") {
                    args.set_cancel(true);
                    var container = args.get_container();
                    var newVal = $telerik.findElement(container, "textboxid").value;
                    args.set_value(newVal);
                }
            }

[Konstantin Dikov]

Hello Jawwad,

In scenarios where you have more controls in the EditItemTemplate, you need to handle the events for getting and settings values from and to the editor and the cell. In some scenarios it is possible to override only one of the events, as in your project. 

Having that in mind, handling the OnBatchEditGetEditorValue is the correct approach for retrieving the value that you need.


Best Regards,
Konstantin Dikov
Telerik