1. Home
  2. Forum
  3. Angular - EJ 2
  4. Grid Blinking or Flickling

Grid Blinking or Flickling

Hi,

I am facing a issue in grid. When scroll down or up in grid then it is blinking or frickling. I used In frozen columns and set enable virtualization true.

I also attached the problem in video, So please find the attached file.

 


Attachment: grid_e61d2d1c.zip

10 Replies 1 reply marked as answer
SK Sujith Kumar Rajkumar Syncfusion Team March 2, 2022 10:30 AM UTC

Hi Nagendra, 
 
Greetings from Syncfusion support. 
 
When trying to perform fast scroll on the Grid with virtual scrolling, it will take a fraction of a second to create and append row elements to the Grid(for remote data it depends on the data response received from the server) and during that time white space will be displayed there. This is the default scrolling behavior which can also be observed with a normal html table. Please check the below sample with normal HTML table for your reference, 
 
 
So as mentioned this is the default scroll behavior when normal html table is used(where all the data is rendered in the DOM initially) and when we take the EJ2 Grid the row element will be created(based on the data source) and appended in the DOM on scroll stop(for virtual scroll). And so the white space will be displayed before the row is appended to the Grid. This is the default behavior of the Grid based on the current architecture. 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R 


NG Nagendra Gupta March 2, 2022 04:44 PM UTC

Hi,

Thanks for your response.

I totally understand your previous reply, but my question is still there. Why grid are blinking ? Which I already attached the video for that in previous.


SK Sujith Kumar Rajkumar Syncfusion Team March 3, 2022 12:30 PM UTC

Hi Nagendra, 
 
From the shared video demo we could see that you have demonstrated the flickering of row elements inside the Grid and understand that you mean this by Grid blinking. As you can see in the video the entire Grid element is not flickering only its content(row elements) are flickering and it is more visible due to enabling frozen columns which will re-render the row content along with the frozen line that separates it with the other columns. This is the case that we has explained to you as the default behavior in our previous update.  
 
If we misunderstood your or if you require any further assistance, then please get back to us. 
 
Regards, 
Sujith R 


NG Nagendra Gupta replied to Sujith Kumar Rajkumar March 3, 2022 06:58 PM UTC

Dear Sujith Kumar Rajkumar,


I understood your reply. But our problem is that when the case occur it continuous fricking without any mouse scroll or keyboard up/down arrow key. It frickling like animated graph or ECG graph.


SK Sujith Kumar Rajkumar Syncfusion Team March 4, 2022 11:30 AM UTC

Hi Nagendra, 
 
From the previously shared video demo we could see that the Grid flicker was occurring after mouse scroll. So here for local data the row elements will be immediately rendered and for remote data the data fetch will occur and on successfully retrieving the data it will be rendered in the Grid. This is the case we had previously explained to you. But from the last query we could understand that your reported problem is continuous flickering is occurring even without performing any mouse scroll or keyboard actions. Since we are unable to replicate this case from our end, can you please share us the following information to validate further on this, 
 
  • Let us know the problem replication steps along with a video demonstration for clear understanding.
  • Have you bound local or remote data to the Grid? If remote data which adaptor have you used?
  • Share us the package.json file of your application.
  • Share us the Grid rendering code.
  • If possible share us a simple sample to replicate the problem or try reproducing it in the above shared sample.
 
Regards, 
Sujith R 


NG Nagendra Gupta March 14, 2022 11:57 AM UTC

  • Let us know the problem replication steps along with a video demonstration for clear understanding.

          Attach video below

  • Have you bound local or remote data to the Grid? If remote data which adaptor have you used?

          No, I'm using template in grid

  • Share us the package.json file of your application.

          package.json attach below

  • Share us the Grid rendering code.

          

