feat(rowDetail): add option "singleRowExpand"

- defaults to false - this new option, when enabled, would only open 1 row at a time - reference Angular-Slickgrid [#194](ghiscoding/Angular-Slickgrid#194)
6pac · May 20, 2019 · bfe6512 · bfe6512
1 parent 4576936
commit bfe6512
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 14 deletions.
diff --git a/examples/example16-row-detail.html b/examples/example16-row-detail.html
@@ -73,6 +73,9 @@
       border: 1px solid #ccc;
       border-top: none;
     }
+    .options-panel {
+      width: 375px;
+    }
   </style>
 </head>
 <body>
@@ -87,31 +90,43 @@ <h2>Demonstrates:</h2>
       <ul>
         <li>RowDetailView Plugin</li>
         <li>See more detail of an item by toggling a row detail panel.<li></li>
-        <li>User can override the logic to display the expandable icon with "expandableOverride". e.g. every 2nd rows is selectable</li>
-        <li>"useRowClick: True" to toggle from any column</li>
-        <li>"useRowClick: False" to toggle from the toggle icon only</li>
-        <li>"panelRows: 4" DetailView is RowHeight * 4</li>
-        <li>"loadOnce: True" Try shrink and reopen same row</li>
-        <li>"loadOnce: False DEFAULT" Will call load every time row is expanded</li>
+        <li>User can override the logic to display the expandable icon with "expandableOverride". e.g. every 2nd rows is selectable.</li>
+        <li>"useRowClick: True" to toggle from any column.</li>
+        <li>"useRowClick: False" to toggle from the toggle icon only.</li>
+        <li>"panelRows: 4" DetailView is (RowHeight * 4).</li>
+        <li>"loadOnce: True" Try to shrink and reopen the same row.</li>
+        <li>"loadOnce: False DEFAULT" Will call load every time row is expanded.</li>
+        <li>"singleRowExpand: True" Multiple rows can be expanded at any time.</li>
+        <li>"singleRowExpand: False DEFAULT" Will only expand 1 row at a time.</li>
         <li>&nbsp;</li>
-        <li>Example of using non templated view e.g. check any row multiple of 5<li>
+        <li>Example of using non templated view e.g. check any row multiple of 5.<li>
       </ul>
 
       <h2>Options:</h2>
-      <button onclick="detailView.setOptions({ loadOnce: true, useRowClick: detailView.useRowClick })">Load Once ON</button>
-      &nbsp;
-      <button onclick="detailView.setOptions({ loadOnce: false, useRowClick: detailView.useRowClick})">Load Once OFF</button>
+      <p>
+        <button onclick="detailView.setOptions({ loadOnce: true, useRowClick: detailView.useRowClick })">Load Once ON</button>
+        &nbsp;
+        <button onclick="detailView.setOptions({ loadOnce: false, useRowClick: detailView.useRowClick})">Load Once OFF</button>
+      </p>
 	    <p>
 	      <input type="number" id="panelRowInput"/> <button onclick="setPanelRows()">Set Panel Rows Option</button>
 	    </p>
       <p>
         <input type="number" id="maxRowInput"/> <button onclick="setMaxRows()">Set Max Panel Rows Option</button>
       </p>
 	    <p>
-        <button onclick="detailView.setOptions({ loadOnce: detailView.loadOnce, useRowClick: true })">Row Click ON</button>
-        &nbsp;
-        <button onclick="detailView.setOptions({ loadOnce: detailView.loadOnce, useRowClick: false })">Row Click OFF</button>
-
+        Click anywhere on the row to expand:
+        <p>
+          <button onclick="detailView.setOptions({ loadOnce: detailView.loadOnce, useRowClick: true })">Row Click ON</button>
+          &nbsp;
+          <button onclick="detailView.setOptions({ loadOnce: detailView.loadOnce, useRowClick: false })">Row Click OFF</button>
+        </p>
+        How many rows cab be opened at a time (defaults to multiple):
+        <p>
+          <button onclick="detailView.setOptions({ singleRowExpand: true })">Single Row Expand ON</button>
+          &nbsp;
+          <button onclick="detailView.setOptions({ singleRowExpand: false })">Single Row Expand OFF (multiple)</button>
+        </p>
         <h2>View Source:</h2>
         <ul>
           <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example16-row-detail.html" target="_sourcewindow"> View the source for this example on Github</a></li>

diff --git a/plugins/slick.rowdetailview.js b/plugins/slick.rowdetailview.js
@@ -17,6 +17,7 @@
  *    postTemplate:           Template that will be loaded once the async function finishes
  *    process:                Async server function call
  *    panelRows:              Row count to use for the template panel
+ *    singleRowExpand:        Defaults to false, limit expanded row to 1 at a time.
  *    useRowClick:            Boolean flag, when True will open the row detail on a row click (from any column), default to False
  *    keyPrefix:              Defaults to '_', prefix used for all the plugin metadata added to the item object (meta e.g.: padding, collapsed, parent)
  *    collapseAllOnSort:      Defaults to true, which will collapse all row detail views when user calls a sort. Unless user implements a sort to deal with padding
@@ -109,6 +110,7 @@
       loadOnce: false,
       collapseAllOnSort: true,
       saveDetailViewOnScroll: true,
+      singleRowExpand: false,
       useSimpleViewportCalc: false,
       alwaysRenderColumn: true,
       toolTip: '',
@@ -198,6 +200,9 @@
     /** set or change some of the plugin options */
     function setOptions(options) {
       _options = $.extend(true, {}, _options, options);
+      if (_options && _options.singleRowExpand) {
+        collapseAll();
+      }
     }
 
     /** Find a value in an array and return the index when (or -1 when not found) */
@@ -459,6 +464,10 @@
 
     /** Expand a row given the dataview item that is to be expanded */
     function expandDetailView(item) {
+      if (_options && _options.singleRowExpand) {
+        collapseAll();
+      }
+
       item[_keyPrefix + 'collapsed'] = false;
       _expandedRows.push(item);