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 */
}
}