Multimple autocomplete boxes, one filtering ajax datasource. How to pass the id of the box?

[Rey]

I have multiple autocomplete boxes and they all filter through the same AJAX datasource.  I want to somehow pass the ID of the specific box to the AdditionalData javascript function so that I don't have to write like five different JavaScript functions with pretty much the same logic.  I didn't see anything in the documentation and passing "e" in the AdditionalData function just passes the filter.

Razor:

<strong>To:</strong>  Html.Kendo().AutoComplete().Name("ToAddress")
                    .DataTextField("Email")
                    .Separator(";").MinLength(4).Filter(FilterType.Contains)
                    .DataSource(source =>
                    {
                        source.Read(r =>
                        {
                            r.Action("SearchAD", "Home").Data("AdditionalData");
                        })
                        .ServerFiltering(true);
                    }))

<strong>CC:</strong>  Html.Kendo().AutoComplete().Name("ccAddress")
                    .DataTextField("Email")
                    .Separator(";").MinLength(4).Filter(FilterType.Contains)
                    .DataSource(source =>
                    {
                        source.Read(r =>
                        {
                            r.Action("SearchAD", "Home").Data("AdditionalData");
                        })
                        .ServerFiltering(true);
                    }))

            
<strong>BCC:</strong>  Html.Kendo().AutoComplete().Name("bccAddress")
                    .DataTextField("Email")
                    .Separator(";").MinLength(4).Filter(FilterType.Contains)
                    .DataSource(source =>
                    {
                        source.Read(r =>
                        {
                            r.Action("SearchAD", "Home").Data("AdditionalData");
                        })
                        .ServerFiltering(true);
                    }))

JavaScript

    function AdditionalData() {
        var text = $("[the autocomplete id]").val();  //get the ID or any other identifier
        var i = text.indexOf(";");
        var value = text.substring(i + 1);
        return {
            text: value
        }
    }

[Anton Mironov]

Hi Rey,

Thank you for the details provided.

You can avoid writing separate JavaScript functions for each AutoComplete box by dynamically determining which input triggered the data request. The easiest way is to use the widget’s name or ID inside the AdditionalData function. When you define the Data callback in the DataSource’s Read method, the function is executed in the context of the widget, so you can access its properties using the "this" keyword.

Here’s how you can implement this:

function AdditionalData(e) {
    var inputId = this.element.attr("id"); // Gets the ID of the triggering AutoComplete box
    var text = this.value();               // Gets the current value
    return {
        text: text,
        inputId: inputId
    };
}

Make sure you define the Data function as a string referencing the function name (e.g., .Data("AdditionalData")), not as an inline function. This way, the context (this) will refer to the widget instance.

In your controller, you can receive both text and inputId:

public ActionResult SearchAD(string text, string inputId)
{
    // Use inputId to identify which AutoComplete box triggered the request
}

This approach allows you to use a single function for all your AutoComplete widgets and easily identify which one made the request.

 

Kind Regards,
Anton Mironov
Progress Telerik

[Rey]

Hi Anton, 

I tried your suggestion, but it didn't work.  I get an undefined error on the "attr" property..

Uncaught TypeError: Cannot read properties of undefined (reading 'attr')
    at Object.AdditionalData [as data] (5:904:36)
    at init.setup (kendo.all.js:9721:1)
    at init.read (kendo.all.js:9687:1)
    at kendo.all.js:11236:1
    at init._queueRequest (kendo.all.js:11571:1)
    at init.read (kendo.all.js:11228:1)
    at init.query (kendo.all.js:11953:1)
    at init._filterSource (kendo.all.js:68054:1)
    at init.search (kendo.all.js:87945:1)
    at kendo.all.js:88405:1

Razor

            Html.Kendo().AutoComplete().Name("ccAddress")
                .DataTextField("Email")
                .MinLength(4).Filter(FilterType.Contains)
                .DataSource(source =>
                {
                    source.Read(r =>
                    {
                        r.Action("SearchAD", "Home", new { area = "" }).Data("AdditionalData");
                    })
                    .ServerFiltering(true);
                })

JavaScript

    function AdditionalData(e) {
        var inputId = this.element.attr("id");
        var text = this.value;
        return {
            text: text
        }
    }

[Anton Mironov]

Hello Rey,

The error is happening because, in your AdditionalData function, the context of "this" is not the widget instance when the function is called via .Data("AdditionalData"). Instead, you should use the event argument "e" to access the widget and its properties.

Here's how you can update your function:

function AdditionalData(e) {
    var inputId = e && e.sender ? e.sender.element.attr("id") : "";
    var text = e && e.sender ? e.sender.value() : "";
    return {
        text: text,
        inputId: inputId
    };
}

This way, you avoid the undefined error and reliably get the ID and value of the AutoComplete box that triggered the request. If you still encounter issues, please let me know how you're calling the function in your DataSource configuration and if there are any customizations in your widget setup.

 

Best Regards,
Anton Mironov
Progress Telerik

[Rey]

Hi Anton,

I am still receiving an undefined error for the "sender" property using your posted code.

JavaScript:

    function AdditionalData(e) {
        var inputId = e && e.sender ? e.sender.element.attr("id") : "";
        var text = e && e.sender ? e.sender.value() : "";
        return {
            text: text,
            inputId: inputId
        }
    }

Razor:

            Html.Kendo().AutoComplete().Name("bccAddress")
                .DataTextField("Email")
               .Separator(";") .MinLength(4).Filter(FilterType.Contains)
                .DataSource(source =>
                {
                    source.Read(r =>
                    {
                        r.Action("SearchAD", "Home", new { area = "" }).Data("AdditionalData");
                    })
                    .ServerFiltering(true);
                })

[Anton Mironov]

Hi Rey,

In order to receive the name in the data function handler, we can pass it as a parameter:

.Data("onAdditionalData('products')");

// and receive it in the function:
function onAdditionalData(widgetName) {
    console.log(widgetName); 
    return {
        text: $("#" + widgetName).val()
    };
}

Feel free to give a try to this approach. I hope you will like the result.


Kind Regards,
Anton Mironov

[Rey]

Interestingly, when I add parenthesis sending the parameter to the function call in .Data(), it calls it immediately when the page loads.  And then it doesn't fire when I type in the box.