Pagination.

src/UniversalDashboard.Materialize/Components/ud-grid.jsx

@@ -5,6 +5,8 @@ import ErrorCard from './error-card.jsx';
 import UdLink from './ud-link.jsx';
 import CustomCell from './custom-cell.jsx';
 import {DebounceInput} from 'react-debounce-input';
+import { Dropdown, Button } from 'react-materialize';
+import UdIcon from './ud-icon.jsx';
 
 function strMapToObj(strMap) {
     if (strMap == undefined) return null;
@@ -182,6 +184,12 @@ export default class UdGrid extends React.Component {
         this.pubSubToken = UniversalDashboard.subscribe(this.props.id, this.onIncomingEvent.bind(this));
     }
 
+    onPageChanged(x) {
+        this.setState({
+            currentPage: x
+        })
+    }
+
     render() {
         if (this.state.hasError) {
             return [<ErrorCard message={this.state.errorMessage} title={this.props.title} id={this.props.id} key={this.props.id} />, <ReactInterval timeout={this.props.refreshInterval * 1000} enabled={this.props.autoRefresh} callback={this.loadData.bind(this)}/>]
@@ -225,7 +233,8 @@ export default class UdGrid extends React.Component {
         var gridPlugins = [];
         var serverSort, serverFilter, serverNext, serverPrev, serverGetPage, serverFilterControl;
         var components = {
-            SettingsToggle: () => <span />
+            SettingsToggle: () => <span />,
+            Pagination: () => <span />
         }
         var serverFilterControl = <DebounceInput name="filter" className="griddle-filter" type="text" placeholder={this.props.filterText} value={this.state.filterText} onChange={this.onFilter.bind(this)} debounceTimeout={300} />
 
@@ -235,8 +244,8 @@ export default class UdGrid extends React.Component {
 
             if (this.props.noFilter) {
                 components = {
-                    Filter: () => <span/>,
-                    SettingsToggle: () => <span />
+                    ...components,
+                    Filter: () => <span/>
                 }
             }
         } else {
@@ -252,20 +261,21 @@ export default class UdGrid extends React.Component {
             }
 
             components = {
-                Filter: () => <span/>,
-                SettingsToggle: () => <span />
+                ...components,
+                Filter: () => <span/>
             }
         }
 
         return (
             <div className="card ud-grid" id={this.props.id} style={{background: this.props.backgroundColor, color: this.props.fontColor}} key={this.props.id}>
                 <div className="card-content">
                     <span className="card-title">{this.props.title}</span>
+
                     {serverFilterControl}
                     { this.state.loading ? 
                     <div className="progress"><div className="indeterminate"></div></div> :
                     rowDefinition ? 
-                    <Griddle 
+                    [<Griddle 
                         data={this.state.data}
                         plugins={gridPlugins}
                         sortProperties={[{
@@ -288,11 +298,46 @@ export default class UdGrid extends React.Component {
                         styleConfig={styleConfig}
                     >
                         {rowDefinition}
-                    </Griddle> : <div>No results found</div>}
+                    </Griddle>,
+                    <GridToolbar activePage={this.state.currentPage} totalPages={Math.ceil(this.state.recordCount / this.state.pageSize)} onPageChanged={this.onPageChanged.bind(this)}/>]
+                     : <div>No results found</div>}
                 </div>
+
                 {actions}
                 <ReactInterval timeout={this.props.refreshInterval * 1000} enabled={this.props.autoRefresh} callback={this.reload.bind(this)}/>
             </div>
                );
     }
+}
+
+class GridToolbar extends React.Component {
+    render() {
+
+        var cursor = {
+            cursor: "pointer"
+        }
+
+        var pagination = null;
+        if (!this.props.noPaging && this.props.totalPages > 1) {
+            var pages = [];
+            for(var i = 1; i <= this.props.totalPages; i++) {
+                pages.push(<Page activePage={this.props.activePage} onPageChanged={this.props.onPageChanged} page={i} />);
+            }
+            pagination = <ul className="pagination right-align">
+                <li className={this.props.activePage === 1 ? "disabled" : ""} style={this.props.activePage > 1 ? cursor : {}}><a onClick={() => this.props.activePage > 1 && this.props.onPageChanged(this.props.activePage - 1)}><UdIcon icon="ChevronLeft" /></a></li>
+                    {pages}
+                <li className={this.props.activePage === this.props.totalPages ? "disabled" : ""}  style={this.props.activePage < this.props.totalPages ? cursor : {}}><a onClick={() => this.props.activePage < this.props.totalPages && this.props.onPageChanged(this.props.activePage + 1)}><UdIcon icon="ChevronRight" /></a></li>
+            </ul>
+        }
+
+        return (
+            <div><Button icon={<UdIcon icon="Download" />} />{pagination}</div>
+        )
+    }
+}
+
+class Page extends React.Component {
+    render() {
+        return <li className={this.props.activePage === this.props.page ? "active" : ""} style={{ cursor: "pointer" }}><a onClick={() => this.props.onPageChanged(this.props.page)}>{this.props.page}</a></li>
+    }
 }

src/UniversalDashboard.Materialize/Scripts/grid.ps1

@@ -37,8 +37,7 @@ function New-UDGrid {
         [Parameter()]
 	    [Switch]$AutoRefresh,
 	    [Parameter()]
-	    [int]$RefreshInterval = 5
-
+        [int]$RefreshInterval = 5
     )
 
     End {

src/UniversalDashboard.UITest/Integration/Grid.Tests.ps1 → src/UniversalDashboard.Materialize/Tests/grid.tests.ps1

@@ -1,25 +1,3 @@
-param([Switch]$Release)
-
-$Env:Debug = -not $Release
-
-Import-Module "$PSScriptRoot\..\TestFramework.psm1" -Force
-$ModulePath = Get-ModulePath -Release:$Release
-$BrowserPort = Get-BrowserPort -Release:$Release
-
-Import-Module $ModulePath -Force
-
-Get-UDDashboard | Stop-UDDashboard
-
-$Server = Start-UDDashboard -Port 10001 -Dashboard $dashboard 
-$Driver = Start-SeFirefox
-
-function Set-TestDashboard {
-    param($Dashboard)
-
-    $Server.DashboardService.SetDashboard($Dashboard)
-    Enter-SeUrl -Url "http://localhost:$BrowserPort" -Driver $Driver 
-}
-
 Describe "Grid" {
 
     Context "simple grid" {
@@ -365,6 +343,8 @@ Describe "Grid" {
 
         Set-TestDashboard -Dashboard $dashboard
 
+        Wait-Debugger
+
         It "should not page when NoPaging set" {
             $Element = Find-SeElement -Id "NoPagingGrid" -Driver $Driver
             $Element = Find-SeElement -ClassName "griddle-row" -Driver $Element[0] 
@@ -497,7 +477,4 @@ Describe "Grid" {
 
 
     }    
-}
-
-Stop-SeDriver $Driver
-Stop-UDDashboard -Server $Server 
+}