6pac / SlickGrid

A lightning fast JavaScript grid/spreadsheet
https://stackblitz.com/github/6pac/SlickGrid/tree/master/vite-demo
MIT License
1.84k stars 423 forks source link

setSelectedRow does not set selected css "selected" state. #965

Closed b-giavotto closed 9 months ago

b-giavotto commented 9 months ago

Describe the bug

Under certain circumstances, calling grid.setSelectedRows effectively set the selected row, but fail to set the "selected" css attribute on cells

Reproduction

the code below try to add to a generic div container a grid, set the selection model, then data, the try to set selected row on the first row. this should set the "selected" class to the cells/rows, but it does not. Steps: 1) Create a test page with a simple div element sizing it to be visible and large enough 2) on the load document invoke the code below. Please take into consideration that Slick library is "namespaced" with the Slick identifier, maybe you should fix this to match your env. 3) After the page is rendered you should see a grid, with one row, selected.

There is no rows with selected style. If you ispect the grid HTML DOM there is no html node with "selected" style applyed I'm not sure it's a bug. Maybe i'm doing something wrong? Is there some other thing to do to get the row highlighted as selected?

`private makeGrid(container: HTMLElement): void { let data: any[] = [{ firstName: 'Henry', lastName: 'FORD' }]; let columns: Slick.Column[] = [{ id: 'firstName', name: 'First Name', field: 'firstName', width: 90, selectable: true }, { id: 'lastName', name: 'Last Name', field: 'lastName', width: 190, selectable: true }];

let input = $("<div style='width:300px; height:400px; background-color:pink'></div>").get(0);
$(input).appendTo(container);

let options: Slick.GridOption = {
    enableCellNavigation: true,
    enableColumnReorder: false,
    asyncEditorLoading: true,
    editable: true
};

let grid = new Slick.SlickGrid(input, [], columns, options);

grid.setSelectionModel(new Slick.SlickRowSelectionModel());

grid.setData(data);
grid.setSelectedRows([0]);

grid.invalidate();
grid.render();

}`

Which Framework are you using?

Vanilla / Plain JS

Environment Info

| Executable          | Version |
| ------------------- | ------- |
| (framework used)    | .Net Core|
| SlickGrid | 5.5.5 |
| TypeScript          | 5.3.2 |
| Browser(s)          | does not matter |
| System OS           | does not matter |

Validations

b-giavotto commented 9 months ago

Actually this only happen only when nesting the grid within a Custom SlickGrid cell editor cell. Need to do more investigation.