FlexGrid Header Filter Controls

FlexGrid Header Filter Controls

Posted by: jason.brandt on 11 July 2018, 2:38 am EST

• 

  jason.brandt

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 11 July 2018, 2:38 am EST - Updated 3 October 2022, 11:26 am EST

  I have filters at the top of each column with textboxes that filter that column data. (sometimes they are dropdowns for item select)

  And I am running into the following problem =

  There appears to be no way to bind the controls content to the wjcGridFilter.FlexGridFilter object.

  • Request: What I need to know is how to get the control (input or dropdown or whatever it might be) to also clear its value when I clear the wjcGridFilter.FlexGridFilter object or clear the cvPaging wjcCore.CollectionView this.cvPaging.filter object.

  Is there a way to do this?

  

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 11 July 2018, 4:17 am EST

  Some more notes =

  I am using the following method from the example =

  itemFormatter(panel: wjcGrid.GridPanel, r: number, c: number, cell: HTMLElement) {
  cell.appendChild(this.EntityIDFilterBox.hostElement);
  }
  

  In order to create the header filter control.

  Perhaps there is a way to two-way bind the control’s text value to the cvPaging.filter object?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 11 July 2018, 10:37 pm EST

  Hi,
  
  Please refer to the following sample which implements custom filters along with FlexGridFilter:-
  
  https://stackblitz.com/edit/angular-s8uzyr?file=app%2Fapp.component.ts

  ~Manish

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 12 July 2018, 2:51 am EST

  (just in case someone else references this thread instead of the other one, I will post my response in each for completeness…)

  Thank you, I am taking a look at this sample now…

  NOTE: When using the example above the textbox that contains the user entered text clears when the Advanced Filters “clear” button is clicked - however, the grid does not clear and update its filtered set until you click into the textbox again.

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 12 July 2018, 9:08 am EST

  Ok, I have had time to go over the example.

  I am running into two issues.

  a) When the page loads I now get this error: ```
  
  Cannot read property ‘EntityName’ of undefined

  
  - it happens here = 
  

  var entityNameFilter=(item:any,{EntityName})=>{
  
  let text=EntityName;

  
  b ) When I click on the filter textbox and add text I get the same error as above, but at a different place in the code:
  

  this.filterControls.EntityName.textChanged.addHandler((s,e)=>{
  
  this.filterText.EntityName=s.text;

  
  
  - Could this be a timing issue if my data is being brought back via promise on a very large data set?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 12 July 2018, 8:16 pm EST

  Hi,
  
  We are sorry for the issue in the last sample.
  
  Here is the sample with the fix:- https://stackblitz.com/edit/angular-opvrzh?file=app/app.component.ts

  a) When the page loads I now get this error:
  
  Cannot read property ‘EntityName’ of undefined

  It seems like that the object passed on to filter function is not defined.
  
  In the sample above check line no 182, object this.filterText is used for storing current filterText which is passed on to customFilters.
  
  Please make sure that this object is defined in the constructor with the right set of keys(EntityName in your case) and let us know if you still face some issues.

  ~Manish

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 13 July 2018, 5:27 am EST

  Yes you are correct, that was the problem in part. I had forgotten to initialize the filterText Obejct with empty string values =

  this.filterText={
              EntityName:"",
  

  However, I also had to move my dataService API call to the init(grid) method. It appears the init(grid) method is called before the service can return the dataset = and that seems to break the filter binding.

  By placing the code for the data service to populate the grid data in the init(grid) method and the init(grid) code lines inside the promise return = the grid and filters now work properly.

  Thanks!

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 15 July 2018, 10:29 pm EST

  Hi,
  
  We are sorry but we are unable to replicate the issue at our end.
  
  Here is the sample code we tried to replicate the issue on:-
  
  https://stackblitz.com/edit/angular-wms1qn?file=app%2Fapp.component.ts

  In the sample above we made the API call after 2 sec and then assign the returned data to the grid. In this scenario, the grid and filter seem to be working fine.
  
  Please have a look and let us know if we are missing something important to replicate the issue.

  Regards

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 16 July 2018, 4:51 am EST

  I am not sure if it is the cause. But our service is an Observable. Perhaps there is a different initialization order that delays observable bindings for api calls?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 16 July 2018, 11:17 pm EST

  Hi,
  
  The observable should not have any effect on data.
  
  Here is an example which receives data from the server using angular’s HttpClientModule(which uses observables):-
  
  https://stackblitz.com/edit/angular-tovrb9?file=app%2Fapp.component.ts

  Everything seems to be working fine in this sample. Please have a look and let us know if we need to make some changes to replicate the issue. You may also share a small sample of your own reflecting the issue.

  ~Manish

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 18 July 2018, 10:13 am EST

  This is as close as I can get (but the stackblitz does not work)

  https://stackblitz.com/edit/angular-uczapb?file=app%2Fgridconfigmenu.component.ts

  (note: i changed the data source and know it will not provide the correct data as I am unable to create a dataset / api for this example at this time)

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 18 July 2018, 10:22 am EST

  Also note that when using the ‘global filter’ and then using a column filter = the column filter no longer works until i manually clear the filter object…

  Any ideas why?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 18 July 2018, 9:11 pm EST

  Hi,
  
  After resolving the errors and getting the provided sample to work, we are still unable to replicate the issue.

  I moved the service call to constructor from grid init() method and put the grid initialization work in init() method but still, the filter binding seems to be working fine.

  Here is the link to updated sample:-https://stackblitz.com/edit/angular-ezjcmk?file=app%2Fapp.component.ts
  
  Please have a look at it.

  Also note that when using the ‘global filter’ and then using a column filter = the column filter no longer works until i manually clear the filter object…

  This is caused due to the reassignment of the filter function in gridglobalfilter.component.ts file line 37.
  
  Since new filter function is used it no longer checks for the custom column filter value.
  
  Please refer to the above mentioned updated sample for more info.

  ~Manish

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 19 July 2018, 6:19 am EST

  Thanks! yes that did the trick, it works great!

  You are rockstars and were incredibly helpful.

  Thank you so much for the help, this will aid us in our growing use of wijmo