Angular 2 port of HeaderFilters (aka filter row) example in Angular 1

Angular 2 port of HeaderFilters (aka filter row) example in Angular 1

Posted by: fabian-mueller on 14 September 2017, 11:48 am EST

• 

  fabian-mueller

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:48 am EST

  I found an example of how header filters can be implemented in Angular 1. Is there any port available that implements the same thing in Angular 2? Or is it planned to port this example also to the Angular 2 world? If not does this example use methods or concepts that are not available in the current Angular 2 version of Wijmo?

  Background: We are currently evaluating the framework in our company. In the current implementation we use jqWidgets that comes with a grid that supports a filter row out of the box and we’d like to have the same functionality in the new implementation. But we feel like this requirement already needs quite a deep understanding of the internals of the framework and we’d like to see at least a reference implementation for such a low level task.

• 

  skochan

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:48 am EST

  Hi,

  Really sorry for the late reply. The Header Filter Sample is now available and you can check it out from here.

  Thanks,
  
  Abhishek

• 

  stefan-brenner-a

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:48 am EST

  Hi,

  we are using your grid in multiple of our applications which have quite a lot of grids and are currently using the <wj-flex-grid-filter> to enable filtering. Now our customers are requesting exactly what the Header Filter Sample shows because the filter menu is too much overhead for them if they only want a simple contains filter (which is almost always the case). To explain their issue more closely, they need to click the filter icon, switch to filter by condition, add a contains filter, type in their search text and finally click OK to see the result. With the header filter they can just click the input field, type in their search text and directly see the result, which is also helpful because it helps them to see if their search pattern already shows the wanted result without having to click OK, checking the result and opening the dialog again to modify their search because the result is not what they need.

  So I’ve been looking at the sample provided in this post and in principle the filter on the title column is exactly what we would need for our text columns. The problem is that the sample is very specific and would really require lots of work to implement in all our grids. So the question I have is if there are any plans to add a standard element like the <wj-flex-grid-filter> that enables us to easily add this feature to all our grids and if yes, when such an element could be expected. If there are no plans to provide something like this in the near future, could you please provide me with a more general (without fixed column names, setting titles in code,…) example to implement this? We are already deriving our grids from your Flexgrid to add some custom functionality. So I could also add some code in our derived grid to enable a header filter in all our grids.

  Thanks and best regards!

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:48 am EST

  Hello,
  
  Currently, there is no plan for this. We have added it to our to-do list to provide more generic samples. We will work on this sample and will try to provide a sample as soon as possible.
  
  But we cannot provide any ETA for this.

  Thanks,
  
  Manish Kumar Gupta

• 

  stefan.brenner.a

  • Post Options:
  • Link
    Copy

  Posted 15 September 2017, 2:17 am EST

  Hi,

  it has be some time so are there any updates on such a generic sample? Our customers are still requesting this filter row frequently. Or are there even some plans to make it a standard feature? It would really enhance the grid!

  Thanks and best regards

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 18 September 2017, 4:38 am EST

  Hi,
  
  We are sorry, this is still on our task list for investigation.

  Thanks,
  
  Manish Kumar Gupta

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 7 December 2017, 7:58 am EST

  Steps to add Filter Row for Wijmo FlexGrid, in your Angular2 application.

  1. Add ‘wj-grid-filter-row’ folder (attached).
  2. Import ‘WjGridFilterRowModule’ module in your app.

  (app.module.ts)

  
  @NgModule({
    ...
    imports: [
      ...
      WjGridFilterRowModule
    ]
    ...
  })
  export class AppModule { }
  

  3. Add flexgrid header filter directive, in your template.

  (app.component.html)

  
  <wj-flex-grid #filterRow=WjGridFilterRow wj-flex-grid-filter-row 
      [itemsSource]="data">
  </wj-flex-grid>
  

  Features:

  1. Filter with string(case sensitive/insensitive)/checkboxes/regex
  2. Change filter modes(raw value/formatted value)
  3. Save/Load filter from serialised filter string
  4. Independent of FlexGrid Filter module.

  ~nilay

  wj-grid-filter-row.zip

• 

  stefan.brenner.a

  • Post Options:
  • Link
    Copy

  Posted 11 April 2018, 7:43 am EST

  Hi,

  thanks for the sample. I got it working with some limitations.

  • The itemsSource can’t be an array anymore but must be a CollectionView
  • Columns can not be defined using the wj-flex-grid-column directive
  • Column header icons are no longer displayed (for example the Sort icon)

  I was able to handle the first two topics but don’t know how to avoid the problem with the header icons. Would it be possible to add the filter row without changing the header row?

  Also I would still be very much in favor of this feature could becoming part of the FlexGrid instead of needing a custom implementation. Is this something you could consider?

  Thanks and best regards