Implemented explicit grid initialization option (issue #210).

author: Michael Leibman <michael.leibman@gmail.com> 2012-01-21 00:52:46 -0800
committer: Michael Leibman <michael.leibman@gmail.com> 2012-01-21 00:52:46 -0800
commit: d24463b756b87119e816b00d90d56368bf4ebbbc (patch)
tree: a3462908c82c9c04a019f463a23d6346523255ec
parent: b9592ca7caca24c265cab972daed178bcbba66b4 (diff)
download: SlickGrid-d24463b756b87119e816b00d90d56368bf4ebbbc.zip
SlickGrid-d24463b756b87119e816b00d90d56368bf4ebbbc.tar.gz
SlickGrid-d24463b756b87119e816b00d90d56368bf4ebbbc.tar.bz2
2 files changed, 149 insertions, 49 deletions
diff --git a/examples/example-explicit-initialization.html b/examples/example-explicit-initialization.html
new file mode 100644
index 0000000..25cca59
--- /dev/null
+++ b/examples/example-explicit-initialization.html
@@ -0,0 +1,79 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+  <title>SlickGrid example: Explicit grid initialization</title>
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
+  <link rel="stylesheet" href="examples.css" type="text/css"/>
+</head>
+<body>
+<table width="100%" cellpadding="20">
+  <tr>
+    <td valign="top" width="50%" id="myTable">
+    </td>
+    <td valign="top">
+      <h2>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>
+    </td>
+  </tr>
+</table>
+
+<script src="../lib/jquery-1.7.min.js"></script>
+<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../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"},
+    {id: "start", name: "Start", field: "start"},
+    {id: "finish", name: "Finish", field: "finish"},
+    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
+  ];
+
+  var options = {
+    enableCellNavigation: true,
+    enableColumnReorder: false,
+    explicitInitialization: true
+  };
+
+  $(function () {
+    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
+    var myGrid = $("<div id='myGrid' style='width:600px;height:500px;'></div>");
+    grid = new Slick.Grid(myGrid, data, columns, options);
+
+
+    // ... later on, append the container to the DOM and initialize SlickGrid
+    myGrid.appendTo($("#myTable"));
+    grid.init();
+  })
+</script>
+</body>
+</html>
diff --git a/slick.grid.js b/slick.grid.js
index 7a8eb69..2c1dcbf 100644
--- a/slick.grid.js
+++ b/slick.grid.js
@@ -55,6 +55,7 @@ if (typeof Slick === "undefined") {
   function SlickGrid(container, data, columns, options) {
     // settings
     var defaults = {
+      explicitInitialization: false,
       headerHeight: 25,
       rowHeight: 25,
       defaultColumnWidth: 80,
@@ -106,6 +107,7 @@ if (typeof Slick === "undefined") {
     var scrollDir = 1;
 
     // private
+    var initialized = false;
     var $container;
     var uid = "slickgrid_" + Math.round(1000000 * Math.random());
     var self = this;
@@ -121,7 +123,8 @@ if (typeof Slick === "undefined") {
     var viewportH, viewportW;
     var canvasWidth;
     var viewportHasHScroll, viewportHasVScroll;
-    var headerColumnWidthDiff, headerColumnHeightDiff, cellWidthDiff, cellHeightDiff;  // padding+border
+    var headerColumnWidthDiff = 0, headerColumnHeightDiff = 0, // border+padding
+        cellWidthDiff = 0, cellHeightDiff = 0;
     var absoluteColumnMinWidth;
     var numberOfRows = 0;
 
@@ -224,51 +227,61 @@ if (typeof Slick === "undefined") {
       $viewport = $("<div class='slick-viewport' tabIndex='0' hideFocus style='width:100%;overflow-x:auto;outline:0;position:relative;overflow-y:auto;'>").appendTo($container);
       $canvas = $("<div class='grid-canvas' tabIndex='0' hideFocus />").appendTo($viewport);
 
-      // header columns and cells may have different padding/border skewing width calculations (box-sizing, hello?)
-      // calculate the diff so we can set consistent sizes
-      measureCellPaddingAndBorder();
+      if (!options.explicitInitialization) {
+        finishInitialization();
+      }
+    }
 
-      // for usability reasons, all text selection in SlickGrid is disabled
-      // with the exception of input and textarea elements (selection must
-      // be enabled there so that editors work as expected); note that
-      // selection in grid cells (grid body) is already unavailable in
-      // all browsers except IE
-      disableSelection($headers); // disable all text selection in header (including input and textarea)
+    function finishInitialization() {
+      if (!initialized) {
+        initialized = true;
 
-      if (!options.enableTextSelectionOnCells) {
-        // disable text selection in grid cells except in input and textarea elements
-        // (this is IE-specific, because selectstart event will only fire in IE)
-        $viewport.bind("selectstart.ui", function (event) {
-          return $(event.target).is("input,textarea");
-        });
-      }
+        viewportW = parseFloat($.css($container[0], "width", true));
 
-      viewportW = parseFloat($.css($container[0], "width", true));
+        // header columns and cells may have different padding/border skewing width calculations (box-sizing, hello?)
+        // calculate the diff so we can set consistent sizes
+        measureCellPaddingAndBorder();
 
-      createColumnHeaders();
-      setupColumnSort();
-      createCssRules();
-      resizeAndRender();
+        // for usability reasons, all text selection in SlickGrid is disabled
+        // with the exception of input and textarea elements (selection must
+        // be enabled there so that editors work as expected); note that
+        // selection in grid cells (grid body) is already unavailable in
+        // all browsers except IE
+        disableSelection($headers); // disable all text selection in header (including input and textarea)
 
-      bindAncestorScrollEvents();
-      $viewport.bind("scroll.slickgrid", handleScroll);
-      $container.bind("resize.slickgrid", resizeAndRender);
-      $headerScroller
-          .bind("contextmenu.slickgrid", handleHeaderContextMenu)
-          .bind("click.slickgrid", handleHeaderClick);
+        if (!options.enableTextSelectionOnCells) {
+          // disable text selection in grid cells except in input and textarea elements
+          // (this is IE-specific, because selectstart event will only fire in IE)
+          $viewport.bind("selectstart.ui", function (event) {
+            return $(event.target).is("input,textarea");
+          });
+        }
 
-      $canvas
-          .bind("keydown.slickgrid", handleKeyDown)
-          .bind("click.slickgrid", handleClick)
-          .bind("dblclick.slickgrid", handleDblClick)
-          .bind("contextmenu.slickgrid", handleContextMenu)
-          .bind("draginit", handleDragInit)
-          .bind("dragstart", handleDragStart)
-          .bind("drag", handleDrag)
-          .bind("dragend", handleDragEnd);
+        createColumnHeaders();
+        setupColumnSort();
+        createCssRules();
+        resizeAndRender();
+        bindAncestorScrollEvents();
 
-      $canvas.delegate(".slick-cell", "mouseenter", handleMouseEnter);
-      $canvas.delegate(".slick-cell", "mouseleave", handleMouseLeave);
+        $container
+            .on("resize.slickgrid", resizeAndRender);
+        $viewport
+            .on("scroll.slickgrid", handleScroll);
+        $headerScroller
+            .on("contextmenu.slickgrid", handleHeaderContextMenu)
+            .on("click.slickgrid", handleHeaderClick);
+        $canvas
+            .on("keydown.slickgrid", handleKeyDown)
+            .on("click.slickgrid", handleClick)
+            .on("dblclick.slickgrid", handleDblClick)
+            .on("contextmenu.slickgrid", handleContextMenu)
+            .on("draginit", handleDragInit)
+            .on("dragstart", handleDragStart)
+            .on("drag", handleDrag)
+            .on("dragend", handleDragEnd)
+            .on("mouseenter", ".slick-cell", handleMouseEnter)
+            .on("mouseleave", ".slick-cell", handleMouseLeave);
+      }
     }
 
     function registerPlugin(plugin) {
@@ -393,6 +406,7 @@ if (typeof Slick === "undefined") {
     }
 
     function updateColumnHeader(columnId, title, toolTip) {
+      if (!initialized) { return; }
       var idx = getColumnIndex(columnId);
       var $header = $headers.children().eq(idx);
       if ($header) {
@@ -415,8 +429,6 @@ if (typeof Slick === "undefined") {
     }
 
     function createColumnHeaders() {
-      var i;
-
       function hoverBegin() {
         $(this).addClass("ui-state-hover");
       }
@@ -429,7 +441,7 @@ if (typeof Slick === "undefined") {
       $headerRow.empty();
       columnsById = {};
 
-      for (i = 0; i < columns.length; i++) {
+      for (var i = 0; i < columns.length; i++) {
         var m = columns[i] = $.extend({}, columnDefaults, columns[i]);
         columnsById[m.id] = i;
 
@@ -889,6 +901,7 @@ if (typeof Slick === "undefined") {
     }
 
     function applyColumnHeaderWidths() {
+      if (!initialized) { return; }
       var h;
       for (var i = 0, headers = $headers.children(), ii = headers.length; i < ii; i++) {
         h = $(headers[i]);
@@ -957,13 +970,15 @@ if (typeof Slick === "undefined") {
 
     function setColumns(columnDefinitions) {
       columns = columnDefinitions;
-      invalidateAllRows();
-      createColumnHeaders();
-      removeCssRules();
-      createCssRules();
-      resizeAndRender();
-      applyColumnWidths();
-      handleScroll();
+      if (initialized) {
+        invalidateAllRows();
+        createColumnHeaders();
+        removeCssRules();
+        createCssRules();
+        resizeAndRender();
+        applyColumnWidths();
+        handleScroll();
+      }
     }
 
     function getOptions() {
@@ -1250,6 +1265,7 @@ if (typeof Slick === "undefined") {
     }
 
     function resizeCanvas() {
+      if (!initialized) { return; }
       if (options.autoHeight) {
         viewportH = options.rowHeight * (getDataLength() + (options.enableAddRow ? 1 : 0) + (options.leaveSpaceForNewRows ? numVisibleRows - 1 : 0));
       } else {
@@ -1274,6 +1290,7 @@ if (typeof Slick === "undefined") {
     }
 
     function updateRowCount() {
+      if (!initialized) { return; }
       numberOfRows = getDataLength() +
           (options.enableAddRow ? 1 : 0) +
           (options.leaveSpaceForNewRows ? numVisibleRows - 1 : 0);
@@ -1426,6 +1443,7 @@ if (typeof Slick === "undefined") {
     }
 
     function render() {
+      if (!initialized) { return; }
       var visible = getVisibleRange();
       var rendered = getRenderedRange();
 
@@ -2355,6 +2373,7 @@ if (typeof Slick === "undefined") {
     }
 
     function setActiveCell(row, cell) {
+      if (!initialized) { return; }
       if (row > getDataLength() || row < 0 || cell >= columns.length || cell < 0) {
         return;
       }
@@ -2416,6 +2435,7 @@ if (typeof Slick === "undefined") {
     }
 
     function gotoCell(row, cell, forceEdit) {
+      if (!initialized) { return; }
       if (!canCellBeActive(row, cell)) {
         return;
       }
@@ -2667,6 +2687,7 @@ if (typeof Slick === "undefined") {
       "setCellCssStyles": setCellCssStyles,
       "removeCellCssStyles": removeCellCssStyles,
 
+      "init": finishInitialization,
       "destroy": destroy,
 
       // IEditor implementation
author	Michael Leibman <michael.leibman@gmail.com>	2012-01-21 00:52:46 -0800
committer	Michael Leibman <michael.leibman@gmail.com>	2012-01-21 00:52:46 -0800
commit	d24463b756b87119e816b00d90d56368bf4ebbbc (patch)
tree	a3462908c82c9c04a019f463a23d6346523255ec
parent	b9592ca7caca24c265cab972daed178bcbba66b4 (diff)
download	SlickGrid-d24463b756b87119e816b00d90d56368bf4ebbbc.zip SlickGrid-d24463b756b87119e816b00d90d56368bf4ebbbc.tar.gz SlickGrid-d24463b756b87119e816b00d90d56368bf4ebbbc.tar.bz2