Skip to content

Commit 0145d1a

Browse files
6pac6pac
committed
Revert 06-single-stylesheet.patch due to various issues
- example 'example-multi-grid-basic.html' was added to show two grids on a page - test '40 grids on a page test.html' was added to allow the problem in IE to be demonstrated consistently - we would like to use a single stylesheet for all grids on page rather than adding a new stylesheet per grid - this would get around the 31 stylesheet limitation in IE7-9 PROBLEMS: - modifying an existing stylesheet in chrome clears and regenerates all the DOM nodes for that stylesheet from scratch - this clears the cached references to the column styles for any previously initialised grids - since the CSS styles are added and cached in the final stage of initialisation, we can't fix this by delaying final init - this would take major rearchitecting of the init process to fix - note that IE does not reset all the existing nodes so doesn't have this problem SO - the first attempted fix was to have one stylesheet in IE and go back to multiple stylesheets for other browsers BUT: - the single-stylesheet approach in IE renders fine, but column resizing fails in IE8 with 'permission denied' on all but the first grid - it appears this is a CORS-relates issue. I note the href is null for inline stylesheets. Not sure if this has an impact. So in the final analysis, the best option is to revert back to the way it was originally and live with the IE7-9 31 stylesheet limitation - IE 10+ does not have this limitation anyway
1 parent 2ba0eda commit 0145d1a

File tree

3 files changed

+403
-6
lines changed

3 files changed

+403
-6
lines changed

‎examples/example-multi-grid-basic.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
5+
<title>SlickGrid example: Two Basic grids on page</title>
6+
<link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
7+
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
8+
<link rel="stylesheet" href="examples.css" type="text/css"/>
9+
<style>
10+
#myGrid01, #myGrid02 {
11+
background: white;
12+
outline: 0;
13+
border: 1px solid gray;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<table width="100%">
19+
<tr>
20+
<td valign="top" width="50%">
21+
<div id="myGrid02" style="width:600px;height:300px;"></div>
22+
<br/>
23+
<div id="myGrid01" style="width:600px;height:300px;"></div>
24+
</td>
25+
<td valign="top">
26+
<h2>Demonstrates:</h2>
27+
<ul>
28+
<li>two basic grids with minimal configuration</li>
29+
</ul>
30+
<h2>View Source:</h2>
31+
<ul>
32+
<li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example1-simple.html" target="_sourcewindow"> View the source for this example on Github</a></li>
33+
</ul>
34+
</td>
35+
</tr>
36+
</table>
37+
38+
<script src="../lib/jquery-1.11.2.min.js"></script>
39+
<script src="../lib/jquery.event.drag-2.2.js"></script>
40+
41+
<script src="../slick.core.js"></script>
42+
<script src="../slick.grid.js"></script>
43+
44+
<script>
45+
var grid;
46+
var columns = [
47+
{id: "title", name: "Title", field: "title"},
48+
{id: "duration", name: "Duration", field: "duration"},
49+
{id: "%", name: "% Complete", field: "percentComplete"},
50+
{id: "start", name: "Start", field: "start"},
51+
{id: "finish", name: "Finish", field: "finish"},
52+
{id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
53+
];
54+
55+
var options = {
56+
enableCellNavigation: true,
57+
enableColumnReorder: false
58+
};
59+
60+
function CreateData() {
61+
var data = [];
62+
for (var i = 0; i < 500; i++) {
63+
data[i] = {
64+
title: "Task " + i,
65+
duration: "5 days",
66+
percentComplete: Math.round(Math.random() * 100),
67+
start: "01/01/2009",
68+
finish: "01/05/2009",
69+
effortDriven: (i % 5 == 0)
70+
};
71+
}
72+
return data;
73+
}
74+
75+
$(function () {
76+
var data01 = CreateData();
77+
grid01 = new Slick.Grid("#myGrid01", data01, columns, options);
78+
79+
var data02 = CreateData();
80+
grid02 = new Slick.Grid("#myGrid02", data02, columns, options);
81+
})
82+
</script>
83+
</body>
84+
</html>

‎slick.grid.js‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -949,11 +949,7 @@ if (typeof Slick === "undefined") {
949949
}
950950

951951
function createCssRules() {
952-
// IE limits # of sheets to ~31, instead of adding a new style sheet for each grid just use one
953-
$style = $('#slickGridStyleSheet');
954-
if (!$style[0]) {
955-
$style = $("<style id='slickGridStyleSheet' type='text/css' rel='stylesheet' />").appendTo($("head"));
956-
}
952+
$style = $("<style type='text/css' rel='stylesheet' />").appendTo($("head"));
957953
var rowHeight = (options.rowHeight - cellHeightDiff);
958954
var rules = [
959955
"." + uid + " .slick-header-column { left: 1000px; }",
@@ -969,7 +965,7 @@ if (typeof Slick === "undefined") {
969965
}
970966

971967
if ($style[0].styleSheet) { // IE
972-
$style[0].styleSheet.cssText += rules.join(" ");
968+
$style[0].styleSheet.cssText = rules.join(" ");
973969
} else {
974970
$style[0].appendChild(document.createTextNode(rules.join(" ")));
975971
}

0 commit comments

Comments
 (0)