Supply additional odata filters for AutoComplete

2 posts, 2 answers
  1. Answer
    Jason
    Jason avatar
    11 posts
    Member since:
    Oct 2012

    Posted 15 Nov 2013 Link to this post

    I have an autocomplete textbox working with an odata endpoint. In addition to the $filter that kendo generates I'd like to add an additional filter to eliminate "deactivated" items.

    The approach shown in the code below works for grids, but (understandably) kendo uses its own $filter and ignores mine (in particular below, see $filter: "Hidden -eq false" bit):

    $("#product-entry-list input").kendoAutoComplete({
        filter: 'contains',
        dataTextField: 'Name',
        dataSource: {
            type: 'odata',
            serverFiltering: true,
            serverPaging: true,
            pageSize: 20,
            transport: {
                read: {
                    url: window.rootUrl + 'odata/ProductLines',
                    dataType: 'json',
                    data: {
                        $filter: "Hidden eq false"
                    }
                }
            },
            schema: {
                data: (d) => d.value,
                total: (d) => d['odata-count']
            }
        }
    });

    Is there a spot in the autocomplete or datasource API where I can inject custom filtering? Alternatively I suppose I could create a special ODataController for ProductLines that only shows active items, but it seems "nicer" to just have a single ProductLines OData endpoint and let the clients describe what they want.



  2. Answer
    Jason
    Jason avatar
    11 posts
    Member since:
    Oct 2012

    Posted 16 Nov 2013 Link to this post

    Solved. After digging around in the source code a bit I discovered that dataSource.filter is the way to go. The following works (the filter on line 9 is the key):

    01.$("#product-entry-list input").kendoAutoComplete({
    02.    filter: 'contains',
    03.    dataTextField: 'Name',
    04.    dataSource: {
    05.        type: 'odata',
    06.        serverFiltering: true,
    07.        serverPaging: true,
    08.        pageSize: 20,
    09.        filter: { field: 'Hidden', operator: 'eq', value: false },
    10.        transport: {
    11.            read: {
    12.                url: window.rootUrl + 'odata/ProductLines',
    13.                dataType: 'json'
    14.            }
    15.        },
    16.        schema: {
    17.            data: (d) => d.value,
    18.            total: (d) => d['odata-count']
    19.        }
    20.    }
    21.});

    This creates an odata request as expected:

    http://.../odata/ProductLines?$inlinecount=allpages&$top=20&$filter=(Hidden+eq+false+and+substringof('air',tolower(Name)))

    Yay!
  3. Kendo UI is VS 2017 Ready
Back to Top