stylesheet variable is undefined in Chrome #223

Closed
unirgy opened this Issue Oct 20, 2011 · 50 comments

Comments

Projects
None yet

unirgy commented Oct 20, 2011

Got this error when tried to use forceFitColumns option in Chrome (v 14.0.835.202 m)

Apparently, appending <style> to <head> does not add the CSSStyleSheet object to document.styleSheets, and findCssRule(selector) fails because stylesheet variable is undefined.

Checked, it works in Opera and IE, so looks like a Chrome bug, didn't find a good solution..

unirgy commented Oct 20, 2011

It appears that the issue is only when one of the other stylesheets didn't load (404)

unirgy commented Oct 21, 2011

Hm.. ok, it's not because other stylesheet didn't load, seems like it's because it was added manually as well.

In short I'm trying to use SlickGrid together with jsTree: http://www.jstree.com

And it works only if I comment out jquery.jstree.js like 1445 and 1446

$.vakata.css.add_sheet({ "url" : theme_url });
themes_loaded.push(theme_url);

The issue seems to be that Chrome doesn't update the documents.styleSheets variable right after the text node with the CSS rules has been added. This might be because the text node has to be parsed first which might not happen before the next page reflow but I'm just speculating here.

Since stylesheet just caches the CSSStyleSheet node we can get it later. I've moved the code which caches the stylesheet into a separate method which is then called when the stylesheet is accessed for the first time.

function getStylesheet() {
    var sheets = document.styleSheets;
    for (var i=0; i<sheets.length; i++) {
        if ((sheets[i].ownerNode || sheets[i].owningElement) == $style[0]) {
           return sheets[i];
        }
    }
    return null;
}

Then fix createCssRules() and findCssRules():

function createCssRules() {
    $style = $("<style type='text/css' rel='stylesheet'/>").appendTo($("head"));
    var rowHeight = (options.rowHeight - cellHeightDiff);

    var rules = [
        "." + uid + " .slick-header-column { left: 1000px; }",
        "." + uid + " .slick-top-panel { height:" + options.topPanelHeight + "px; }",
        "." + uid + " .slick-headerrow-columns { height:" + options.headerRowHeight + "px; }",
        "." + uid + " .slick-cell { height:" + rowHeight + "px; }",
        "." + uid + " .slick-row { width:" + getRowWidth() + "px; height:" + options.rowHeight + "px; }",
        "." + uid + " .lr { float:none; position:absolute; }"
    ];

    var rowWidth = getRowWidth();
    var x = 0, w;
    for (var i=0; i<columns.length; i++) {
        w = columns[i].width;
        rules.push("." + uid + " .l" + i + " { left: " + x + "px; }");
        rules.push("." + uid + " .r" + i + " { right: " + (rowWidth - x - w) + "px; }");
        x += columns[i].width;
    }

    if ($style[0].styleSheet) { // IE
        $style[0].styleSheet.cssText = rules.join(" ");
    }
    else {
        $style[0].appendChild(document.createTextNode(rules.join(" ")));
    }
}

function findCssRule(selector) {
    // cache the stylesheet when we need it for the first time
    // since WebKit browsers seem to not create the CSSStyleSheet
    // node right away
    if (!stylesheet) {
        stylesheet = getStylesheet();
    }

    var rules = (stylesheet.cssRules || stylesheet.rules);

    for (var i=0; i<rules.length; i++) {
        if (rules[i].selectorText == selector)
            return rules[i];
    }

    return null;
}

This seems to work.

This still seems to fail when you create the grid when forceFitColumns = true.

I'm experiencing the same issue on Chrome but I don't think this patch is applicable, cause I can't find the method findCssRule()

Here's what looks to me a related bug in WebKit:

https://bugs.webkit.org/show_bug.cgi?id=14586

What I don't understand, SlickGrid used to work for until yesterday and I always use Chrome.

What I'm seeing is that document.styleSheets doesn't change after calling appendTo($("head")).

So, I've split createCssRules() just before that loop and moved the rest of the code into a new function called cacheStylesheet().
If the loop fails to find the ownerNode in document.styleSheets, the function is rescheduled to run after 50 ms.
I've found this technique here: http://www.zachleat.com/web/load-css-dynamically/

