How to send AutoComplete data with entered value?

1 Answer 45 Views
AutoComplete
Z
Top achievements
Rank 1
Iron
Z asked on 15 Jun 2021, 12:32 PM | edited on 15 Jun 2021, 12:32 PM

Hey,

i've got kendo grid with filter row, i'm trying to hook-up all filter inputs to custom kendoAutoComplete(...) components.

Every column definition:

...
columns.Bound(x => x.ColumnName).Filterable(x => x.Cell(y => y.Template("onFilterAutocomplete")));
...

Template function definition:

function onFilterAutocomplete(e)
{
 var columnName = $(e.element).closest('span[data-field]').data('field');

 e.element.kendoAutoComplete({
	dataSource: {
            transport: {
                read: {
                    url: '@urlFilterAutocomplete',
                    type: 'POST',
                    data: {
                        field: columnName,
                        text: /* ... how to get currently entered text here dynamically? ... */
                    }
                }
            }
        }
    });
}

Controller:

[HttpPost]
public async Task<JsonResult> FilterAutocompleteAsync(string field, string text) => Json(/*... db ...*/);
All i'm able to send to the controller now is parameter "field". How do i send value entered to one of many autocompletes when i don't know the specific autocomplete instance?

1 Answer, 1 is accepted

Sort by
0
Accepted
Z
Top achievements
Rank 1
Iron
answered on 17 Jun 2021, 02:26 PM

So, two more things needs to be set in kendoAutoComplete options to get it work:

1)  "serverFiltering: true" must be set in dataSource

2) as per documentation data can be function with parameter, i've tried that, but without (1) the paremeter was never set

Current working setup:

function onFilterAutocomplete(e)
{
    let field = $(e.element).closest('[data-field]').data('field');

    event.element.kendoAutoComplete({
        autoWidth: true,
        height: 300,
        dataSource: {
            serverFiltering: true,
            transport: {
                read: {
                    url: '@urlFilterAutocomplete',
                    type: 'POST',
                    data: options => ({
                        ...extraPageReadData(),
                        field: field,
                        text: options.filter.filters.length > 0 ? options.filter.filters[0].value : ''
                    })
                }
            }
        }
    });
}

Tags
AutoComplete
Asked by
Z
Top achievements
Rank 1
Iron
Answers by
Z
Top achievements
Rank 1
Iron
Share this question
or