Declined
Last Updated: 16 Nov 2021 08:57 by ADMIN
Kyle
Created on: 09 Nov 2021 17:11
Category: Grid
Type: Feature Request
0
Custom Search Panel Outside of the Toolbar

You guys do such a great job of allowing us to extend your product for our needs. And I know that you have recently added the Search Panel to allow us to perform a search against the dataSource. However, I would like to put that search box/button somewhere else completely on my page.

I've been able to get around this by using the code in kendo.grid.js to use my own click/keypress events to invoke the filter based on the new search options.

configureSearch takes two jQuery selector strings to hook into click/keypress events. I only want to search when the user hits ENTER instead of after each keypress. Then it executes the private search function.
configureSearch(inputSelector: string, clickSelector: string) {
    const searchFn = this.search;
    if (this.grid.options.search == null) {
        throw "search field(s) not set for grid.";
    }

    const inputElement = $(inputSelector).keypress(function (this: HTMLElement, e) {
        const keycode = (e.keyCode ? e.keyCode : e.which);
        if (keycode === 13) {
            searchFn($(this));
        }
    });
    $(clickSelector).click(e => {
        searchFn(inputElement);
    });
}
private search(inputElement: JQuery<HTMLElement>) {
    const options = this.grid.options;
    const dsOptions = this.dataSource.options as kendo.ui.GridScrollable;  // HACK: dataSource.options isn't really a GridScrollable, but it's similar
    let searchFields: string[] | any = options.search ? options.search.fields : null;
    let expression: kendo.data.DataSourceFilters = {
        filters: [],
        logic: "or"
    };
    const value = inputElement.val();
    if (!searchFields) {
        searchFields = getColumnsFields(options.columns);
    }
    // NOTE: Thankfully we don't use endless
    if (dsOptions.endless) {
        dsOptions.endless = null;
        //(this as any)._endlessPageSize = this.dataSource.options.pageSize;
    }
    if (value) {
        for (let i = 0; i < searchFields.length; i++) {
            expression.filters.push({
                field: searchFields[i],
                operator: "contains",
                value: value
            });
        }
    } else {
        expression = {};
    }
    this.dataSource.filter(expression);

    // from Telerik:
    function leafColumns(columns: kendo.ui.GridColumn[]): kendo.ui.GridColumn[] {
        /* Hiding ... go see Telerik source code */
    }
    function getColumnsFields(columns: kendo.ui.GridColumn[]): string[] {
        /* Hiding ... go see Telerik source code */
    }
}
If you could offer something similar, that'd be awfully helpful.
1 comment
ADMIN
Nikolay
Posted on: 16 Nov 2021 08:57

Hi Kyle,

You can implement a global custom Grid search input without overriding the internal Grid logic but using the data source filter() method. This is demonstrated in the following article. 

To have the filtering working only on 'enter' keypress simply put the filter logic in the following scope:

$(document).on('keypress',function(e) {
            if(e.which == 13) {
             ....
            }
})

Regards,
Nikolay
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.