Custom filters on Grid

[Paul]

I am trying to implement the "excel like" filters in kendo filters, what i m doing right now is really old fashion way (pushing HTML tags to kendo filter and hiding the default filters):


newFilter.push('<input id="searchbox" Type="text">');
newFilter.push('<div id="checkboxes"></div>'); // add more checkboxes in the div tags later.

filter = $('form.k-filter-menu').children(),
submit = filter.children().last(),
submit.before(newFilter.join(''));

I was wondering if there is a better way of doing this?

Also,  By doing this, i need to have my own filter object, and pass it into dataSource, then combine my filter object with kendo default filters:

 this.transport = {
             read: $.proxy(function (options) {this.getPageData(options, myFilters)}, this)
};

getPageData: function(options, myFilters) {
           data.filter = data.filter ? this.filter 1: null;
           data.filter.concat(myFilters);
           //  DataBase calls on data.filters
           ...
},

however, i found getPageData is only called when kendo filter object is not empty, in another words, since I had my own filters, thus the getPageData() will never get called since the original kendo object is never changed, so i have to fake some data into kendo.grid.dataSource.filter.filters() in order to let the event fired. Is there another way to fire the event without faking any data.

[Alexander Valchev]

Hello Paul,

I am afraid that currently the FilterMenu does not provide opportunity for defining a filter UI template so your scenario is not supported out of the box. It is possible only to customize the filter widget via columns.filterable.ui property, but if you would like to make more advanced changes in the layout you should modify manually the DOM structure/filters.

Is there another way to fire the event without faking any data?

If I understood correctly, you would like to trigger the read transport of the dataSource. Is that correct (the word 'event' is confusing)? In such case, please use the corresponding API method:

• http://docs.kendoui.com/api/framework/datasource#methods-read
  
  

Regards,
Alexander Valchev
Telerik

[Paul]

Thank you so much for the help, by calling grid.dataSource.read(), everything works fine, except the read is triggered twice, first time by my API call (grid.dataSource.read() ), second time it called by default, and the stack trace can't tell me anything. Is there a way to stop the second time trigger?

If not, i am thinking to prevent default event on "Filter" and "Clear", however, i couldn't figure out how to "hide" the filter window after the click event.
is there a filter.window.toggle kind of method i can use?

Thanks

[Alexander Valchev]

Hi Paul,

Filter menu is instance of a kendoPopup component. In order to close it, you should obtain the client side object of the Popup and use its close method. In order to select the filter menu DOM element you can use "form.k-filter-menu". For example:

$("form.k-filter-menu").data("kendoPopup").close();

Please have in mind that usually there are more than one filter menus attached to the grid. You would have to specify which form.k-filter-menu element you need by its index.

On a side note, it seems that you want to re-read the DataSource after filter button in the menu is clicked. Is that correct? In such case, instead of blocking the default behavior and making a read call through the API, you may consider using the default read call but modifying the filter parameters in parameterMap function of the transport. 

Regards,
Alexander Valchev
Telerik