Use of [exclusiveValueSearch] in FlexGrid ^5.20221.842

Use of [exclusiveValueSearch] in FlexGrid ^5.20221.842

Posted by: seaninglis on 30 June 2022, 12:13 am EST

• 

  seaninglis

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 30 June 2022, 12:13 am EST

  I’m using a FlexGridFilter in Angular2+ and getting compilation errors when I try to add the exclusiveValueSearch attribute.

  The html for the filter with a wj-flex-grid element reads:

  
              <wj-flex-grid-filter
                  #filter
                  [exclusiveValueSearch]="utils.false"
              ></wj-flex-grid-filter>
  
  

  and on compilation, the error I get is the standard:

  
  Error: src/app/features/customers/components/customers/customers.component.html:80:17 - error NG8002: Can't bind to 'exclusiveValueSearch' since it isn't a known property of 'wj-flex-grid-filter'. 
  
  

  I import the grid and filter modules in my own module with:

  
  import { WjGridModule } from "@grapecity/wijmo.angular2.grid";
  import { WjGridFilterModule } from "@grapecity/wijmo.angular2.grid.filter";
  

  and the filter otherwise works as expected, with the exception that restoring saved filters always seems to select by value and not conditon,

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 3 July 2022, 5:16 pm EST

  Hello,

  We apologize for the delayed response, the issue does seem like a bug therefore we have reported the issue to our Dev team for further investigation of the issue with an internal tracking ID WJM-24234. We will provide you with an update on this as soon as we get any response.

  Sorry for the inconvenience.

  Regards

• 

  seaninglis

  • Post Options:
  • Link
    Copy

  Posted 3 July 2022, 6:46 pm EST

  Ok, thanks.

  I’m not certain if I need this at all, it’s just an obstacle I hit investigating a different problem:

  I’m using the flex grid filter to filter according to a number of conditions, and saving that filter away to reapply.

  When I reapply the filter, it does filter the grid correctly - including translating the local filter to an appropriate oData call. But editing the filters at that point doesn’t show the original conditional filter, it appears to convert each of the filters into a filter by value with every possible value checked for the data that I’ve retrieved.

  Is this expected? What is the sequence of events to allow my filter-by-condition filters to be restored and subsequently edited?

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 4 July 2022, 5:41 pm EST

  Hello,

  As per our understanding, you want to store filter applied on the grid and restore it later on, if so then we apologize but we are unable to replicate the issue at our end, could you please refer to the below sample used to replicate the issue and let us know if any changes are required to replicate the issue at our end?

  If you are facing the issue only in your application and not in the below-shared sample, it might be possible that the issue is caused due to some other factors in your application therefore I would request you to please share a small sample replicating the issue.

  Sample link: https://stackblitz.com/edit/angular-kkhfbs?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

  Demo link: https://www.grapecity.com/wijmo/demos/Grid/PersistingState/angular

  Regards

• 

  seaninglis

  • Post Options:
  • Link
    Copy

  Posted 4 July 2022, 11:33 pm EST

  Thanks. As near as I can tell I’m following this sequence of events, but with two changes:

  1. My columns are dynamically generated with a *ngFor
  2. My data source is an ODataVirtualCollectionView

  When I restore my filter, the grid is correctly filtered. But when I then come to edit the filter, the column filter is not presented as a “Filter by condition”, but is shown as “Filter by value.”

  If I then click on to “Filter by condition”, no filter condition is show, it’s as if it didn’t exist.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 5 July 2022, 9:44 pm EST

  Hello,

  We apologize but after making your mentioned changes, we are still unable to replicate the issue at our end. Could you please provide a sample replicating the issue? so that we can find the root cause of the issue and assist you accordingly.

  Sample link: https://stackblitz.com/edit/angular-haiuee?file=src%2Fapp%2Fapp.component.html

  Feel free to update the above sample to replicate the issue and send us back for further investigation.

  Regards

• 

  seaninglis

  • Post Options:
  • Link
    Copy

  Posted 7 July 2022, 9:27 am EST

  Thanks, I was trying to extract the important parts into something reproducible and this is a great help.

