[Solved] Custom value in autocomplete onchange event

[Mattias]

Hi,
I need to set a custom value in the onchange event of the combobox, is that possible?

@for (var i = 0; i < Model.TenderProducts.Count; i++)
{
     @(Html.Telerik()
               .AutoComplete()
                .Name(string.Format("TenderProducts[{0}].ArticleNr", i))
                .Encode(false)
                .BindTo(Model.Products.Select(p => p.ArticleNr))
                .AutoFill(false)
                .HtmlAttributes(new { style="width: 150px" })
                .HighlightFirstMatch(true)
                .ClientEvents(events => events.OnChange("onArticleNrChange"))
       )

     <input type="text" name="AnotherBox" id="AnotherBox_@(i)" value="" />
}


<script type="text/javascript">
    function onArticleNrChange(e, index) {
        $.getJSON("/admin/tender/getproduct", { articleNr: e.value }, function (json) {
            //alert(json.Description);
            document.getElementById('AnotherBox_' + index).value = json.Description;
        });
    }
</script>

When I select one value in the combobox, I need to set some values to other input fields like above.

Regards,
Mattias

[Georgi Krustev]

Hello Mattias,

Yes, it is possible.

After further review of the code snippet, I noticed that you are using index argument in the onArticleNrChange event handler. I believe it is undefined and that is why the resulting id will be 'AnotherBox_undefined". If you can find the correct index, then the code will work.

Best wishes,
Georgi Krustev
the Telerik team

[Mattias]

Hi Georgi,
Yes, if I find the index the code will work. And that is why I asked the question! :)
How can I in the loop in the Autocomplete box set this index value?
I would need something like:

.ClientEvents(events => events.OnChange("onArticleNrChange(" + @i + ")"))

Because the autocomplete box is in a loop I need to grab the correct index so I can fill the other textbox with some value.
Or do you see any other solution to find which index row the autocomplete box is in?
One that I thinking of is if I just could grab the name from the box I would have the correct index like:

<script type="text/javascript">
    function onArticleNrChange(e) {
        $.getJSON("/admin/tender/getproduct", { articleNr: e.value }, function (json) {
            var index = findIndex(e.Name);
            document.getElementById('AnotherBox_' + index).value = json.Description;
        });
    }
</script>

The problem here is that "e" doesn't have a property "Name".
Is there a way to get the autocomplete box name in the event?

/Mattias

[Georgi Krustev]

Hello Mattias,

Sorry for missing the question.

In OnChange("handlerName") method you set only the name of the event handler and not define what should be the additional parameters.

You can try to retrieve the index from the AutoComplete id. Check this code snippet:

var id = /\d/.exec(this.id)
if(id[0]) {
index = id[0];
}

Best wishes,
Georgi Krustev
the Telerik team

[Mattias]

That is excellent! Thank you! :)

/Mattias