Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #103729
    martinb
    Participant
    Up
    0
    Down

    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 6 months ago by martinb. Reason: formatted
    #103731
    admin
    Keymaster
    Up
    0
    Down

    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/

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