Update demo

ITDevMgmt · Dec 24, 2013 · fbc3b8b · fbc3b8b
1 parent a507e2c
commit fbc3b8b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 27 deletions.
diff --git a/demo/app.js b/demo/app.js
@@ -28,7 +28,7 @@
                     disabled: false,
                     perRowEditModeEnabled: true,
                     allowMultiSelect: true,
-                    pageSize: 25,
+                    pageSize: 5,
                     pageNum: 0,
                     columns: [
                         {
@@ -137,11 +137,14 @@
             };
 
             $scope.addRow = function () {
-                $scope.gridConfig.getData().push(
+                var data = $scope.gridConfig.getData();
+                data.push(
                     {
-                        $added: true
+                        $added: true,
+                        $editable: true
                     }
                 );
+                $scope.gridConfig.options.pageNum = Math.floor(data.length / $scope.gridConfig.options.pageSize);
             };
         });
 

diff --git a/demo/index.html b/demo/index.html
@@ -18,7 +18,7 @@
             overflow:auto;
         }
         .grid-container {
-            height: 310px; overflow-y: auto;
+            height: 320px; overflow-y: auto;
         }
         .grid-container table {
             margin: 0;
@@ -39,24 +39,10 @@ <h1>
         </div>
         <div ng-controller="MainCtrl">
             <div class="row">
-
-                Grid options used in this demo:
+                <h2>Example Usage</h2>
+                <h3>Configuration</h3>
                 <pre class="pre-scrollable" style="max-height: 200px">{{pretty(gridConfig.options)}}</pre>
-
-                <hr/>
-            </div>
-
-            <div class="row">
-                <h2>Grid using above config</h2>
-                <p>(The add/discard buttons are part of the demo)</p>
-                <div class="btn-group">
-                    <button type="button" class="btn btn-sm btn-success" ng-click="addRow()">Add row</button>
-                    <button type="button" class="btn btn-sm btn-danger" ng-click="filterDeleted(gridConfig.getData())">Remove deleted rows</button>
-                </div>
-
-                <small>
-                    <code>&lt;div simple-grid="gridConfig"&gt;&lt;/div&gt;</code>
-                </small>
+                <h3>Resulting Grid</h3>
                 <div simple-grid="gridConfig" class="grid-container"></div>
                 <div style="text-align:center">
                     Page: {{ gridConfig.options.pageNum + 1 }}
@@ -68,13 +54,20 @@ <h2>Grid using above config</h2>
                             &gt; Next
                         </button>
                     </div>
+                    <div class="btn-group">
+                        <button type="button" class="btn btn-sm btn-success" ng-click="addRow()">Add row</button>
+                        <button type="button" class="btn btn-sm btn-danger" ng-click="filterDeleted(gridConfig.getData())">Remove deleted rows</button>
+                    </div>
                 </div>
 
-                <p>The data model for the above grid:
-                    <code>{{data}}</code>
-                </p>
 
-                <h2>Dynamically change the grid config</h2>
+                <h3>Data (updates automatically)</h3>
+                <pre class="pre-scrollable" style="max-height: 200px">{{pretty(data)}}</pre>
+
+                <hr/>
+
+                <h3>Changing the configuration dynamically</h3>
+                <p><strong>Change settings below, see how the affect the example grid above:</strong></p>
                 <input id="editable" type="checkbox" ng-model="gridConfig.options.editable" />
                 <label for="editable">Editable?</label>
                 <input id="perRowEditMode" type="checkbox" ng-disabled="!gridConfig.options.editable" 
@@ -83,8 +76,7 @@ <h2>Dynamically change the grid config</h2>
                 <input id="allowMultiSelect" type="checkbox" ng-model="gridConfig.options.allowMultiSelect" />
                 <label for="allowMultiSelect">Allow Multi-Select?</label>
 
-                <h3>Columns of above grid, as editable data in another grid</h3>
-                <p>Change the data to dynamically update the columns of the grid above:</p>
+                <h4>Columns</h4>
                 <div simple-grid="metaGridConfig"></div>
             </div>
         </div>