Set grid cell color property

[martinb]

Hi,

I have a vertically scrollable grid, so there are some rows that are not “visible” at initialization

Depending on certain ‘ if ‘ conditions, I need to introduce the ‘color’ property of some cells. Cells that are not in view will not have their ‘color’ changed.

My tried solutions:

grid.rows[i].cells[j].color = ‘red’;

grid.setCellStyle(i, “dataField”, { color: “red” });

(The solutions working properly on cells, which are ‘in view’ at init.)
Can you help me, how can I change the grid cell style props, if the cell is not ‘in view’ at grid initialize?

Thanks,

Martin

• This topic was modified 1 year, 7 months ago by martinb. Reason: formatted

[admin]

Hi Martin,

These options work for cells not in view as well. For example:

Smart('#grid', class {
    get properties() {
        return {
            dataSource: new Smart.DataAdapter(
			{
			    dataSource: generateData(1000),
			    dataFields:
				[
					'id: number',
					'firstName: string',
					'lastName: string',
					'productName: string',
                    'available: bool',
					'quantity: number',
					'date: date',
					'price: number',
					'total: number'
				]
			}),
          selection: {
                            enabled: true,
                            allowCellSelection: true,
                            //allowRowHeaderSelection: true,
                            //allowColumnHeaderSelection: true,
                            mode: 'extended'
                        },
                        editing: {
                            enabled: true,
                            mode: 'cell'
                        },
                        sorting: {
                            enabled: true
                        },
                        filtering: {
                            enabled: true
                        },
                        behavior: { columnResizeMode: 'growAndShrink' },
                        appearance: {
                            alternationCount: 2,
                            allowHover: true
                        },
            columns: [
			{
			    label: 'First Name', dataField: 'firstName'
			},
			{
			    label: 'Last Name', dataField: 'lastName'
			},
			{ label: 'Product', dataField: 'productName', editor: 'autoComplete' },
			{ label: 'Order Date', width: 250, cellsFormat: 'dd-MM-yyyy', dataField: 'date', editor: {
				template: 'dateTimePicker',
				formatString: 'dd-MM-yyyy',
				onInit(index, dataField, editor){
				}
			}
			},
			{ label: 'Quantity', dataField: 'quantity', editor: 'numberInput' },
			{ label: 'Unit Price', dataField: 'price', editor: 'numberInput', cellsFormat: 'c2' }
            ]
        }
    }
});
window.onload = ()=> {
  window.grid.rows[100].cells[0].color = 'red';
}

The above code sets a ‘red’ color to the first cell in the row with index = 100 which is not in the view. When you scroll vertically to that row, you will see that the cell is in red.

For more details about styling the grid cells, you can look at: https://www.htmlelements.com/docs/grid-styling-cells/

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts