Using Pipe on Grid Data Map and Grid Filter

Using Pipe on Grid Data Map and Grid Filter

Posted by: cesar.smerling on 17 October 2019, 2:13 am EST

• 

  cesar.smerling

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 17 October 2019, 2:13 am EST

  Hi, I have a problem on the datamaps and the grid filter. I have a service that translate the value on the grid to certain ‘label’ (translation), the service use a pipe in html to translate. I want to know if I can set that pipe to the display value of the data map and in the filter.
  
  For example, I my row is an object with other objects inside, the binding of the column if for certain atrribute of the row object or the inside row objects:

  row: {
  	name: string
  	item: {
  		name: string
  	}
  }
  

  In this case I have two columns with bindind: column1 → binding ‘name’.
  
  column2 → bindin item.name

  In the grid I have template the cells so they use the translate pipe that I mention, my question is how can I achive the same in the filter component, or data map (combo box) component. THe only solution that I find is to create my angular component that manages this, I think that “sending” the pipe to this wijmo component should solve the problem. Is there a way to do this?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 20 October 2019, 7:22 pm EST

  Hi Cesar,

  Sorry for the delayed response.

  If you wish to show a different value on the cell that the original, I would suggest you use the DataMap class. Using a data map will take care of converting the values to original value and also with the filtering of the column. You could use the transform method of the custom pipe to create a data map on the runtime. Please refer to the sample below:

  https://stackblitz.com/edit/angular-u618cx

  Regards,
  
  Ashwin

• 

  cesar.smerling

  • Post Options:
  • Link
    Copy

  Posted 21 October 2019, 12:23 am EST

  Thanks Ashwin, I already try that, but my problem comes when the lang changes, and need to rebuild the rows (not really necessary) to create the new ‘label’ in that language, when filter and datamaps must use the ‘id’ for that item to work.
  
  Also tried to use the translate pipe inside the getDisplayValues method but I cannot detect when the lang changes because I have to pass the service in the constructor and the selection then don’t work. I think that if the getDisplayValues is there a way to make async I could pass the observable of the change lang detection and create the labels needed inside this method. I’m working on Angular 2 project, the getDisplayValues and getDisplayValue methods could be async?

• 

  cesar.smerling

  • Post Options:
  • Link
    Copy

  Posted 21 October 2019, 12:40 am EST

  The ohter question, is there a method like getDisplayValues() of the DataMap, for the Filter?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 21 October 2019, 9:51 pm EST

  Hi,

  We are working on your issue and will update you once we have further information.

  Regarding getDisplayValue for Filter:

  Since the filter for each column also has a dataMap property that takes an instance of DataMap class. So, you could use the getDisplayValue from this data map.
  
  Let me know if this solves your issue or not.

  ~regards

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 22 October 2019, 10:23 pm EST

  Hi,

  I have asked the dev team to investigate this issue. The internal tracking id of this case is 402912. I will update you as soon as I will hear from them.

  ~regards

• 

  cesar.smerling

  • Post Options:
  • Link
    Copy

  Posted 28 October 2019, 11:30 pm EST

  Thanks Ashwin, I’ll try to look at the use of getDisplayValues for the filter.

• 

  cesar.smerling

  • Post Options:
  • Link
    Copy

  Posted 27 November 2019, 8:24 am EST

  Hello Ashwin, I retake this problem in the grid. I created a DataMap for a column and with the getDisplayValue method the WjFlexGridFilter seems to work ok.
  
  Now I have a problem with the selection of the combo box in the data map.

  My problem is that I have a translate service that the user can change the lang at anytime and the labels are refreshed to this new lang. We have data objects that come from server with the translations. I managed to translate the values in the cell with the data map and in the combo box using this service inside the getDisplayValues and getDisplayValue methods.

  The problem comes when I select a new value in the combo box, the cellEdit is fired but the new value is not selected. I cannot find a solution to this, is there something I’m missing?

  This is my DataSourceMap class: ```

  export class DataSourcesMap extends DataMap {

  constructor(private translateService: TranslateService, private dataSourceSet, private rows) {
      super(dataSourceSet, '','');
  }
  
  public getDisplayValues(dataItem?: any): string[] {
      return this.dataSourceSet
          .map( ds => this.translateService.instant(ds.name));
  }
  
  public getDisplayValue(key: any): any {
      if(key)
          return this.translateService.instant(key);
      return key;
  }
  

  }

  
  The dataSourceSet is a list of objects like this ```
  
  {
  	name: 'name',
  	localizedLabels: { en: 'NameInEnglish'},
  	type: 'type'
  }
  

  I tried implement the getKeyValue method, but the ‘displayValue’ is repeated in the sets so I cannot map the displayValue to the key correctly.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 27 November 2019, 3:43 pm EST

  Hi Cesar,

  Your use case is a little difficult to understand. Could you please provide a small sample replicating the issue so that we can assist you further?

  ~regards

• 

  cesar.smerling

  • Post Options:
  • Link
    Copy

  Posted 27 November 2019, 10:30 pm EST - Updated 3 October 2022, 9:40 am EST

  HI Ashwin, I managed to solve the problem implementing the getKeyValue so that on selection of the dropdown the value is corrected changed. So it’s solved

  Another thing is there a way to open the dropdown on the dataMap on double click in the cell or with space (entering edit mode), it’s seems that the only way to open the dropdown to select new value is click on the arrow button. I want the same behavior with the double click and hitting space (entering the edit mode)

  In screenshot 1 is the clicking on the arrow button, in screenshot 2 is when I double click or hit space bar.

  Thanks

  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 28 November 2019, 3:01 pm EST

  Hi Cesar,

  I am glad that you were able to resolve the issue using the getKeyValue method.

  Regarding your requirement:

  You will need to handle the beginningEdit event for the double click behavior and keydown event for the spacebar behavior and call the toggleDropDownList method of the FlexGrid to open the drop-down. Please refer to the sample below:

  https://stackblitz.com/edit/angular-bfq48l

  ~regards

• 

  cesar.smerling

  • Post Options:
  • Link
    Copy

  Posted 29 November 2019, 12:14 am EST

  Thanks Ashwin, works perfect.

• 

  joshdeveloper22

  • Post Options:
  • Link
    Copy

  Posted 29 December 2022, 11:51 pm EST

  Hi could you guys share me how can I add translations to the grid dropdown ? I could not understand how to fix it with getKeyValue

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 2 January 2023, 4:51 pm EST

  Hi,

  You can refer to the following sample for adding language translation to the grid dropdown, as per your requirements - https://stackblitz.com/edit/js-ontddk?file=index.js

  In case, if you face any issues, please let us know. You can modify the above sample to replicate your issue and share it with us so that we can have a better understanding of your project structure and assist you accordingly.

  Regards,
  
  ~vivek

• 

  joshdeveloper22

  • Post Options:
  • Link
    Copy

  Posted 2 January 2023, 10:18 pm EST

  Hi Vivek Pannu. Thank you for reaching me.

  I found one solution to do it too. I am using, this.flex.getColumn(‘DropdownName’).dataMap = new DataMap(…)

  It works. Yes, maybe a bit heavy process. But it does what I want. Regarding ur solution, mine was little bit different.
  
  Thank you again