Flexgrid Scrolling Error

Posted by: hoang-nguyen on 14 September 2017, 3:02 am EST

    • Post Options:
    • Link

    Posted 14 September 2017, 3:02 am EST

    Hi,

    I am encountering an issue of horizontal scrolling of Flexgrid. I am using formatItem to change cell backcolor base on cell value/colum header. The color changing works fine. When I scroll left or right with by scrollbar on the bottom of the Flexgrid, the color I change to column 1 is also change on other columns which I did not intend to change at all. Scrolling vertically is fine as I expected. Please tell me what have Idone not right. Thank you very much.

    <wj-flex-grid #flex

    auto-generate-columns=“true”

    (formatItem)=“formatItem(flex,$event)”

    [itemsSource]=“dataCollection”

    [autoSizeMode]=“1”

    [headersVisibility]=“1”

    [isReadOnly]=“true”>

    <wj-flex-grid-filter></wj-flex-grid-filter>

    </wj-flex-grid>

    formatItem(s: wjGrid.FlexGrid, e: wjGrid.FormatItemEventArgs) {

    if(e.panel.cellType == wjGrid.CellType.Cell && e.col == 1) {

    e.cell.style.backgroundColor = ‘lightgreen’;

    }

    }

    Thank you very much.

  • Posted 14 September 2017, 3:02 am EST

    Hello Hoang,

    The issue you described happens because the grid recycles cells. So if you change the cell’s format and don’t restore it, there’s a chance the old format will be used in the wrong cell.

    For this, please use the following code snippet for the same:

    formatItem(s: wjGrid.FlexGrid, e: wjGrid.FormatItemEventArgs) {
    if (e.panel.cellType == wjGrid.CellType.Cell) {
                    let color='';
                    if(e.col==1){
                         color='green';
                    }
                    e.cell.style.backgroundColor=color;
            }
    }
    }

    Thanks,

    Manish Kumar Gupta

  • Posted 14 September 2017, 3:02 am EST

    Good Morning Sir,

    After changing:

    let currentCellValue = e.panel.getCellData(e.row, e.col, false);

    To:

    let currentCellValue = e.cell.innerText;

    And changing:

    if(e.panel.cellType == wjGrid.CellType.Cell && e.col == 1) {

    e.cell.style.backgroundColor = ‘lightgreen’;

    }

    To:

    if (e.panel.cellType == wjGrid.CellType.Cell) {

    let color=‘’;

    if(e.col==1){

    color=‘green’;

    }

    e.cell.style.backgroundColor=color;

    }

    The issue does not resolve and performance is slower. Horizontal scrolling is much slower. Data loading is just a little slower as well. Do you have another advise sir? Thank you sir very much.

  • Posted 14 September 2017, 3:02 am EST

    Hello Huang,

    We are sorry, we are unable to reproduce issue at our end. You can refer to the attached sample that implements the same.

    If issue persists, please modify the attached sample depicting your issue so that we can debug and assist you accordingly.

    Thanks,

    Manish Kumar Gupta

    2017/05/FlexGrid_formatItem.zip

  • Posted 14 September 2017, 3:02 am EST

    Thank you sir very much

  • Posted 20 February 2020, 11:39 pm EST

    Hi Manish,

    The snippet isn’t even worked for me.

    I am unable to identify the column within the both functions formatItem and itemFormater because the indexes of row and column provided in FormatItemEventArgs are not fixed it keeps changing when we scroll the grid.

    Don’t you think it is a conflict with virtual scrolling?

  • Posted 23 February 2020, 7:53 pm EST

    Hi Chhavi,

    The row and column indices provided in the FormatItemEventArgs changes accordingly for each of the cells in the FlexGrid. By this, we can know for which cell the formatter is currently running. These indices do not depend upon virtualization or scrolling.

    Can you please let us know your exact requirements so we can assist you further?

    Regards,

    Ashwin

  • Posted 24 February 2020, 2:15 am EST - Updated 3 October 2022, 8:14 am EST

    Thanks for help Ashwin.

    I have created a fiddle “https://stackblitz.com/edit/angular-juzd25” to reproduce the issue.

    In the fiddle, I have used itemFormatter to change the background color of a cell, based on the color code in another column of the item.

    The issue is being faced with itemFormatter is when we scroll the grid up and down a little bit quick so it changes the color of the other cells which are not even having a color in the row. Please refer to the image.

    I can use the template binding here to solve this but that way in case of a high number of records, the performance of the grid would be very slow as suggested by the Wijmo team before.

    I also have one more question, how can I hide the color column in the grid itself but should be available in dataItem. Could it be done without using template binding?

  • Posted 24 February 2020, 5:51 pm EST

    Hi Chhavi,

    Regarding the itemFormatter issue, as we said earlier that the FlexGrid recycles cells. This means that whenever you scroll the grid, new cell elements are not created, instead only the data inside these cell elements changes. In your itemFormatter, you are assigning the cells a background color, but you are not restoring it for other cells.

    That is why, when you scroll the grid, the original cells that had a background are being used again for the non-background cells.

    You can solve this issue by setting an empty background to the non-background cells:

    
    gridItemFormatter(panel: GridPanel, rowIndex: number, colIndex: number, cell: HTMLElement) {
    	const isCell = panel.cellType === CellType.Cell;
    	if (isCell) {
    		const columnName = panel.columns[colIndex].binding;
    		const row = panel.grid.rows[rowIndex].dataItem;
    		let color = "";
    		if (columnName === "price") {
    			if (row.color) {
    				color = row.color;
    			}
    			this.formatChangeColumn(cell, color);
    		}
    	}
    }
    private formatChangeColumn(cell: HTMLElement, color: string) {
    	cell.style.background = color;
    	cell.style.color = "#FFF";
    }
    
    

    Regarding hiding the column, if you have generated the columns automatically, as you did in this example, you can handle the initialized event of the FlexGrid and set the column’s visibility to false:

    
    initGrid(grid) {
    	grid.columns.getColumn("color").visible = false;
    }
    
    <wj-flex-grid class="grid" (initialized)="initGrid(grid)" #grid [itemsSource]="data" [itemFormatter]="gridItemFormatter">
    </wj-flex-grid>
    
    

    https://stackblitz.com/edit/angular-xumy63

    Let us know in case you still have any doubts.

    ~regards

  • Posted 25 February 2020, 5:13 am EST

    Hi Ashwin,

    Thanks for the help. It worked!

    Is it possible to set the column order from the initGrid function? I don’t wanna use the column template for the same due to the performance issue.

  • Posted 25 February 2020, 2:32 pm EST

    Hi Chhavi,

    Reordering columns is a difficult task, so I would suggest you create columns in the component’s template using and still use the itemFormatter to format the cells.

    Adding columns in the component’s template does not affect performance, but adding cell templates sometimes do.

    This will make it easier to create an order for columns and you also will not have to create a column for each property in the data source. For example, in your case, you will not need to create a color column.

    I hope this clears your doubts.

    ~regards

Need extra support?

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

Learn More

Forum Channels