<ejs-grid *ngIf="displayGrid" #grid [editSettings]="editSettings" [dataSource]='data' gridLines="Both"
        [enableHover]="gridDataSetting?.IsMouseHover" [allowSorting]='gridDataSetting?.IsSortingAllow'
        [sortSettings]='initialSort' [contextMenuItems]="contextMenuItems" (contextMenuClick)='contextMenuClick($event)'
        allowExcelExport=true allowPdfExport=true allowResizing=true [allowMultiSorting]=true
        [enableVirtualization]="enableVirtualization" [allowSelection]="true" [selectionSettings]="selectOptions"
        (click)='click($event)' [height]="gridHeight" (dataBound)='dataBound()' [rowHeight]='gridDataSetting?.RowHeight'
        [allowTextWrap]='gridDataSetting?.IsWrapText' (queryCellInfo)='customiseCell($event)'
        (pdfHeaderQueryCellInfo)='pdfHeaderQueryCellInfo($event)' (pdfExportComplete)='pdfExportComplete()'
        (pdfQueryCellInfo)='pdfQueryCellInfo($event)'
        [ngClass]="{'carddesign': gridDataSetting?.PortraitReportType=='CARD' , 'cardinalldevice':  gridDataSetting?.PortraitReportType=='CARDINALLDEVICE' }"
        (excelExportComplete)='excelExportComplete($event)' (keyPressed)="keyPressed($event)"
        (keydown)="keyDown($event)" (cellSaved)="cellSaved($event)" (cellSave)="cellSave($event)"
        headerTemplate="headerTemplate($event)" [aggregates]="aggregateColumn" (cellEdit)="cellEdit($event)"
        (cellSelected)="cellSelected($event)" (actionBegin)='onActionBegin($event)' [searchSettings]='searchOptions'
        [columns]="headerColumnList" (excelQueryCellInfo)='excelQueryCellInfo($event)'
        (actionComplete)='onActionComplete($event)' (created)='created($event)' (rowDataBound)='rowDataBound($event)'
        [pageSettings]='options' [groupSettings]="groupSetting" [allowGrouping]="uiGridSetting.allowGrouping"> </ejs-grid>

We are using templates instead of columns.

ngOnit() {
        const group: any = {};
        if (this._page
            && this._page[this.dataSetName]
            && this._page[this.dataSetName].Tables
            && this._page[this.dataSetName].Tables[this.gridType]) {
            let colCheckBox = this.gridDataColumns.filter(col => col.ColumnType == "CHECKBOX");
            this.dataManager = new DataManager(<JSON[]>this._page[this.dataSetName].Tables[this.gridType])
                .executeQuery(new Query()).then((e: ReturnOption) => {
                    const Sno = '__SrNo';
                    const rowSpan = 'rowSpan'
                    let nextMergingSrNo = 0
                    let i = 0;
                    const data: any = e.result;
                    const rows = []
                    data.forEach((item) => {
                        i += 1
                        item[Sno] = i;
                        if (colCheckBox.length > 0) {
                            colCheckBox.forEach(element => {
                                if (item[element.FieldName] === '1' || item[element.FieldName] === 1) {
                                    item[element.FieldName] = true;
                                } else {
                                    item[element.FieldName] = false;
                                }
                            });
                        }
                        this.gridDataService.executeRowSpanning(data, item, this.rowSpanSetting, Sno);


                        rows.push(item);
                    })
                    this.data = rows;

                    if (this.page.allowFloatType) {
                        if (this.parentContainer
                            && this.parentContainer['style']) {
                            let cardHeight = 88;
                            if (this.cardDesign
                                && this.cardDesign.nativeElement) {
                            }
                            this.parentContainer['style'].height = (rows.length * cardHeight) + 75 + 'px'
                        }
                    }
                    this.applyChanges();
                });
            this.aggregatesColumnList = [];
            this.aggregatesColumnList = this.gridService.getAggregatesColumnList(this.headerColumnList, this.gridDataSetting)
            let aggregrateFirstFooterColumns = { columns: [] };
            let aggregrateSecondFooterColumns = { columns: [] };
            this.aggregateColumn = [];
            if (this.gridDataSetting.IsFooterRequired) {
                aggregrateFirstFooterColumns = this.createAggregateColumn(false);
                this.aggregateColumn.push(aggregrateFirstFooterColumns);
            }
            if (this.gridDataSetting.IsSecondFooterRequired) {
                aggregrateSecondFooterColumns = this.createAggregateColumn(true);
                this.aggregateColumn.push(aggregrateSecondFooterColumns);
            }
            if (this.gridType == 'GRID') {
                if (this._page[this.dataSetName].Tables[this.gridType].length > 0) {
                    this.gridService.enableDisableControlsOnChildRows(this.page, true);
                } else {
                    this.gridService.enableDisableControlsOnChildRows(this.page, false);
                }
            }
            this.gridService.createAutoGenerateOnColumns(this.page, this.gridType);
            if (this.page.fnOnAfterGridRefresh) {
                this.page.fnOnAfterGridRefresh(this.page, true);
            }
        } else {
            this.data = [];
        }
    }


