Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #103729


    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?



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

    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),
    					'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:

    Best regards,
    Peter Stoev

    Smart UI Team

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.