So, while the first run fails, the second run (after 50ms) succeeds, finally document.styleSheets contains the new stylesheet.
The problem with that in the meantime, the function finishInitialization() carries on and throws an error because the stylesheets are not ready yet.
So, in order to cope with Chrome, I will have to split finishInitialization() and do the rest when the stylesheet is ready.

function cacheStylesheet() {
  var sheets = document.styleSheets;
  for (var i = 0; i < sheets.length; i++) {
    if ((sheets[i].ownerNode || sheets[i].owningElement) == $style[0]) {
      stylesheet = sheets[i];

          // find and cache column CSS rules
          columnCssRulesL = [], columnCssRulesR = [];
          var cssRules = (stylesheet.cssRules || stylesheet.rules);
          var matches, columnIdx;
          for (var i = 0; i < cssRules.length; i++) {
            if (matches = /\.l\d+/.exec(cssRules[i].selectorText)) {
              columnIdx = parseInt(matches[0].substr(2, matches[0].length - 2), 10);
              columnCssRulesL[columnIdx] = cssRules[i];
            } else if (matches = /\.r\d+/.exec(cssRules[i].selectorText)) {
              columnIdx = parseInt(matches[0].substr(2, matches[0].length - 2), 10);
              columnCssRulesR[columnIdx] = cssRules[i];
            }
          }
           console.log( "cacheStylesheet success" )
           return true;
    }
  }

  console.log( "reset cacheStylesheet" )
  window.setTimeout( cacheStylesheet, 50 );
}


function createCssRules() {
....

  if ($style[0].styleSheet) { // IE
    $style[0].styleSheet.cssText = rules.join(" ");
  } else {
    $style[0].appendChild(document.createTextNode(rules.join(" ")));
  }

  cacheStylesheet();
}

I've just created a pull request #303

spmason commented Apr 12, 2012

I just tried out the latest version, and this seems to still be a problem although I get a "cannot find stylesheet" error, and it happens a lot more frequently than before. I've had to downgrade.

Forgive my ignorance, but why exactly does Slickgrid need to append style elements to the DOM? It's been causing more issues for us than just this one (hitting IE's 31 stylesheet limit being the main one)

@mleibman mleibman reopened this Apr 12, 2012

Owner

mleibman commented Apr 12, 2012

SlickGrid dynamically generates column styles. This leads to much faster rendering and column resizing.

Hi @spmason,

do you experience that on Windows and/or Linux?

@mleibman will try to replicate that on jsfiddle today

Owner

mleibman commented Apr 12, 2012

I'm still not convinced that this is a real issue.

Here's my theory:
All stylesheets referenced in the HEAD are fetched synchronously, but any stylesheets added programmatically are fetched asynchronously, which means that all stylesheets programmatically added after that are also not immediately available via document.styleSheets. What that tells me, is that you've got some other script on the page that is injecting a STYLE/LINK pointing to a remote resource. If that is happening, you have to wait for onload/DOMReady before accessing document.styleSheets. That's what all my tests seem to point to.

Now, in your particular apps, when/how do you load SlickGrid? If you could reduce it down to a simple repro case, that would be very helpful.

Other than that, you can still use the explicitInitialization option and call grid.finishInitialization() after the DOM is ready.

Sorry, can't reproduce it at the moment, I mean: it still appears sporadically, and can't point out when and why.
Still working on it.

So, trying to understand what @mleibman wrote above: we do load slick.grid.css in HEAD.
I don't understand "you've got some other script on the page that is injecting a STYLE/LINK pointing to a remote resource".
What should I look for?

Here's a link to our web site:
http://www.sirtrackdata.com/
http://www.sirtrackdata.com/slickgridtest

Owner

mleibman commented Apr 13, 2012

Looking at your website in Chome Dev Tools, it is injecting one stylesheet dynamically - http://www.sirtrackdata.com/static/js/ol/theme/default/style.css from OpenLayers.js. I would guess that it's what prevents SlickGrid from accessing its stuff via document.styleSheets.

Thanks @mleibman, sometimes it works though, very strange.
Do you think changing the order of the includes might help?

spmason commented Apr 13, 2012

Hi @ziglionz

I'm personally seeing it on Chrome 18/Linux, but others here are seeing it on Safari/Windows so it seems like a webkit thing?

