IGGrid observable memory leak. | Infragistics Forums

IGGrid observable memory leak.

Long Ho posted over 4 years ago

Hi,

My project is using Angular6 with Infragistics.Web.ClientUI data source localization resources 18.2.72.

The data source of grid was got from API by an observable (about 100MB).

After these actions:

- Create grid

- Call API.

- update data

- destroy grid and clean data.

At first time, nothing happen but in second time, the response data was keep in js heap.

On [rowsRendered] event, I use function ui.owner.getElementInfo([cell element]) to get column setting.

When comment out that line, the heap memory is cleaned.

So how can i use that function without memory leak.

Kind regards

Long Ho

Top Replies

960

Offline N. Ishibashi posted over 4 years ago +1 verified
Hello Long Ho, May I ask you a favor? Could you kindly create a simple isolated reproducible sample by which we can see your issue on our side and...view reply »

Parents

960

Verified Answer
Offline N. Ishibashi posted over 4 years ago

Hello Long Ho,

May I ask you a favor?

Could you kindly create a simple isolated reproducible sample by which we can see your issue on our side and share it with us?
Cancel
Reply

Reject Answer

Cancel

Reply

15

Offline Long Ho posted over 4 years ago in reply to N. Ishibashi

Hello, Noriko,

As I related at the beginning, I am having problems with memory leak.

I bind a function like that on  rowsRendered event of a grid.

   private renderedRow(evt: any, ui: any): void {

        const component = this;

        // get all rows in grid

        const rowTrs: any[] = ui.owner.rows();

        // check length of result data from api

        if (component.sodp0200Data.resultData && component.sodp0200Data.resultData.length > 0) {

            // loop rows in grid

            const _length = rowTrs.length;

            let i;

            for (i = 0; i < _length; i++) {

                const id = rowTrs[i].attributes['data-id'].value;

                const record = component.sodp0200Data.resultData.find((result: any) => result.primaryKey == id);

                // check exist record

                if (record) {

                    // loop cell in row

                    $(rowTrs[i]).find("td").each(function (idindex: number, tdElement: any) {

                        const cellElementInfo = ui.owner.getElementInfo(tdElement);

                        let columnsetting: object = new Object();

                        columnsetting['key'] = cellElementInfo.column ? cellElementInfo.column.key : '';

                        columnsetting['dataType'] = cellElementInfo.column ? cellElementInfo.column.dataType : '';

                        $(tdElement).addClass(component.setMojiIro(record, columnsetting));

                    });

                }

            }

        }

It only happen when data was set by an observable.

After grid destroy, the data source was kept on js heap (even when i had unsubscribe the observable)

When I update function like that, The problem has been resolved.

private renderedRow(evt: any, gridUI: any): void {

        let ui = gridUI;

        let component = this;

        // get all rows in grid

        let rowTrs: any[] = ui.owner.rows();

        // check length of result data from api

        if (component.sodp0200Data.resultData && component.sodp0200Data.resultData.length > 0) {

            // loop rows in grid

            let _length = rowTrs.length;

            let i;

            let columns: any[] = this.sodp0200Data.gridOptions ? this.sodp0200Data.gridOptions.columns : [];

            for (i = 0; i < _length; i++) {

                let id = rowTrs[i].attributes['data-id'].value;

                let record = component.sodp0200Data.resultData.find((result: any) => result.primaryKey == id);

                if (record) {

                    let cells = rowTrs[i].cells;

                    for (let index = 0; index < cells.length; index++) {

                        let element = cells[index];

                        let col = ui.tbody[0].rows[i].cells[index];

                        let columnKey = col.attributes['aria-describedby'].value;

                        columnKey = columnKey.substring(15, columnKey.length);

                        let columnData = columns.find((result: any) => result.key == columnKey);

                        let MojiIro = component.setMojiIro(record, columnData);

                        if (MojiIro) {

                            $(element).addClass(MojiIro);

                        }

                        element = null;

                        col = null;

                        columnData = null;

                    }

                }

                record = null;

                id = null;

            }

            columns = null;

        }

        rowTrs = null;}

This is only a temporary solution. I think that ui.owner.getElementInfo(tdElement); reference to an doom element. But the heap not release when doom destroyed.

I am looking forward to your suggestions
Cancel
Reply

Cancel

Children

960

Offline N. Ishibashi posted over 4 years ago in reply to Long Ho

Hello Long Ho,

Thank you for sharing the codes.

I'm not sure whether or not I exactly understand your issue. I tried creating a new application from the public sample in our GitHub site https://github.com/IgniteUI/igniteui-angular-wrappers, added your rowsRendered handler to it and attached the sample to this response. Does it reproduce your issue?

0844.f121196-app1.zip
Cancel
Reply

Cancel