Wijmo Transposed Grid - Is there an easy way to reuse itemFormatter?

Posted by: james.ingham on 20 October 2020, 4:51 pm EST

  • Posted 20 October 2020, 4:51 pm EST

    Dear support,

    First of all, thanks for having provided such a fantastic FlexGrid UI, which not only consists of a basket of very useful features, but allows us to add our own seasonings by customising itemFormatter, <wj-flex-grid-column > etc.

    There is indeed something to improve though. Our clients frequently request a "transposed grid" feature which I don't think Wijmo had until the recent release with <wj-transposed-grid> UI. It's better than nothing, however is possibly not intuitive to use. The best solution I believe should be to reuse the original <wj-flex-grid> UI but simply adding an extra transpose function, as opposed to creating a separate UI component that only share the data with the original grid.

    The current problem we are facing is that the "seasonings" we added on <wj-flex-grid> can't be easily applied to <wj-transposed-grid>, such as itemFormatter and column templates, because the column/row indice and many other stuff don't match.

    May I ask whether there is any general way to tackle this issue, or may we request Wijmo implement the transpose function directly on FlexGrid?
  • Replied 22 October 2020, 4:40 am EST

    Hi James,

    Thank you for the nice feedback. :)
    Regarding the transpose-grid, could you please explain the exact issues you facing with the implementation of the transpose grid? If it is just regarding the formatItem then you may add the format function in such a way that it works for both transpose-grid and flexgrid as demonstrated in the following demo:
    https://www.grapecity.com/wijmo/demos/Grid/TransposedGrid/ProductSheet/angular

    Regards
  • Replied 22 October 2020, 2:22 pm EST

    Thanks Sharad,

    The exact problem we are currently facing is that we don't know how to customise the grid cell in the transposed grid. In the normal FlexGrid, we do it in this way (angular):

    <wj-flex-grid>
    <wj-flex-grid-column>
    <ng-template wjFlexGridCellTemplate ...>
    <!- our own component inside grid cell ->
    </ng-template>
    </wj-flex-grid-column>
    </wj-flex-grid>


    However, this doesn't seem to work in the transposed grid:

    <wj-transposed-grid>
    <wj-transposed-grid-row >
    <ng-template wjFlexGridCellTemplate ...>
    <!- our own component inside grid cell ->
    </ng-template>
    </wj-transposed-grid-row >
    </wj-transposed-grid>


    Maybe we shouldn't use wjFlexGridCellTemplate in the transposed grid component. Could you help?
  • Replied 26 October 2020, 1:23 am EST

    Hi James,

    We are sorry but wjFlexGridCellTemplate is currently not supported by the transposed grid. You need to use the formatItem event as demonstrated in the previously shared demo or celltemplate property as demonstrated in the following code snippet:
    <wj-transposed-grid-row 
    [cellTemplate]="'template string'"
    [binding]="'binding'"
    [header]="'header'">
    </wj-transposed-grid-row>

    API reference: https://www.grapecity.com/wijmo/api/classes/wijmo_grid_transposed.transposedgridrow.html#celltemplate

    Regards
  • Replied 27 October 2020, 11:24 am EST

    Thanks Sharad.

    Unfortunately neither cellTemplate nor itemFormatter fits our needs because we want to use our angular UI components in transposed grid cells. cellTemplate does not work with Angular's AoT compilation.

    Do you have any idea on when Wijmo would implement this feature? We just hope transposed grid can work the same way as flex grid (sth. as wjTransposedGridCellTemplate)
  • Replied 29 October 2020, 9:21 pm EST

    Hi James,

    We are sorry but there is no ETA on the cell templates for TransposedGrid.

    It seems that your requirement is to add an angular component to the cells of FlexGrid that is why you were using the wjFlexGridCellTemplate directive. But, for the transposed grid, the cell template directive is not available, so if you wish, you can create dynamic templates on the component side by using the ComponentFactoryResolver of angular.

    Please refer to the sample attached for reference.

    Regards,
    Ashwin

    dynamic component.zip
Need extra support?

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

Learn More

Forum Channels