Using Pipe on Grid Data Map and Grid Filter

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

  • 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?
  • Replied 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
  • Replied 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?
  • Replied 21 October 2019, 12:40 am EST

    The ohter question, is there a method like getDisplayValues() of the DataMap, for the Filter?
  • Replied 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
  • Replied 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
  • Replied 28 October 2019, 11:30 pm EST

    Thanks Ashwin, I'll try to look at the use of getDisplayValues for the filter.
  • Replied 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.
  • Replied 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
  • Replied 27 November 2019, 10:30 pm 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

  • Marked as Answer

    Replied 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
  • Replied 29 November 2019, 12:14 am EST

    Thanks Ashwin, works perfect.
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels