Living on the Grid - Unlock the Power of Dojo Data Grids in XPages - MWLUG 2013
Dojo Grids in XPages
-
Upload
teamstudio -
Category
Technology
-
view
2.867 -
download
6
description
Transcript of Dojo Grids in XPages
![Page 1: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/1.jpg)
Dojo grids in XPages
Tweet about this event: #xpages and mention us: @teamstudio @TLCCLTD @Balassaitis
June 27, 2013
![Page 2: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/2.jpg)
@teamstudio teamstudio.com
@TLCCLTD
@Balassaitis
Taline Badrikian Marketing Director
![Page 3: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/3.jpg)
Who we are
• Our background is in creating tools for collaborative computing in mid-size and large enterprises, primarily for Lotus Notes
• Easy-to-use tools for developers and administrators • 2300+ active customers, 47 countries • Offices in US, UK and Japan • Entered mobile space in 2010 with Unplugged – easy
mobilization of Notes apps to Blackberry, Android and iOS
![Page 4: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/4.jpg)
Teamstudio Unplugged
• Your Mobile Domino Server – take your Notes apps with you!
• End users access Notes applications from mobile devices whether online or offline
• Leverages existing skills and technology – XPages – Replication model you already know
• IBM Collaboration Solutions Award Winner 2013
![Page 5: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/5.jpg)
Teamstudio Continuity
• Mobile BCM application for smartphones and tablets – iOS, Android and BB
• Offline access to all your BCM and Disaster Recovery data
• Store plans, contacts, call trees, and more • Client available for download from app stores
![Page 6: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/6.jpg)
Teamstudio
• Next webinar July 24th – Making Mobile Application Development easy
• Visit us at MWLUG – August 21-23 in Indianapolis
• Visit us at ICON UK – September 2-3 in Brighton, UK
![Page 7: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/7.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Howard Greenberg TLCC
@TLCCLtd
Dojo Data Grids in XPages Your Hosts Today:
1
#XPages
Paul Della-Nebbia TLCC
@paulDN
![Page 8: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/8.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
2
Upcoming and Recorded Webinars
Next Webinar on July 24th Making Mobile App Development Easy Matt White and Rich Sharpe
www.tlcc.com/xpages-webinar Same web page has a link to previous webinars
![Page 9: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/9.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
• Seven XPages Courses! ‒ FREE !! Introduction to XPages Development ‒ JavaScript for XPages Development (8.5 and 9) ‒ Developing XPages Using Domino Designer 8.5 / XPages Development 1 for 9 ‒ Rapid XPages Development using Application Layout and Dojo UI Controls (8.5 and 9) ‒ XPages Development 2 for Notes and Domino 8.5 ‒ Mobile XPages for Domino 8.5 and 9 ‒ Java 1 for XPages Developers
• Self Paced Training – Learn anywhere! – An Instructor is a click away
• Instructor Led (Private) • TLCC Mentoring Services
3
TLCC XPages Offerings
Spring Sale Ends Tomorrow!!!!
![Page 10: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/10.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
ICON UK (used to be UK LUG) in Brighton, UK September 1st and 2nd … FREE!! www.iconuk.org
Both events feature a TLCC TackItOn Rapid XPages Development using Application Layout and Dojo UI Controls One full day with TLCC’s expert instructors TLCC’s Rapid XPages Development course A year of continued instructor support
All for only $499 www.tlcc.com/iconuktackiton or www.tlcc.com/mwlug
MWLug in Indianapolis August 21st to 23rd www.mwlug.com
4
Upcoming Events
![Page 11: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/11.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Asking Questions
5
Q & A at the end! Type in your questions as they come up
![Page 12: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/12.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Your Presenter Today:
6
#XPages
Brad Balassaitis @Balassaitis http://xcellerant.net/
![Page 13: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/13.jpg)
Dojo Grids in XPages
1
Brad Balassaitis Senior Consultant, PSC Group
June 27th, 2013
![Page 14: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/14.jpg)
Brad Balassaitis
• Notes/Domino developer for 17 years, XPages for 3 years
• Senior Consultant at PSC Group • XPages Developer
• Project Lead
• Contact Information • Blog: http://xcellerant.net
• Twitter: @Balassaitis
• Skype: brad.balassaitis
www.psclistens.com @pscgroup
2
![Page 15: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/15.jpg)
Agenda • Dojo Data Grid Control
• Creation and Default Features
• Dojo Data Grid – Additional Features
• Sorting, Opening Docs, Searching, Editing
• Dojo EnhancedGrid
• Conversion
• Plugins
• Dojo TreeGrid
• Categorization
• Counts and Totals 3
![Page 16: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/16.jpg)
Dojo Data Grid Control
• Availability
• Extension Library
• 8.5.3 Upgrade Pack 1
• Notes 9
• Creates a Dojo DataGrid
4
![Page 17: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/17.jpg)
Why Use the Dojo Data Grid?
• It’s not a view panel
• Feature-rich
• Adjustable columns, sorting, editing…
• Dojo is already on the Domino server
• Enhanced plugins available
5
![Page 18: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/18.jpg)
Creating a Dojo Data Grid
1. Create REST Service to provide data
2. Add the Dojo Data Grid control and bind to the REST service
3. Add Dojo Data Grid Columns
6
![Page 19: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/19.jpg)
REST Service
• REST is a standard for client-server data exchange on the web
• Common method for providing data to a grid
• REST Service Control (ExtLib, 8.5.3 UP1, R9)
• Data Access > REST Service
7
![Page 20: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/20.jpg)
REST Service - Creation
1. Add REST Service control to the page
2. Select the service type
• basics > service > + > xe:viewJsonService
3. Set the contentType to application/json
• basics > service > contentType
4. Select the view
• basics > service > viewName
5. Set defaultColumns to true
• basics > service > defaultColumns 8
![Page 21: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/21.jpg)
REST Service - Customization
• Compute columns
• System columns
• Roll your own
9
![Page 22: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/22.jpg)
REST Service – Verification
• Set pathInfo
• All Properties > basics > pathInfo
• Test it
• Server.com/dbname.nsf/XPage.xsp/pathInfoName
10
![Page 23: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/23.jpg)
Creating a Dojo Data Grid
1. Create REST Service to provide data
2. Add the Dojo Data Grid control and bind to the REST service
3. Add Dojo Data Grid Columns
11
![Page 24: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/24.jpg)
Default Grid Features
• Infinite scrolling
• Adjustable column widths
• Row highlighting
• Extended selection mode
• Sortable columns
• Multiple row entries
12
![Page 25: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/25.jpg)
Additional Grid Properties
• rowSelector
• autoHeight
• rowsPerPage
• escapeHTMLInData
• loadingMessage
• errorMessage
• dir
13
![Page 26: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/26.jpg)
Dojo Attributes
• More grid features are available, but not via properties
• e.g. Column Reordering, Grid Width
• Dojo > Dojo attributes:
or
• All Properties > dojo > dojo attributes
14
![Page 27: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/27.jpg)
Column Reordering
• Allows user to rearrange columns
• Set via dojo attribute
15
![Page 28: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/28.jpg)
Column Reordering
• Alternate Method of Setting Attribute
16
![Page 29: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/29.jpg)
Grid Width
• By default, takes up width of container
• autoWidth attribute sizes to required width
• Set via dojo attribute
17
![Page 30: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/30.jpg)
Grid Column Properties
• label
• width
• hidden
• editable
• formatter
• Example: format to all upper case
function allUpper(value) {
return value.toUpperCase();
}
18
![Page 31: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/31.jpg)
Sorting
• Automatically attempts to provide ascending and descending sorting on all columns
• Each sort only works if enabled in underlying view
19
![Page 32: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/32.jpg)
Preventing Sort Options
• Attach a function to the canSort property of grid • Receives column index number
• 1-based index
• Ascending sort is positive number, descending is negative
• Returns true or false
• Run code onClientLoad of page to attach function • Example: Allow even numbered columns to sort
dijit.byId('#{id:djxDataGrid1}').canSort = function(col){
if (col % 2 == 0) {
return true;
} else {
return false;
}
};
20
![Page 33: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/33.jpg)
Opening Documents
• Link not built-in
• Row click events: onRowClick, onRowDblClick
• Client JavaScript
• Events receive an argument with many properties
• Code varies based on REST service type
21
![Page 34: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/34.jpg)
REST Service Output
viewJsonService viewItemFileService
22
![Page 35: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/35.jpg)
Open Doc - viewJsonService
var grid = arguments[0].grid;
var index = arguments[0].rowIndex;
var item = grid.getItem(index);
var unid = item[‘@unid’];
var url = ‘MyPageName.xsp?documentId=‘ + unid +
‘&action=openDocument’;
window.document.location.href = url;
23
![Page 36: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/36.jpg)
Open Doc - viewItemFileService
var index = arguments[0].rowIndex;
var unid = REST_SERVICE_NAME._items[index].attributes[‘@unid’];
var url = ‘MyPageName.xsp?documentId=’ + unid +
‘&action=openDocument’;
window.document.location.href = url;
24
![Page 37: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/37.jpg)
Search – Full Text
• Same steps as other display controls
• Steps:
1. Create search field and bind to scope var
2. Set REST service’s search property to scope var
3. Add button that triggers partial refresh on grid and REST service
• Cannot sort results
• DB must be full-text indexed
25
![Page 38: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/38.jpg)
Editable Columns
• Set column’s editable property to true
• Double-click cell to change to edit mode
• Save the changes – one line of client JavaScript • REST_SERVICE_ID.save()
• Use the jsId property if defined (else, id)
• **Does not work without grid autoHeight set
• Undo changes – one line of JavaScript (in theory) • REST_SERVICE_ID.revert()
• Partial refresh on grid has same effect 26
![Page 39: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/39.jpg)
Editable Columns – Field Types
• cellType property
• Cell (default) – plain text
• Select – drop-down list (compute options w/ SSJS)
• Bool – checkbox
• AlwaysEdit – not a field type
• RowIndex – nothing to do with editing!
27
![Page 40: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/40.jpg)
Editable Columns – Field Types
• Edit date field with date picker
• 1 – Include module: dojox.grid.cells.DateTextBox
• 2 – Set cell type: dojox.grid.cells.DateTextBox
• Only works in Notes 9
28
![Page 41: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/41.jpg)
Editable Columns
• REST service’s save() function can accept callbacks
• Useful for displaying an error if save fails
var saveCallbacks = {onError: function()
{alert('There was an error saving your changes.');}};
restServiceID.save(saveCallbacks);
• Editable columns work with viewItemFileService, but require a Web Site document to work with viewJsonService
• Can only edit columns mapped to a single field
• Grid has singleClickEdit property
• Highlighting changes
29
![Page 42: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/42.jpg)
HTML Columns
• Create custom column in REST service (or use existing view column) with HTML content
• Add Grid Column to display HTML content column
• Set Grid property escapeHTMLInData = false
• Not a good idea – vulnerable to XSS
30
![Page 43: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/43.jpg)
Icon Columns
• Doesn’t work as pass-thru HTML
• Requires column formatter function (client JS)
• Formatter can conditionally return <IMG> tag
• Does not require escapeHTMLInData property
• Much more secure for all passthru HTML
31
![Page 44: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/44.jpg)
Dojo EnhancedGrid
• Dojo module that extends DataGrid
• Already available on the server
• Provides enhanced features via plugins
• Check for available features based on Domino/Dojo version
• Domino 8.5.3 – Dojo 1.6
• Domino 9 – Dojo 1.8
• http://dojotoolkit.org/reference-guide/1.6/dojox/grid/EnhancedGrid.html
32
![Page 45: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/45.jpg)
Converting to EnhancedGrid
• Dojo Data Grid control creates a Dojo DataGrid
• You can modify to create a Dojo EnhancedGrid
1. Load the EnhancedGrid module
2. Set grid Dojo type
3. Load required style sheets
33
![Page 46: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/46.jpg)
Converting to EnhancedGrid
• 1 - Load the EnhancedGrid module on the page
• Resources > Add > Dojo Module
• dojox.grid.EnhancedGrid
34
![Page 47: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/47.jpg)
Converting to EnhancedGrid
• 2 - Set grid Dojo type to dojox.grid.EnhancedGrid
• Properties > Dojo > Dojo type
35
![Page 48: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/48.jpg)
Converting to EnhancedGrid
• 3 - Load required style sheets
• Load relative to the Domino server path
<xp:styleSheet
href="/.ibmxspres/dojoroot/dojox/grid/resources/Grid.css">
</xp:styleSheet>
<xp:styleSheet
href="/.ibmxspres/dojoroot/dojox/grid/resources/EnhancedGrid.css">
</xp:styleSheet>
36
![Page 49: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/49.jpg)
Verify EnhancedGrid
37
![Page 50: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/50.jpg)
EnhancedGrid Plugin - DnD
• Provides ability to drag and drop columns, rows, and cells
• Configuration object defines options
• Add a row selector to drag and drop rows
• Usage
1. Select content to drag
2. Release mouse button
3. Click on the data to move it
• IMPORTANT: When cells are moved, changes are automatically saved
38
![Page 51: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/51.jpg)
EnhancedGrid Plugin - DnD
1. Load the DnD plugin
• Properties > Resources > Add > Dojo Module
• dojox.grid.enhanced.plugins.DnD
39
![Page 52: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/52.jpg)
EnhancedGrid Plugin - DnD
2. Add plugin to grid as an attribute
• Dojo > Add
• Name: plugins
• Value: {dnd: {dndConfig:{} } }
• All selection types enabled by default
40
![Page 53: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/53.jpg)
EnhancedGrid Plugin - Filter
• Adds a filter bar
• Up to 3 Filtering rules
• Match all rules or any rule
• Select column to filter
• Select matching condition (is, contains, starts with…)
• No coding required!!
• Results are sortable
41
![Page 54: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/54.jpg)
EnhancedGrid Plugin - Filter
1. Load the Filter plugin
• Properties > Resources > Add > Dojo Module
• dojox.grid.enhanced.plugins.Filter
42
![Page 55: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/55.jpg)
EnhancedGrid Plugin - Filter
2. Add plugin to grid as an attribute
• Dojo > Add • Name: plugins
• Value: {filter: true}
43
![Page 56: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/56.jpg)
EnhancedGrid Plugin - Filter
3. Add a stylesheet
<xp:styleSheet
href="/.ibmxspres/dojoroot/dojox/grid/enhanced/resources/claro/EnhancedGrid.css">
</xp:styleSheet>
44
![Page 57: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/57.jpg)
EnhancedGrid – More Plugins
• Provides ability to preview or print grid contents
• Print/Preview All, Selected, Custom
• Exporter
• Provides grid data for export – you handle the rest
• Export All, Selected, Custom
• Menu
• Context menus for columns, rows, cells, selected
• Build with dijit menus and dijit menu items
45
![Page 58: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/58.jpg)
Dojo TreeGrid
• Provides multi-level categorization
• Can provide column totals and counts
• Extends Dojo DataGrid
• Cannot use EnhancedGrid plugins
• Poor documentation
• Apparently cannot use Dojo Data Grid control
46
![Page 59: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/59.jpg)
TreeGrid - Implementation
• Programmatic -- NOT the Dojo Data Grid Control
1. Include required dojo modules and stylesheets
2. Set XPage to parse dojo on load
3. Define a <div> to render the grid and size it
4. Execute code onClientLoad to configure and generate the grid
5. Provide data for the grid (XAgent) • Complicated format
...
{ id: 'AS', name:'Asia', type:'continent',
children:[{_reference:'CN'}, {_reference:'IN'}] },
{ id: 'CN', name:'China', type:'country' },
{ id: 'IN', name:'India', type:'country' },
...
47
![Page 60: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/60.jpg)
TreeGrid – Totals and Counts
• Inline when collapsed, below when expanded
• Requires a different (but simpler) JSON model {id:'AK', type: 'state', state:'AK', numPeople: 3,
childItems:[
{id:'B3093953178C98E905257838007ABC48', firstname:'Bella', lastname: 'Martin', valueToAdd: 2},
{id:'7FDB9CCDE7D6923E05257838007ABC1E', firstname:'Brian', lastname: 'Leggett', valueToAdd: 2}
] },
• Add an aggregate property • Set to “sum” or “cnt”
• Numeric columns handled properly; text concatenated
• Formatter functions can modify display (and hide text)
48
![Page 61: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/61.jpg)
TreeGrid – Data Format Caveat
• Simpler JSON format causes blank rows when used without counts/totals
49
![Page 62: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/62.jpg)
TreeGrid - Features
• defaultOpen – expanded or collapsed
• openAtLevels – auto expand all categories with less items than the defined amount
• Doesn’t work with ForestStoreModel
• expandoCell – column to display expand icon
50
![Page 63: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/63.jpg)
Questions?
Data Grid Blogs: http://xcellerant.net/dojo-grids-in-xpages/
Twitter: @Balassaitis
51
![Page 64: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/64.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Questions????
7
Use the Q&A pane in WebEx to ask questions We will answer your questions verbally
![Page 65: Dojo Grids in XPages](https://reader030.fdocuments.us/reader030/viewer/2022020101/5472a1bbb4af9fc30a8b4f73/html5/thumbnails/65.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Question and Answer Time!
8
Teamstudio Questions? [email protected] 877-228-6178
TLCC Questions?
[email protected] [email protected] 888-241-8522 or 561-953-0095
Brad Balassaitis Howard Greenberg Taline Badrikian
Upcoming Events: TLCC Spring Sale, ends tomorrow!!!
MWLUG in Indianapolis and TackItOn
ICON UK in Brighton and TackItOn
30% off all Teamstudio tools and 15% off all Ytria tools
Next webinar July 24th – Making Mobile App Dev Easy
SoftBank World 2013 July 23-24 in Japan
#XPages
@Balassaitis
@TLCCLtd
@Teamstudio
@PaulDN
Paul Della-Nebbia