JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Set grid cell color property › Reply To: Set grid cell color property
September 23, 2022 at 4:03 am
#103731
Keymaster
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/