Filter by condition types for Number Column

Filter by condition types for Number Column

Posted by: abhijeet.dey on 3 June 2025, 5:15 am EST

• 

  abhijeet.dey

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 3 June 2025, 5:15 am EST - Updated 3 June 2025, 5:22 am EST

  Hi Team

  I have a Number data type column which represents Years. This column is also a dataMap column, i.e., user can select any year from a dropdown.

  Because of this reason the number column has different Filter by condition types than a usual Number non-dropdown column

  The dropdown number column has types like Begins With, Ends With, Contains

  The non-dropdown number has types like Greater than Less than.

  How do I show the usual Greater than Less than types for dropdown number columns as well?

  Screenshots attached

  

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 4 June 2025, 7:21 am EST

  Hi Abhijeet,
  
  This behavior is expected because dataMap’s internal structure is such that it maps string values to the target values, which makes the column to be treated as a string type column. To get the desired results, you can use the ComboBox as an editor for the required column by using the ‘editor’ property of the Column, instead of using a dataMap on that column.
  
  Please refer to the following sample demonstrating the same - https://stackblitz.com/edit/angular-ivy-23ggaych?file=src%2Fapp%2Fapp.component.ts
  
  In case, you face any issues, please let us know.
  
  Regards

• 

  abhijeet.dey

  • Post Options:
  • Link
    Copy

  Posted 4 June 2025, 8:49 am EST

  Thank you for the solution. This might work for us but it will require many changes in our code base, just to fix the filter. Is there any way to make this as a feature? a dataMap for numbers?

  Also secondly, our dropdown options come from backend API call. Once data is received we toggle the dropdown by doing this

  showDropdown(columnEdited: wjcGrid.Column, data: any, dataMapUrl: OtpDataMap, grid: wjcGrid.FlexGrid, rng: wjcGrid.CellRange) {
  
  columnEdited.dataMap = new DataMap(data.d.results, dataMapUrl.displayMember, dataMapUrl.displayMember);
  
  grid.select(rng);
  
  grid.startEditing();
  
  setTimeout(() => {
  
  grid.toggleDropDownList();
  
  });
  
  }

  What do you suggest to do in case of combobox?

  And secondly our data will not be an array of Numbers. it will be an Array of objects, out of which one property will represent the number, and the rest of the properties may or may not be used to fill out related columns in the grid.

  How do you suggest we handle array of objects with Combobox ?

• 

  abhijeet.dey

  • Post Options:
  • Link
    Copy

  Posted 6 June 2025, 12:13 am EST

  Any update on the above queries?

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 6 June 2025, 1:28 am EST

  Hi Abhijeet,
  
  We have created an enhancement request for a solution for this scenario with DataMap. The internal tracking id for the same is - WJM-36413. We will update you when we have an update from the engineering team on the same. For now, please use the ComboBox as an editor for the column as an alternate solution.
  
  To show the dropdown with combobox editor, you can use the following code -

  showDropdown(columnEdited: wjcGrid.Column, data: any, dataMapUrl: any, grid: wjcGrid.FlexGrid, rng: wjcGrid.CellRange) {
      let editor: wjInput.ComboBox = columnEdited.editor as wjInput.ComboBox;
      if (editor) {
        editor.itemsSource = data;
        editor.displayMemberPath = dataMapUrl.displayMember;
        editor.selectedValuePath = dataMapUrl.displayMember;
  
        grid.select(rng);
        grid.startEditing();
  
        editor.isDroppedDown = true;
      }
    }

  Also, you can use the array of objects as a datasource for the combobox and set the ‘displayMemberPath’ and ‘selectedValuePath’ properties as per your needs. Here’s an updated sample for your reference - https://stackblitz.com/edit/angular-ivy-r7ibxw5c?file=src%2Fapp%2Fapp.component.ts
  
  Regards

• 

  abhijeet.dey

  • Post Options:
  • Link
    Copy

  Posted 6 June 2025, 2:30 am EST

  This worked, but there is an issue. Whenever the combobox opens, it is automatically selecting the first value. What could be the reason for this? My column binding and selectedValuePath are not same.

  comboxbox editor.zip

• 

  abhijeet.dey

  • Post Options:
  • Link
    Copy

  Posted 6 June 2025, 3:19 am EST

  Same thing is happening in your last example. Just increase the setTimeout from 3000 to let say 5000, and then quickly select any of the combobox, you will see it automatically changes to first value

• 

  abhijeet.dey

  • Post Options:
  • Link
    Copy

  Posted 6 June 2025, 3:20 am EST - Updated 6 June 2025, 3:21 am EST

  Video of the same attachedcomboxbox editor asynchronus issue.zip

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 6 June 2025, 8:23 am EST

  Hi Abhijeet,
  
  The selected index of the combobox is reset to the first index by default each time when a new data source is assigned to it. To avoid this issue, you’ll have to set the selectedIndex property of the editor when the grid is in edit mode. Please refer to the following updated sample demonstrating the same - https://stackblitz.com/edit/angular-ivy-eflziwkp?file=src%2Fapp%2Fapp.component.ts
  
  We have used the ‘updateEditorValue’ method in the above sample to set the selectedIndex of the editor, when the data is loaded for the first time.
  
  Regards

• 

  abhijeet.dey

  • Post Options:
  • Link
    Copy

  Posted 10 June 2025, 3:23 am EST

  Thank you this worked, but it is a lot of code just to show the right filter condition types for Number column with dropdown

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 10 June 2025, 8:43 am EST

  Hi Abhijeet,
  
  Thank you for the update. The engineering team has added this enhancement to the backlog, and this feature will be added in the future. We will update you when we have more information available.
  
  Regards