Basically we're running an older version of Slickgrid (maybe 2.0b1), and our main app loads fine, but every 1 in 10 times our unit tests fail due to the original issue. I applied the latest version from master and it started erroring every single time the main app loads, which is why I've had to roll back and we'll have to suffer from randomly failing unit tests until we can fix it.

@mleibman Your theory about external stylesheets sounds plausible - all of our external CSS should be loaded up-front when the app loads, before we initialize SG, but I'll check if there's something wrong with that. It seems like your changes have actually done more harm than good though, as now it fails all the time instead of just now and then.

OK, I understand why the stylesheet is needed, is there a way for SG to ignore the absence of the stylesheet and plough on regardless in the knowing that it'll appear eventually? Is the stylesheet still needed if you don't have resizeable columns (we don't use that feature)?

Owner

mleibman commented Apr 13, 2012

@spmason The way it's coded up right now, it won't "appear eventually".

I'd rather not hack up SG to work around this until we understand the mechanics of this issue.

spmason commented Apr 13, 2012

@mleibman well I looked at our code and it looks like you were right about the external stylesheets - I found out which ones were being loaded and made everything was ready before loading the code that loaded slickgrid

It is strange that this was so much more of a problem in the latest master than in 2.0b1, I guess a lot has changed in the code since then..

Thanks for your help anyway, and if there's anything that SG itself can do to detect/work around the issue (now we understand it) that would be great

@spmason , that's great you worked around that issue following @mleibman 's suggestion.
I'll try and do the same, see if I can get OpenLayers to load their stylesheet before SG.
We did experience this problem with Chrome on Ubuntu and can't recall seeing that on Windows

Have just updated OpenLayers and don't see this problem (don't ask me why). Although, I'm not running the latest SlickGrid. Will try next

[update]
Have updated to the latest SG, it seems to work provided I initialize it before OpenLayers. If you're curious here's the code in OpenLayers that loads the stylesheet (Map.js):

/**
 * APIProperty: theme
 * {String} Relative path to a CSS file from which to load theme styles.
 *          Specify null in the map options (e.g. {theme: null}) if you 
 *          want to get cascading style declarations - by putting links to 
 *          stylesheets or style declarations directly in your page.
 */
theme: null,

...
this.theme = OpenLayers._getScriptLocation() +
'theme/default/style.css';
...
// only append link stylesheet if the theme property is set
if(this.theme) {
// check existing links for equivalent url
var addNode = true;
var nodes = document.getElementsByTagName('link');
for(var i=0, len=nodes.length; i<len; ++i) {
if(OpenLayers.Util.isEquivalentUrl(nodes.item(i).href,
this.theme)) {
addNode = false;
break;
}
}
// only add a new node if one with an equivalent url hasn't already
// been added
if(addNode) {
var cssNode = document.createElement('link');
cssNode.setAttribute('rel', 'stylesheet');
cssNode.setAttribute('type', 'text/css');
cssNode.setAttribute('href', this.theme);
document.getElementsByTagName('head')[0].appendChild(cssNode);
}
}

Thanks @mleibman for finding what the problem was.

Contributor

rafi commented Apr 25, 2012

  • Chrome 18: I'm also receiving "Cannot find stylesheet" with latest version. All other resources are loaded fine.
  • Firefox 12: I'm seeing a very strange random mis-alignment of table header columns and body column in first page load. If I refresh, it goes away.

Maybe the reason is that we're using server-side controllers to serve the css files? The response header Content-Type is text/css however.

I've registered for a trial of the PageSpeed service, curious to see if it still works
https://developers.google.com/speed/pagespeed/service

Contributor

rafi commented May 3, 2012

I fixed Firefox 12 alignment problems by placing slick.grid.css in the head tag instead at the end of body tag like it was.

I got the same problem. I tried to disable the plugins I was using but It didn't work.

I fixed it using explicitInitialization = true and calling grid.init() 50 ms later (using setTimeout javascript function)

I am finding the "cannot find stylesheet" issue in my application. Is there any known workaround? The explicitInitialization trick does not seem to work for me, and looking at the code it shouldn't: createCssRules() is only called from init(), so deferring init() won't help, if the problem really is that the stylesheets appended to head aren't available in document.styleSheets

Edit - well, this inspired me to dig further, and it turns out the workaround is very simple: do not try to initialize SlickGrid from a ready() handler. You have to wait until load().

Owner

mleibman commented Sep 27, 2012

In all of the repro cases I looked at, this was either due to not waiting until DOMReady to initialize SlickGrid or due to some other script dynamically injecting a stylesheet. Both cases can be worked around either by fixing the code or by using explicit initialization.

To your earlier comment saying that deferring init() shouldn't work, you're wrong. The stylesheet becomes available via document.styleSheets when the browser finished downloading them.

@mleibman mleibman closed this Sep 27, 2012

Forgot to follow up here. Yes, that's correct, I was wrong about deferred load not working at all, but in the case of Webkit browsers, or at least Chrome, DOMReady is not enough to ensure that even stylesheets loaded from static <link> elements are ready. You have to wait until window load.

I admit I don't quite understand what the code in getColumnCssRules() does, but I'm wondering if, as an alternative, there's a way to cache the rules at the time they're put into the stylesheet, so the code doesn't have to rely on the DOM's styleSheets collection at all.

Temporary workaround is to load the slick.grid.css stylesheet before any javascript that may be injecting into the stylesheets object.

rook2pawn : how and where can i do that? i also get this error in chrome 24.. im new to drupal so im a bit lost right now.

Contributor

ajpiano commented Feb 28, 2013

I've run into this in the same app when working on Chrome on Windows and Mac. In both cases, I had the Screen Capture by Google extension running, which itself injects some stylesheets.

The presence of the injected link tags, and perhaps the timing thereof, definitely throws off something in findCssRule

Disabling the extension remedies the error in my case, but obviously an interaction like this presents an issue as implementors of SlickGrid can obviously not be aware of their users' extesnsions and any potential side effects.

I haven't had a chance to make a public repro yet but wanted to provide this information as context to the problem, proof of its continued existence and the idea that fixing the timing of the loading of both static and injected stylesheets may be outside of the control of the application developer.

@johnbk johnbk referenced this issue in vakata/jstree Mar 5, 2013

Closed

Prevent dynamic loading #289

mujichOk commented Mar 5, 2013

workaround for now:

function some_method () {
var grid = null;
..
$(window).load(function () {
grid = new Slick.Grid("my_control_id", data, columns, options);
});
...
}

Contributor

blowsie commented Apr 4, 2013

Im also seing this problem from time to time.

Uncaught Error: Cannot find stylesheet. slickgrid.min.js:1

What is the Idea dynamically find stylesheet every time grid needs it? Grid is statefull object, so it is possible to store stylesheet to variable and reference it by that variable.

On grid creation create stylesheet. And on destroy destroy stylesheet as well.

EDIT:
I am still struggling with that nasty bug. There is no try when Chrome doesn't give error. Until bug is solved, I can't allow Chomes to access my application. So please, fix this. I think I am not alone who wishes this.

PS: Answer to my previous question: Styles need to implement like that (find it out during debugging)t, if you use stylesheets at all. I there any workaround for Chrome (or any webkit browsers)? Maybe to use element level styles until it is fixed?

Defer to $(window).load(function () works for me.

Thanks so much!

Contributor

ckosmowski commented Nov 6, 2013

I still have the same problem (Chrome only). And im my case it is also related to dynamically generated stylesheets of jstree. If i force the slickgrid beeing loaded BEFORE the jstree loads it works. I can't really explain this behaviour with one of your comments to this issue @mleibman. In my case the whole application whaits for document.ready() so this can't be the issue. The order of the manipulation seems very relevant here.

I've spent a fair amount of time on this issue as well and what I can
figure out is this. Basically, from a DOM standpoint, when you inject a

<style> element into the , even if it contains no reference to external resources, there's no guarantee that the newly created stylesheet will be immediately available in the document.styleSheets collection. Unfortunately, the SlickGrid code assumes that it will. In WebKit specifically, you have to do two things to prevent this error condition: - wait until the window load event (DOMContentReady is _not_ sufficient) - make sure that no dynamically loaded external stylesheets created by any other code are being processed at the same time Hope that helps. dan On Wed, Nov 6, 2013 at 3:47 AM, ckosmowski notifications@github.com wrote: > I still have the same problem (Chrome only). And im my case it is also > related to dynamically generated stylesheets of jstree. If i force the > slickgrid beeing loaded BEFORE the jstree loads it works. I can't really > explain this behaviour with one of your comments to this issue @mleibmanhttps://github.com/mleibman. > In my case the whole application whaits for document.ready() so this can't > be the issue. The order of the manipulation seems very relevant here. > > — > Reply to this email directly or view it on GitHubhttps://github.com/mleibman/SlickGrid/issues/223#issuecomment-27851813 > .

mzruya commented Jan 5, 2014

I don't understand why this issue is closed, it reproduces quite frequently for me when i use chrome.
The problem is explained quite thoroughly in the above comments, it can happen because of various reasons,

  • other JS libraries injecting stuff to the DOM
  • chrome extensions doing the same, in my case it is a chrome extension, particularly AdBlock (which is quite popular).

since i can't control which extensions my users have installed, SlickGrid's assumption is incorrect, relying on document.styleSheets will cause race conditions.

ziso commented Jan 7, 2014

same here, I encounter the exact same problems, unfortunately none of the suggested workarounds work for me.
This is very frustrating, any help will be appreciated.
tnx
ziso

DixonDs commented Jan 21, 2014

Any ideas how to fix this issue? It is still reproducible when having several grids on the same page (Chrome)

Dixon you're holding it wrong :) ditto on the still having the issue. I cant for the life of me understand why slickgrid needs to do this. I'm sure there is a good reason, and this is one control which seems to have very sensible developers so not sure why the constructive criticism is being ignored.

Defer to $(window).load(function () is NOT an option for a lot of web apps. There is a HUGE lag between ready and load, as far as user perception. Using SG with any form of binding (knockout/angular) makes order of operations that much harder to control.

DixonDs commented Jan 21, 2014

So, I've got my own workaround:

    function applyColumnWidthsOnTimeout() {
        var fi = setInterval(function () {
            if (applyColumnWidths()) {
                clearInterval(fi);
            }
        }, 10);
    }

    function applyColumnWidths() {
        var x = 0, w, rule;
        for (var i = 0; i < columns.length; i++) {
            w = columns[i].width;

            rule = getColumnCssRules(i);
            if (!rule) {
                return false;
            }
            rule.left.style.left = x + "px";
            rule.right.style.right = (canvasWidth - x - w) + "px";

            x += columns[i].width;
        }
        return true;
    }

    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) {
                return null;
            }

            // find and cache column CSS rules
            columnCssRulesL = [];
            columnCssRulesR = [];
            var cssRules = (stylesheet.cssRules || stylesheet.rules);
            var matches, columnIdx;
            for (var i = 0; i < cssRules.length; i++) {
                var selector = cssRules[i].selectorText;
                if (matches = /\.l\d+/.exec(selector)) {
                    columnIdx = parseInt(matches[0].substr(2, matches[0].length - 2), 10);
                    columnCssRulesL[columnIdx] = cssRules[i];
                } else if (matches = /\.r\d+/.exec(selector)) {
                    columnIdx = parseInt(matches[0].substr(2, matches[0].length - 2), 10);
                    columnCssRulesR[columnIdx] = cssRules[i];
                }
            }
        }

        return {
            "left": columnCssRulesL[idx],
            "right": columnCssRulesR[idx]
        };
    }

And replace all calls to applyColumnWidths with applyColumnWidthsOnTimeout. The idea is simple - keep trying until succeeded

Me too spent lot of time in digging this issue but got no fruitful result ... finally got jqgrid with full customizations as per needs !!

Ditto here; got a clone where i patched the slickgrid init code to return
success or failure boolean and then use a retry timer in the app itself:
that way the app code can easily determine when the slickgrid styles, etc.
have been loaded and continue/start any activity that rides on that
'everything that is slickgrid has initialized' assumption.

I'll extract that bit of change and file a pull req. Then either Michael
can merge it or anyone who needs it can merge it into their clone, just as
I did with the work of other people who customized slickgrid


Met vriendelijke groeten / kind regards,

Ger Hobbelt
On Jan 22, 2014 8:39 AM, "devesh13" notifications@github.com wrote:

Me too spent lot of time in digging this issue but got no fruitful result
... finally got jqgrid with full customizations as per needs !!


Reply to this email directly or view it on GitHubhttps://github.com/mleibman/SlickGrid/issues/223#issuecomment-32999455
.

ziso commented Jan 27, 2014

