SlickGrid/examples/example-explicit-initialization.html at 08f5dfc7d153b28c8f947da8f30d9de1c19c6f7b · 6pac/SlickGrid · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
  <title>SlickGrid example: Explicit grid initialization</title>
  <link rel="stylesheet" href="../dist/styles/css/example-demo.css" type="text/css"/>
  <link rel="stylesheet" href="../dist/styles/css/slick-alpine-theme.css" type="text/css"/>
</head>
<body>
<h2 class="title">Example - Explicit Initialization</h2>
<table width="100%" cellpadding="2">
  <tr>
    <td valign="top" width="50%" id="myTable">
    </td>
    <td valign="top">
      <h2>
        <a href="/examples/index.html" style="text-decoration: none; font-size: 22px">&#x2302;</a>
        Demonstrates:
      </h2>
      <p>
          The container which the grid is being created in needs to be in the DOM and participate in layout
          (can be 'visibility:hidden' but not 'display:none') in order for SlickGrid to be able to make certain
          measurements and initialize event listeners.  Normally, this is done when a SlickGrid instance is
          being created.  Optionally, you can defer the initialization until the above condition is met and call
          the <b>grid.init()</b> method explicitly.  To use explicit initialization, set the <b>explicitInitialization</b>
          option to true.
          <br/><br/>
          This example demonstrates creating a SlickGrid inside a detached element and calling <b>init()</b> explicitly
          when the element is added to the DOM.
      </p>
        <h2>View Source:</h2>
        <ul>
            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-explicit-initialization.html" target="_sourcewindow"> View the source for this example on Github</a></li>
        </ul>
    </td>
  </tr>
</table>


<script src="../dist/browser/slick.core.js"></script>
<script src="../dist/browser/slick.interactions.js"></script>
<script src="../dist/browser/slick.grid.js"></script>

<script>
  var grid;
  var columns = [
    {id: "title", name: "Title", field: "title"},
    {id: "duration", name: "Duration", field: "duration"},
    {id: "%", name: "% Complete", field: "percentComplete", width: 95},
    {id: "start", name: "Start", field: "start"},
    {id: "finish", name: "Finish", field: "finish"},
    {id: "effort-driven", name: "Effort Driven", field: "effortDriven", width: 95}
  ];

  var options = {
    enableCellNavigation: true,
    enableColumnReorder: false,
    explicitInitialization: true
  };

  document.addEventListener("DOMContentLoaded", () => {
    var data = [];
    for (var i = 0; i < 500; i++) {
      data[i] = {
        title: "Task " + i,
        duration: "5 days",
        percentComplete: Math.round(Math.random() * 100),
        start: "01/01/2009",
        finish: "01/05/2009",
        effortDriven: (i % 5 == 0)
      };
    }

    // create a detached container element
    const gridElm = document.createElement('div');
    gridElm.id = 'myGrid';
    gridElm.className = 'slick-container';
    gridElm.style.width = '600px';
    gridElm.style.height = '500px';
    gridElm.style.position = 'relative';

    grid = new Slick.Grid(gridElm, data, columns, options);


    // ... later on, append the container to the DOM and initialize SlickGrid
    document.querySelector("#myTable").appendChild(gridElm);
    grid.init();
  });
</script>
</body>
</html>