Cannot find stylesheet.

[maxim-s-barabash]

This old problem with webkit. Looking at the code I have a question. Why is loop on the document.styleSheets ?

slick.grid.js

function getColumnCssRules(idx) {
      if (!stylesheet) {
-        var sheets = document.styleSheets;
-        for (var i = 0; i < sheets.length; i++) {
-          if ((sheets[i].ownerNode || sheets[i].owningElement) == $style[0]) {
-            stylesheet = sheets[i];
-            break;
-          }
-        }

        if (!stylesheet) {
          throw new Error("Cannot find stylesheet.");
        }
...

that if we replace on

function getColumnCssRules(idx) {
      if (!stylesheet) {
 +        stylesheet = $style[0].sheet || $style[0].styleSheet;
        if (!stylesheet) {
          throw new Error("Cannot find stylesheet.");
        }
...

Thanks in advance!!!

[6pac]

there can be an arbitrary number of stylesheets in a document. we don't know we will be the first. also, i believe a dynamically added stylesheet does not appear for a short time - it's part of the page load queue. there are a series of issues in the MLeibman repo in this topic, but the resolution seemed to be correct page load order practices rather than anything else.

[maxim-s-barabash]

In any case, the loop is superfluous. Stylesheet or are ready or not, at the time of calls getColumnCssRules.

[6pac]

OK, have had a look. Your change makes sense, but I can't find documentation on the .sheets property anywhere. I am not in a hurry to make changes to core parts of the code like this that might break on some browser somewhere. It's not time-critical code, so I don't think it will make just about any performance difference. Do you have history of that property, on what browsers/engines it works and when it was introduced?

[maxim-s-barabash]

MS style element sheet - Gets the CSS style sheet that is associated with the object. styleSheet - Retrieves an interface pointer that provides access to the style sheet object's properties and methods. Note For the style element, styleSheet is no longer supported. Starting with IE11, use sheet. For info, see Compatibility changes.

MDN CSSStyleSheet

I tested work in IE9+, chrome v.39+, firefox v.48

[ataft]

I just encountered this error for the first time with slickgrid v2.4.15 on Chrome 79. This is not to say that the error wasn't there in previous versions, since it's very intermittent.

It happens when I call grid.autosizeColumns(). I thought this might be the closest/best thread from the old MLeibman repo: https://github.com/mleibman/SlickGrid/issues/223

The issue doesn't really affect me since I just catch the error and don't see anything wrong with the page, but I thought I'd log it here in case it's an easy fix or something that affects others.

[ghiscoding]

I think the last time I encountered that was when I forgot to unsubscribe some events and that was causing some issues after changing to another page with a grid.

[AlexandrChazov]

My app is created by CRA. I receive this error when try to test by Jest a page that contains a SlickGrid table. Actually I don't want to test a table itself but Jest renders a table and encounters the error. Could you please suggest me how can I get rid of this error to continue writing tests? I tried to setup Jest to manage styles as it described on official site but it doesn't help me ((

Error: Cannot find stylesheet.
    at getColumnCssRules (C:\work\writeup\node_modules\slickgrid-es6\dist\webpack:\src\slick.grid.js:1015:15)
    at applyColumnWidths (C:\work\writeup\node_modules\slickgrid-es6\dist\webpack:\src\slick.grid.js:1190:14)
    at updateCanvasWidth (C:\work\writeup\node_modules\slickgrid-es6\dist\webpack:\src\slick.grid.js:476:7)
    at updateRowCount (C:\work\writeup\node_modules\slickgrid-es6\dist\webpack:\src\slick.grid.js:1827:5)
    at resizeCanvas (C:\work\writeup\node_modules\slickgrid-es6\dist\webpack:\src\slick.grid.js:1749:5)
    at finishInitialization (C:\work\writeup\node_modules\slickgrid-es6\dist\webpack:\src\slick.grid.js:314:7)
    at init (C:\work\writeup\node_modules\slickgrid-es6\dist\webpack:\src\slick.grid.js:281:7)
    at new SlickGrid (C:\work\writeup\node_modules\slickgrid-es6\dist\webpack:\src\slick.grid.js:3643:3)

[ghiscoding]

You're right in saying that you shouldn't test the table, you should mock it and you're not. For my unit tests, I do something like below, the only real thing I use is the Slick Event because I often have to subscribe/notify some events but everything else is and should be mocked.

const dataViewStub = {
  collapseAllGroups: jest.fn(),
  expandAllGroups: jest.fn(),
  setGrouping: jest.fn(),
}

const getEditorLockMock = {
  commitCurrentEdit: jest.fn(),
};

const gridStub = {
  getCellNode: jest.fn(),
  getCellFromEvent: jest.fn(),
  getColumns: jest.fn(),
  getHeaderColumn: jest.fn(),
  getOptions: jest.fn(),
  getPreHeaderPanel: jest.fn(),
  getData: () => dataViewStub,
  getEditorLock: () => getEditorLockMock,
  getUID: () => GRID_UID,
  invalidate: jest.fn(),
  registerPlugin: jest.fn(),
  updateColumnHeader: jest.fn(),
  onColumnsReordered: new Slick.Event(),
  onHeaderCellRendered: new Slick.Event(),
  onHeaderMouseEnter: new Slick.Event(),
  onMouseEnter: new Slick.Event(),
} as unknown as SlickGrid;

[ghiscoding]

Since this issue was opened a while ago, the entire structure of the project changed, we removed jQuery/jQueryUI and now use SortableJS. We also recently migrated to TypeScript so the a lot of the original code got reworked.

I think it's best to close this issue since it is very out of date with our new code structure, please add more details if you think this is still a problem when using latest code