• 

  seaninglis

  • Post Options:
  • Link
    Copy

  Posted 7 July 2022, 9:59 am EST

  Hi,

  I was able to reproduce the behaviour I’m seeing by swapping the order in which the filter definition and column definitions are restored.

  https://stackblitz.com/edit/angular-uz6mt9?file=src%2Fapp%2Fapp.component.ts

  In this case you do a conditional filter on ProductName begins with “Q”, refresh, and restore the filter, the data is filtered correctly, but editing the filter shows a “select by value” version and the conditional filter is blank.

  In my own case, I apply the filter and sort conditions in a function; the function returns a list of column definitions, and I use those to update the array that *ngFor in my template iterates over.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 10 July 2022, 3:43 pm EST

  Hello,

  We apologize for the delayed response, you would be required to restore the ColumnLayout first to let the columnFilter show the correct restored state. Each filter on the column header shows the columnFilter(specific to the data represented in that column). Therefore to restore its state properly you would be required to load the columnLayouts first and then perform the rest on the grid.

  In case you still face any issues then let us know.

  Regards

• 

  seaninglis

  • Post Options:
  • Link
    Copy

  Posted 10 July 2022, 6:58 pm EST

  Thanks.

  I alway drive the columns that are going to be rendered by assigning to an array, and then rendering the columns with an *ngFor in the template - there are other things happening that may affect that array:

  
  <wj-flex-grid-column
      *ngFor="let c of DisplayColumns"
      [header]="c.header"
      [name]="c.name"
      [binding]="c.binding"
      [width]="c.width"
      [align]="c.align"
      [wordWrap]="c.wordWrap"
      [isReadOnly]="utils.true"
  >
      <!-- possible ng-template columns and template logic here -->
  </wj-flex-grid-column>
  
  

  I can change things so that I assign to

  DisplayColumns

  and then apply any filters, but how do I ensure that the flexgrid has finished any internal processing / rendering that it needs to do before I change the filterDefinition and sortDescriptions properties?

  In the example code, assigning to columnLayout appears to be synchronous, but I don’t have this guarantee.

  I assume I’ll need to assign to the array, and then wait for some layout event / events to be complete before I apply sort and filter, but which one’s, and in what order?

  Edit:
  
  Looking at the updatedLayout event, it does appear to get fired when the bindings change like this, but also for many other events that I’m not interested in.

  It looks to me like the right approach is:

  • update the columns binding variable and set a flag to say that a filter update is pending
  • handle the updatedLayout event and it the flag is set, apply any pending filters and definitions

  is there another more specific event I should trap or a different approach I should take given that I must generate the column list from the bound column array?

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 11 July 2022, 10:51 pm EST

  Hello,

  I’m afraid there isn’t any specific event to detect when the column layout gets updated. You can add the code to update the filterDefinition in a setTimeout() after updating the DisplayColumns array. This will cause the filterDefinition to get updated after the angular change detection gets executed and the columns layout gets updated as per the restored layout.

  Another approach you can try is to manually force the angular change detection after updating the DisplayColumns array and then update the filterDefinition.

  Let us know if that works for you.

  Regards

• 

  seaninglis

  • Post Options:
  • Link
    Copy

  Posted 13 July 2022, 2:34 am EST

  Hi,

  Thanks, in the absence of a specific event I’ll try both and see how it looks.

  Sean

• 

  seaninglis

  • Post Options:
  • Link
    Copy

  Posted 13 July 2022, 2:36 am EST

  I realise that the [exclusiveValueSearch] error is unrelated but marking as answered as fixing the layout sequence is ultimately what I’m after.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 13 July 2022, 2:42 pm EST

  Hello,

  We are glad that your issue has been resolved. As for the issue caused due to exclusiveValueSearch property, we will provide you an update as soon as we get any response from the Devs.

  Regards

• 

  seaninglis

  • Post Options:
  • Link
    Copy

  Posted 17 July 2022, 11:45 pm EST

  Just to confirm setTimeout() works in all the circumstances I need, with various test settings for CPU and network throttling, thanks.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 24 July 2022, 2:21 pm EST

  Hello,

  Yes, it will work in almost every circumstance. In case you face any issues you can let us know.

  Regards