Attachment: video_(3)_329afc31.zip

SK Sujith Kumar Rajkumar Syncfusion Team March 16, 2022 11:03 AM UTC

Hi Nagendra, 
 
Thanks for sharing the details. 
 
From the provided video demo we could see that the Grid rows are continuously getting re-rendered. This occurs if the Grid data is modified or if the Grid is refreshed and we suspect that one of these actions might be getting executed in a recurring loop in any of the initialized functions. So please share us the following additional details to help us identify the exact cause of the reported problem, 
 
  • Let us know if you have used Grid methods to refresh the Grid or updated the data source dynamically in any of the sample-level functions.
  • Share us the Grid related code file defined in the Grid events(dataBound, queryCellInfo, created, rowDataBound, actionComplete, ...).
 
Regards, 
Sujith R 


NG Nagendra Gupta replied to Sujith Kumar Rajkumar August 24, 2022 02:22 PM UTC

Hi Sujith Kumar Rajkumar,

Below I shared you the Grid related code file.

queryCellIfno(args: QueryCellInfoEventArgs,gridDataColumns) {
        if (!Common.isNullOrUndefined(args.data['ROW_COLOR'])) {
            if (args.data['ROW_COLOR'].toString().toUpperCase() !== "") {
                args.cell.classList.add(this.storageService.getClassName("color", args.data['ROW_COLOR']));
            }
        }
        if (!Common.isNullOrUndefined(args.data['ROW_BGCOLOR'])) {
            if (args.data['ROW_BGCOLOR'].toString().toUpperCase() !== "") {
                args.cell.classList.add(this.storageService.getClassName("color", args.data['ROW_BGCOLOR']));
            }
        }
        if (!Common.isNullOrUndefined(args.data['ROW_FGCOLOR'])) {
            if (args.data['ROW_FGCOLOR'].toString().toUpperCase() !== "") {
                args.cell.classList.add(this.storageService.getClassName("color", args.data['ROW_FGCOLOR']));
            }
        }
        if (!Common.isNullOrUndefined(args.data[args.column.field + '_BGCOLOR'])) {
            if (args.data[args.column.field + '_BGCOLOR'].toString().toUpperCase() !== '') {
                args.cell.classList.add(this.storageService.getClassName("color", args.data[args.column.field + '_BGCOLOR']));
            }
        }
        if (!Common.isNullOrUndefined(args.data[args.column.field + '_FGCOLOR'])) {
            if (args.data[args.column.field + '_FGCOLOR'].toString().toUpperCase() !== '') {
                args.cell.classList.add(this.storageService.getClassName("color", args.data[args.column.field + '_FGCOLOR']));
            }
        }
        if (!Common.isNullOrUndefined(args.data[args.column.field + '_rowSpan'])) {
            if (+args.data[args.column.field + '_rowSpan'] > 1) {
                args.rowSpan = args.data[args.column.field + '_rowSpan'];
                if (args.data.VerticalAlignment != "MIDDLE") {
                    const className = args.data.VerticalAlignment == "TOP" ? "rowcell-align-top" : "rowcell-align-bottom";
                    args.cell.classList.add(className);
                }
            }
        }

        if (!Common.isNullOrUndefined(args.data[args.column.field + '_COLSPAN'])) {
            args.colSpan = +args.data[args.column.field + '_COLSPAN'];
        }
        if (!Common.isNullOrUndefined(args.data[args.column.field + '_FONTSIZE'])) {
            if (+args.data[args.column.field + '_FONTSIZE'] > 1) {
                args.cell.classList.add('font-size-' + args.data[args.column.field + '_FONTSIZE']);
            }
        }
        if (!Common.isNullOrUndefined(args.data[args.column.field + '_ITALIC'])) {
            if (+args.data[args.column.field + '_ITALIC'] == 1) {
                args.cell.classList.add('font-italic');
            }
        }

        if (!Common.isNullOrUndefined(args.data[args.column.field + '_BOLD'])) {
            if (+args.data[args.column.field + '_BOLD'] == 1) {
                args.cell.classList.add('font-weight-bold');
            }
        }
        if (!Common.isNullOrUndefined(args.data['ROW_BOLD'])) {
            if (+args.data['ROW_BOLD'] == 1) {
                args.cell.classList.add('font-weight-bold');
            }
        }
        if (!Common.isNullOrUndefined(args.data[args.column.field + '_DISABLED'])) {
            if (+args.data[args.column.field + '_DISABLED'] == 1) {
                args.cell.classList.add('e-disabled');
                args.cell.classList.add('disableicon-column');
            }
        }
    }


 created() {
        if (gridDataSetting.PortraitReportType == 'EXPENDABLE' && expandedColumnList.length > 0) {
            gridObj.element.addEventListener('click', e => {
                if (gridObj.detailRowModule) {
                    if (parentsUntil(e.target as Element, 'e-detailrowexpand')) {
                        gridObj.detailRowModule.collapseAll();
                        const row = parentsUntil(e.target as Element, 'e-row');
                        let rowIndex = parseInt(row.getAttribute('aria-rowindex'));
                        rowIndex = rowIndex - 1;
                        gridObj.detailRowModule.expand(rowIndex);
                    } else if (parentsUntil(e.target as Element, 'e-templatecell')) {
                    } else if (parentsUntil(e.target as Element, 'e-rowcell')) {
                        gridObj.detailRowModule.collapseAll();
                        const row = parentsUntil(e.target as Element, 'e-row');
                        let rowIndex = parseInt(row.getAttribute('aria-rowindex'));
                        rowIndex = rowIndex - 1;
                        if (rowIndex !== this.lastRowExpendedId) {
                            this.lastRowExpendedId = rowIndex;
                            gridObj.detailRowModule.expand(rowIndex);
                        } else {
                            this.lastRowExpendedId = undefined;
                            gridObj.detailRowModule.collapse(rowIndex);
                        }
                    }
                }
            });
        }
    }


  rowDataBound(args) {
        if (args
            && args.data
            && args.data['ROW_DISABLED']
            && (args.data['ROW_DISABLED'] == 1 || args.data['ROW_DISABLED'] == '1')) {
            args.row.classList.add('e-disabled');
            args.row.classList.add('disablegrid');
        }
    }





RR Rajapandi Ravi Syncfusion Team August 25, 2022 01:40 PM UTC

Hi Nagendra,


Thanks for your update


Currently, we are validating your query with your shared information, and we will update you the details on or before 29th Aug 2022. Until then we appreciate your patience.


Regards,

Rajapandi R


RR Rajapandi Ravi Syncfusion Team August 29, 2022 01:02 PM UTC

Hi Nagendra,


Thanks for your patience


We have checked your shared code information and we could see that you are using Virtualizations with Frozen and Grouping feature. The frozen rows and columns functionality is not supported with the grouping feature. The EJ2 Grid has limitations for some features as it not compatible with those features. And the frozen Grid functionality is not compatible with the below features, 


  • Grouping 
  • Row Template 
  • Detail Template 
  • Hierarchy Grid 


Documentation: https://ej2.syncfusion.com/angular/documentation/grid/frozen/#limitations-of-frozen-grid


Regards,

Rajapandi R


Marked as answer
Loader.
Up arrow icon