DixonD, I used your workaround and so far so good, tnx a lot for this :)
it's a shame that this issue is neglected, it makes me reconsider using slick.
cheers
ziso

While dynamically creating style and style rule via text node, Google Chrome does not add stylesheet to document.styleSheets immediately. As dynamic stylesheet doesn't exist getColumnCssRules() throws "Cannot find stylesheet." exception. To fix this I have added css rule vai JS. This works on (chrome,firefox and IE)

Modify createCssRules() and add new function addCSSRule. addCSSRule force browser to create stylesheet under document.styleSheets.

    function createCssRules() {
      $style = $("<style type='text/css' rel='stylesheet' />").appendTo($("head"));
      var rowHeight = (options.rowHeight - cellHeightDiff);
      if ($style[0].styleSheet) { // IE
        $style[0].styleSheet.cssText = "";
      } else {
        $style[0].appendChild(document.createTextNode(""));
      }
        var sheet =  $style[0].sheet;
        var index = 0;
        addCSSRule(sheet,"." + uid + " .slick-header-column", "left: 1000px;",index++);
        addCSSRule(sheet,"." + uid + " .slick-top-panel", "height:" + options.topPanelHeight + "px;",index++);
        addCSSRule(sheet,"." + uid + " .slick-headerrow-columns", "height:" + options.headerRowHeight + "px;",index++);
        addCSSRule(sheet,"." + uid + " .slick-cell", "height:" + rowHeight + "px;",index++);
        addCSSRule(sheet,"." + uid + " .slick-row", "height:" + options.rowHeight + "px;",index++);

        for (var i = 0; i < columns.length; i++) {
            addCSSRule(sheet,"." + uid + " .l" + i , "",index++);
            addCSSRule(sheet,"." + uid + " .r" + i, "",index++);
          }
    }

    function addCSSRule(sheet, selector, rules, index) {
        if(sheet.insertRule) {
            sheet.insertRule(selector + "{" + rules + "}", index);
        }
        else {
            sheet.addRule(selector, rules, index);
        }
    }

This fix works really nicely for me. Wish I had thought of it :) Do you
know offhand if it is compatible with both 2.0 and 2.1?

On Fri, Feb 7, 2014 at 1:40 AM, Maheshkumar-Kakade <notifications@github.com

wrote:

While dynamically creating style and style rule via text node, Google
Chrome does not add stylesheet to document.styleSheets immediately. As
dynamic stylesheet doesn't exist getColumnCssRules() throws "Cannot find
stylesheet." exception. To fix this I have added css rule vai JS. This
works on (chrome,firefox and IE)

Modify createCssRules() and add new function addCSSRule. addCSSRule force
browser to create stylesheet under document.styleSheets.

function createCssRules() {
  $style = $("<style type='text/css' rel='stylesheet' />").appendTo($("head"));
  var rowHeight = (options.rowHeight - cellHeightDiff);
  if ($style[0].styleSheet) { // IE
    $style[0].styleSheet.cssText = "";
  } else {
    $style[0].appendChild(document.createTextNode(""));
  }
    var sheet =  $style[0].sheet;
    var index = 0;
    addCSSRule(sheet,"." + uid + " .slick-header-column", "left: 1000px;",index++);
    addCSSRule(sheet,"." + uid + " .slick-top-panel", "height:" + options.topPanelHeight + "px;",index++);
    addCSSRule(sheet,"." + uid + " .slick-headerrow-columns", "height:" + options.headerRowHeight + "px;",index++);
    addCSSRule(sheet,"." + uid + " .slick-cell", "height:" + rowHeight + "px;",index++);
    addCSSRule(sheet,"." + uid + " .slick-row", "height:" + options.rowHeight + "px;",index++);


    for (var i = 0; i < columns.length; i++) {

        addCSSRule(sheet,"." + uid + " .l" + i , "",index++);
        addCSSRule(sheet,"." + uid + " .r" + i, "",index++);
      }
}

function addCSSRule(sheet, selector, rules, index) {
    if(sheet.insertRule) {
        sheet.insertRule(selector + "{" + rules + "}", index);
    }
    else {
        sheet.addRule(selector, rules, index);
    }
}

Reply to this email directly or view it on GitHubhttps://github.com/mleibman/SlickGrid/issues/223#issuecomment-34407932
.

