Reply To: Set grid cell color property

[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/