Log in to start a topic

Wijmo Grid- On page change unresponsive popup coming and screen got freezed

Posted by: tripathiram77 on 8 October 2023, 3:33 pm EST

  • tripathiram77

    Posted 8 October 2023, 3:33 pm EST

    Doing client side pagination getting unresponsive popup when page size is greater than 10000.

  • anirudh.verma

    Posted 8 October 2023, 7:34 pm EST

    Hi,

    I have tested client-side paging with 100000 rows on one page but I am still not able to replicate the issue on my end. Could you please share a sample replicating the issue along with the steps required to replicate the issue?

    Also, please provide details about your environment including the following details:

    1. Wijmo version.
    2. Framework.
    3. Browser & version.

    You can also modify the provided sample to replicate the issue.

    Please refer to this sample for reference: https://jscodemine.grapecity.com/share/8rZc1Dmx8k2zqtSprh58mw

    Regards

    Anirudh

  • anirudh.verma

    Posted 8 October 2023, 7:58 pm EST

    Hi,

    In case, if the above sample does not work please refer to this sample: https://stackblitz.com/edit/js-lcvtiu

    Thank you.

    Regards

    Anirudh

  • tripathiram77

    Posted 10 October 2023, 2:15 pm EST - Updated 10 October 2023, 3:11 pm EST

    Hi,

    Popup is not coming when there is no customisation.However if we use wj-component-loader along with ng-template, then at that time it is causing issue.

    Also please provide angular sample.So that I can try to replicate the issue.

    Wijmo version:5.20222.877

    Framework: angular

    Browser: chrome (117.0.5938.150)

    Thanks

  • anirudh.verma

    Posted 10 October 2023, 10:15 pm EST

    Hi,

    Thank you for providing the information.

    Please refer to this angular sample to replicate the issue that you are facing at your end: https://stackblitz.com/edit/angular-dpkxvx

    Regards

    Anirudh

  • tripathiram77

    Posted 11 October 2023, 9:47 pm EST

    Hi,

    I have replicated the issue. Please check

    https://stackblitz.com/edit/angular-tevs8c?file=src%2Fapp%2Fapp.component.ts

    Also in our requirement, vertical scroll is not needed so I removed max-height from css.

    Regards

    Ram Tripathi

  • anirudh.verma

    Posted 12 October 2023, 2:23 pm EST - Updated 12 October 2023, 2:29 pm EST

    Hi,

    The page is still working fine on our end. You may verify the same from the below shared GIF.

    However, as per my observation, the grid is auto sizing the row heights, because of which it might be taking some time on your end. You may confirm the same by setting the autoSizeRows property to false in the wjFlexGridCellTemplate as shown below:

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

    You can then provide the default height to all the rows using the defaultSize property of the rows property of FlexGrid. This property can be set in the handler of the initialized event of FlexGrid.

    Please refer to this sample for reference: https://stackblitz.com/edit/angular-mgvynt

    In case, if each row has a different height then you need to manually autoSize the rows that are currently present in the view. For this, it is required to set max-height for the grid to improve the performance.

    Please refer to this DEMO sample for reference: https://www.grapecity.com/wijmo/demos/Grid/Sizing/Auto-sizeRowsAsync/purejs

    Regards

    Anirudh

  • tripathiram77

    Posted 13 October 2023, 2:17 am EST

    Hi,

    Thank you for your suggestion.

    I have applied [autoSizeRows]=“false” as suggested then also it is taking 4-5 minute to load table. If you try to move mouse or trying to perform any other action in that time, then it will show unresponsive popup.Please check on below url:

    https://stackblitz.com/edit/angular-tevs8c?file=src%2Fapp%2Fapp.component.ts

    Also if you try on below url

    https://www.grapecity.com/wijmo/demos/Grid/PagingScrolling/Client-sidePaging/angular

    if you set pageSize to 20000 and increase loop to 500000,then in that case also unresponsive popup is coming.

    The gif which you shared is after table is rendered completely. In that case popup is not coming normally, but if you try to change page then also in that case sometime popup is coming ,if you try to move mouse or try to perform any other action.

    Thanks

  • anirudh.verma

    Posted 15 October 2023, 5:24 pm EST - Updated 15 October 2023, 5:29 pm EST

    Hi,

    Sorry for the late reply, we are not able to replicate the delay in loading the sample that you have shared. Please refer to the following GIF:

    However, when we set the pageSize to 20000 and increase the data loop to 500000 then in that case the FlexGrid creates more than 100000(20000[rows] * 5[columns]) cells. In that case, the browser may become unresponsive for a while and this behavior is expected because the FlexGrid is rendering all the cells. To improve the loading performance please reduce the dimensions of the FlexGrid by setting the height and width for the FlexGrid hostElement. This will allow FlexGrid to enable the virtualization feature because of which only the cells present in the view range will be rendered and hence will increase the loading performance.

    Please set the height and width in the CSS for FlexGrid.

    <wj-flex-grid style="height:800px;" #flex
        headersVisibility="Column"
        [alternatingRowStep]="0"
        [itemsSource]="data">
    </wj-flex-grid>

    You may verify the same by setting CSS in this DEMO sample: https://www.grapecity.com/wijmo/demos/Grid/PagingScrolling/Client-sidePaging/angular

    If you inspect the rows in the Elements panel then you will observe that only a limited number of elements are created in the DOM when FlexGrid’s height and width are restricted. This is because FlexGrid uses virtualization to increase the load performance.

    Regards

    Anirudh

  • tripathiram77

    Posted 19 October 2023, 3:08 am EST

    Hi,

    Thank you for your help.I have set height and it is working fine.

    But there is one more issue.

    As we have large data, so to improve performance we have set [autoSizeRows]=“false” in ng-template as per your suggestion and also [autoRowHeight]=“false” in wj-flex-grid.But after this rows height get reduced to its minimum level and rows content are getting cut.i want to set row height as per content in rows.I tried autorowsizesync approach as suggested in this post

    https://www.grapecity.com/wijmo/demos/Grid/Sizing/Auto-sizeRowsAsync/purejs

    I have added one onscrollevent handler, so when we scroll height of rows is getting set which are in viewrange.

    But due to this approach we are getting unresponsive popup or screen getting freezed as we have more than 50 column and more than 50000 rows.

    Can you suggest some other approach.

    Thanks

  • anirudh.verma

    Posted 19 October 2023, 7:40 pm EST

    Hi,

    Thank you for letting us know that setting size using CSS helped in improving the performance of FlexGrid in your application.

    Explicitly auto-sizing of rows using the viewRange approach was previously suggested when the autoSizeRows property of wjFlexGridCellTemplate is set to false to improve the loading performance. Using the async approach with many cells in the viewRange requires manually updating the height of the row for all the cells present in the viewRange. This will take time if many cells are present in the viewRange. However, setting the height and width has already solved the loading issue in your application so it is not recommended to set autoSizeRows to false in wjFlexGridCellTemplate. This will allow the cell template to increase the grid’s default row height to accommodate the cell’s content.

    Rather than setting the autoSizeRows property to false, you may set the quickAutoSize property to true. It might improve the default auto-sizing performance of FlexGrid.

    If the estimated height of all the rows is same and already known then you may also use the defaultSize property of the rows collection and provide a default height for all the rows by handling the initialized event of FlexGrid.

    Please refer to these API links for reference:

    https://www.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#quickautosize

    https://www.grapecity.com/wijmo/api/classes/wijmo_grid.column.html#quickautosize

    https://www.grapecity.com/wijmo/api/classes/wijmo_grid.rowcollection.html#defaultsize

    Regards

    Anirudh

  • tripathiram77

    Posted 20 October 2023, 12:26 am EST

    Hi,

    I want to set height of row as per content in that row, if we do not set autoSizeRows property of wjFlexGridCellTemplate to false then in that case height of each row will set to maximum content height in table.As you can see on below url

    https://stackblitz.com/edit/angular-tevs8c?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

    In this demo height of second row is same as first row, but I want to set height for row as per content in that row.So in above demo height of second row should not be same as first row as content in second row is less as compared to first row.

    we can not use defaultSize propperty as content in column is dynamic so height can be different for each row.

    We can not use [autoRowHeight] property as it is causing performance issue for large amount of data.

    Thanks,

  • anirudh.verma

    Posted 22 October 2023, 5:06 pm EST

    Hi,

    When the autoSizeRows property of wjFlexGridCellTemplate is set to true (by default) then the cell template will increase the grid’s default row height to accommodate the cell’s content. Hence, all the rows will obtain the height of the row that has the maximum height in the FlexGrid.

    When the autoRowHeights property is set to true, then the height of the rows will be automatically calculated by the grid. This will set separate heights for each row as per its content. However, it is recommended only when the grid has a relatively small number of rows as auto-sizing is an expensive operation.

    When the FlexGrid contains a large number of rows and the requirement is to set separate height for each row. Then it is recommended to restrict the size of the FlexGrid by setting the height and width of the FlexGrid. Then you need to manually resize the rows that are present in the view by calling the autoSizeRow() method on such rows. This will autoSize the rows as per the content present in the row.

    Please refer to this modified sample which shows the Async approach of autoSizing the rows: https://stackblitz.com/edit/angular-u7dcz5

    Regards

    Anirudh

Need extra support?

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

Learn More

Forum Channels

  • © 2023 MESCIUS inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.