GerHobbelt added a commit to GerHobbelt/SlickGrid that referenced this issue Feb 14, 2014

- removed the broken container-level focusin/focusout handling
- now 'slickgrid-container'is a class that is always attached to the outermost DIV that contains the entire grid. This is used by the styles to limit their influence to the grid itself only and can be used by user code as well.

- when header columns are generated sometimes the IDs would be illegal, when the column field name would contain non-alphanumeric characters; now we always generate unique and legal IDs for each column.

- edited the run-time CSS generating code inspired by the comments in issue #223 and http://davidwalsh.name/add-rules-stylesheets

GustavSt added a commit to GustavSt/SlickGrid that referenced this issue Mar 18, 2014

Changed function "createCssRules".
regarding issue #223

@Maheshkumar-Kakade posted a solution that worked for us

AnilRao added a commit to tradingtechnologies/SlickGrid that referenced this issue Apr 3, 2014

DEB-3858 Fixed "Cannot find stylesheet" issue
- Fix obtained from GitHub SlickGrid Issue #223
- Refer to mleibman#223 for details

AnilRao added a commit to tradingtechnologies/SlickGrid that referenced this issue Apr 3, 2014

DEB-3858 Fixed "Cannot find stylesheet" issue
- Fix obtained from GitHub SlickGrid Issue #223
- Refer to mleibman#223 for details

@AnilRao AnilRao referenced this issue in tradingtechnologies/SlickGrid Apr 3, 2014

Merged

DEB-3858 Fixed "Cannot find stylesheet" issue #1

smithkl42 added a commit to smithkl42/SlickGrid that referenced this issue Apr 10, 2014

Thanks Maheshkumar !!! It resolved my issue...

GerHobbelt added a commit to GerHobbelt/SlickGrid that referenced this issue Nov 19, 2014

clean up my act regarding proper grid initialization in Chrome: we ou…
…rselves let the app (userland) code take care of this business via using the `options.explicitInitialization` option and calling finishInitialization() until it reports success, but that leaves all the other SlickGrid usage scenarios hanging: now the code runs a timer-based browser poll to ensure the init stage runs to guaranteed completion in case you do *not* have the option `explicitInitialization` set (setting that option implicitly tells SlickGrid that the userland code knows best and SlickGrid then should not bother trying to be 'smart' about this issue).

