How to render a component in a cell with better performance ?

Posted by: rizwan on 14 January 2020, 5:52 am EST

  • Posted 14 January 2020, 5:52 am EST

    Currently I am using following code in my wrapper component to render data.

    <wj-flex-grid #grid [(itemsSource)]="dataSource" (initialized)="gridReady(grid, $event)" headersVisibility="Column">
    <wj-flex-grid-filter #filter></wj-flex-grid-filter>
    <wj-flex-grid-column *ngFor="let col of colums.items"
    <ng-container *ngIf="col.customCell">
    <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
    <ng-container *ngComponentOutlet="col.customCell; injector: createInjector(cell); "></ng-container>

    I am using 'ngComponentOutlet' to render the component dynamically which i receive from colum definition which is my custome object given below

    colDef: {
    header: "Location",
    allowSorting: true,
    allowFilter: true,
    customCell: SomeComponent
    width: '100'

    For just 50 records, the UI stucks for a moment. Can you please guide me if how can i improve its performance or is there any better way of doing this?
  • Replied 14 January 2020, 3:18 pm EST

    Hi Rizwan,

    We are sorry but we were not able to replicate the issue at our end. Please refer to the sample below that we used to replicate the issue:

    Could you please let us know whether we are missing something in order to replicate the issue? You may also modify the sample accordingly so that it replicates the issue.

  • Replied 14 January 2020, 6:31 pm EST

    I am trying to reproduce this issue on stackblitz. I have noticed another issue. anchor tag not working inside of cell. when i click, nothing happens. please have a look on below example.

    My full wrapper component which i am using in a project and having UI issue. Please suggest if i can do dynamic component rendering better than this.
  • Replied 15 January 2020, 1:37 am EST

    I have tried to do this using wj-component-loader and its performance is a bit better but problem is custom cell component cells do not update even data source changes on pagination. here is my code

    <ng-template *ngIf="col.customCell" wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
    <wj-component-loader [component]="col.customCell" [properties]="{cell: cell.item}"></wj-component-loader>

    Interesting thing is that other columns do update on pagination or when data source changes. Please suggest.
  • Replied 15 January 2020, 8:04 pm EST

    Hi Rizwan,

    Thank you for the sample.

    I updated the provided sample to use WjComponentLoader to load the components. I also updated the FFIdFormatterComponent class to use the ID provided and update the view accordingly. It is working even if we change the page or the data source.

    Regarding the performance, even while using the ngComponentOutlet to load components, the performance in my machine was good. The UI was stuck but only for a fraction of seconds. If you will run the sample in production mode, UI will never get stuck. Below is my machine configuration:

    OS: Windows 10
    Ram: 12Gb DDR3
    Processor: i7-3370 @ 3.40GHz
    Browser: Chrome 79

    Regarding the anchor tag, the clickSearch method was called without changing anything.

    Refer to the sample attached and let me know if there are still any issues.

  • Replied 16 January 2020, 7:22 pm EST

    Thanks ashwin for your changes. I just need to understand oninit and ondestroy flow. I have attached the image and updated that stackblitz example.

    Please help me understand why IdFormatterComponent is being destroyed right after init. Because i can not figure out the pattern it follows for custom components rendering. You can comment the destructor and click on custom component i.e. id. and it starts giving some weird pattern in console logs.

    i need to set this property in my real application because if i dont do this then:
    -> grid is first rendered with default row size truncating my custom comp items.
    -> then after some seconds it is redrawn with what we want.
    but by setting it to true oninit of custom component is being called twice. For example, if i render 50 rows its total count becomes 100. But When this flag is set to false, although design is disturbed for some time but oninit does not get called twice.

  • Replied 19 January 2020, 10:32 pm EST

    Hi Rizwan,

    I have asked the dev team on why the component is initialized and destroyed multiple times. The internal tracking id of the case is 417659.

    Regarding autoRowHeights, this is expected because autoRowHeights property works after the grid have been loaded. You could try using the autoSizeRows property of WjFlexGridCellTemplate. This will automatically resize the rows according to the data:
    <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell" [autoSizeRows]="true">
    <ng-container *ngComponentOutlet="col.customCell; injector: createInjector(cell); "></ng-container>

  • Replied 20 January 2020, 8:43 pm EST

    Hi Ashwin,
    Thanks for looking into the issue. I am waiting for dev team and yours response on it.

    I have tried with autoSizeRows and it has disturbed styling of my actual component.

    The most important issue now is, when i render more than two dynamic components with some styling on .wj-cell and .wj-header, the UI and grid hangs and does not work as it should. I have replicated the issue in the following stackblitz demo. Please have a look. Waiting for your quick response as i am using enterprise version and new to wijmo so i am having a lot of issues.
Need extra support?

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

Learn More

Forum Channels