Either way, we now only fire the onAfterInit event when *everything* that is SlickGrid has really been properly and completely initialized, including the stylesheet setup that is bothering us all so much (see issue #223 and all related and linked there). The essence is that only applying #919 is not good enough; nor does tradingtechnologies@bf21472; nor is mleibman@d10eb90 (which is the 'lazy get' that starts it all and is a good approach; however, guaranteed init success is only guaranteed when the browser gets some 'air' to include the new style node in the DOM properly, so a timer-based polling approach is called for as a last-ditch effort.

As part of this change we now feed back success/fail return values from any function which depends on these stylesheet access/updates to succeed: the code then uses these return status reports to determine whether a retry/poll is called for. (Again, this is assuming userland code didn't take full control of the situation by setting the option `explicitInitialization`!)

littlebee pushed a commit to littlebee/SlickGrid that referenced this issue Feb 3, 2015

Bee Wilkerson
attempt at fixing infamous 'Cannot find stylesheet' error in slickgri…
…d. solution from mleibman#223 by Maheshkumar-Kakade as it appears to have the lowest touch and doesn't involve a retry timer solution as several others suggested.  fingers crossed

stropitek added a commit to NPellet/visualizer that referenced this issue Jun 3, 2015

Attempt to resolve issue #387
Fix suggested by Maheshkumar-Kakade in mleibman/SlickGrid#223

rubenv added a commit to rubenv/SlickGrid that referenced this issue Nov 19, 2015

pmi added a commit to enonic/xp that referenced this issue Dec 3, 2015

XP-2234 Add and verify that all descendants of FormInputEl correctly …
…update dirty flag

- Fixed SlickGrid's Cannot find stylesheet exception according to mleibman/SlickGrid#223
- added dirty logic to FormItemEl
- added doSetValue and doGetValue to FormItemEl that do actual value accessing, while setValue and getValue take care of flags support and should not be overriden, except classes where they access value attribute  (i.e. Checkbox, RadioButton), but there doSetValue/doGetValue are called from their own methods (i.e. setChecked/isChecked)
- added refreshDirtyState(), refreshValueChanged() methods to manually trigger flags update if necessary (i.e. ComboBoxes do that based on SelectedOptionsView modifications)
- added originalValue to FormItemEl that is used to check dirty state
- passed original value to every form item I found
- moved value changed listeners to api.dom.FormItemEl
- moved api.ui.ValueChangedEvent to api.ValueChangedEvent becaused it is thrown from api.dom.FormItemEl
- removed LocalTime that was wrapping TimePicker and used TimePicker directly
- refactored GeoPoint to extend TextInput instead of wrapping it
- removed unused local properties from RichComboBox
- made SelectedOptionView extend DivEl instead of FormItemEl because it's not a form item actually
- refactored Tags to extend doSetValue/doGetValue instead of using their own methods
- refactored FileInput to extend CompositeFormInputEl instead of wrapping its methods
- moved common methods to BaseInputType...s from inheritors

pmi added a commit to enonic/xp that referenced this issue Dec 7, 2015

XP-2234 Add and verify that all descendants of FormInputEl correctly …
…update dirty flag

- Fixed SlickGrid's Cannot find stylesheet exception according to mleibman/SlickGrid#223
- added dirty logic to FormItemEl
- added doSetValue and doGetValue to FormItemEl that do actual value accessing, while setValue and getValue take care of flags support and should not be overriden, except classes where they access value attribute  (i.e. Checkbox, RadioButton), but there doSetValue/doGetValue are called from their own methods (i.e. setChecked/isChecked)
- added refreshDirtyState(), refreshValueChanged() methods to manually trigger flags update if necessary (i.e. ComboBoxes do that based on SelectedOptionsView modifications)
- added originalValue to FormItemEl that is used to check dirty state
- passed original value to every form item I found
- moved value changed listeners to api.dom.FormItemEl
- moved api.ui.ValueChangedEvent to api.ValueChangedEvent becaused it is thrown from api.dom.FormItemEl
- removed LocalTime that was wrapping TimePicker and used TimePicker directly
- refactored GeoPoint to extend TextInput instead of wrapping it
- removed unused local properties from RichComboBox
- made SelectedOptionView extend DivEl instead of FormItemEl because it's not a form item actually
- refactored Tags to extend doSetValue/doGetValue instead of using their own methods
- refactored FileInput to extend CompositeFormInputEl instead of wrapping its methods
- moved common methods to BaseInputType...s from inheritors

Merged with master

pmi added a commit to enonic/xp that referenced this issue Dec 10, 2015

XP-2234 Add and verify that all descendants of FormInputEl correctly …
…update dirty flag

- Fixed SlickGrid's Cannot find stylesheet exception according to mleibman/SlickGrid#223
- added dirty logic to FormItemEl
- added doSetValue and doGetValue to FormItemEl that do actual value accessing, while setValue and getValue take care of flags support and should not be overriden, except classes where they access value attribute  (i.e. Checkbox, RadioButton), but there doSetValue/doGetValue are called from their own methods (i.e. setChecked/isChecked)
- added refreshDirtyState(), refreshValueChanged() methods to manually trigger flags update if necessary (i.e. ComboBoxes do that based on SelectedOptionsView modifications)
- added originalValue to FormItemEl that is used to check dirty state
- passed original value to every form item I found
- moved value changed listeners to api.dom.FormItemEl
- moved api.ui.ValueChangedEvent to api.ValueChangedEvent becaused it is thrown from api.dom.FormItemEl
- removed LocalTime that was wrapping TimePicker and used TimePicker directly
- refactored GeoPoint to extend TextInput instead of wrapping it
- removed unused local properties from RichComboBox
- made SelectedOptionView extend DivEl instead of FormItemEl because it's not a form item actually
- refactored Tags to extend doSetValue/doGetValue instead of using their own methods
- refactored FileInput to extend CompositeFormInputEl instead of wrapping its methods
- moved common methods to BaseInputType...s from inheritors

Merged with master

dandormont added a commit to GreywallSoftware/SlickGrid that referenced this issue Nov 9, 2016

@shoop shoop referenced this issue in DimitarChristoff/slickgrid-es6 Nov 2, 2017

Open

Add fix from Maheshkumar-Kakade for upstream SlickGrid issue #223 #30

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment