Ever wanted to do more than just the default Grid in Umbraco? Learn how the Umbraco Grid can be extended to do more than what is just available out of the box. You will see how to create new grid items from scratch, use other packages to easily create grid items, how you can customize Umbraco’s rendering of the Grid. And most importantly – when NOT to use the Grid - yes there are cases

1. THE UMBRACO GRID
ON STEROIDS
BY ANDERS BURLA JOHANSEN

3. PRESENTER
• Anders Burla Johansen
• CEO of Tea Solutions
• Co-creator of Tea Commerce
• @andersburla

4. SET THE
EXPECTATIONS • The Grid 101
• Your own Grid Editors
• The Grid on Steriods
• Lessons learned

5. WHAT IS THIS
GRID THING?

6. WHAT IS THIS
GRID THING?

7. WHAT IS THIS
GRID THING?
• Better editor experience
• Dynamic layout
• Design responsibility & trust

8. STANDARD
GRID EDITORS
• What is a grid editor?
• 6 editors out of the box

9. • Mix between hardcoded and
dynamic template
• Document type specific grid
• What the starter kit does
MULTIPLE GIRD
& ROW LAYOUTS

10. CREATE YOUR
OWN GRID
EDITORS
• Custom Grid Editor
• LeBlender Editor
• Doc Type Grid Editor

11. • Like property editors
• package.manifest
• editor.html
• editor.controller.js
• editor.cshtml
CUSTOM
GRID EDITOR

12. CUSTOM
GRID EDITOR
Editor experience

13. CUSTOM
GRID EDITOR
Frontend

14. CUSTOM GRID EDITOR
PROS
• Amazing editor experience
• Need to know AngularJS
CONS
• Time consuming = more expensive
• Need to know AngularJS

15. LEBLENDER
EDITOR
• Package by Lecoati
• UI for editing Grid Editors
• Built using data types
• Updates grid.editors.config

16. LEBLENDER
EDITOR
Editor experience

17. LEBLENDER
EDITOR
Frontend

18. LEBLENDER EDITOR
PROS
• UI for creating Grid Editors
• Works with most data types
• Easy to have/make editor preview
mode
CONS
• Doesn’t work with NestedContent
• Model is LeBlenderModel
• Editor UI is limited to right-hand side
• No data validation

19. DOC TYPE GRID
EDITOR
• Package by Matt & Lee
• Just document types
• Tabs, data types, description,
validation etc.

20. DOC TYPE GRID
EDITOR
• Register in
grid.editors.config.js
• Changed a bit of the default

21. DOC TYPE GRID
EDITOR
Editor experience

22. DOC TYPE GRID
EDITOR
Frontend

23. DOC TYPE GRID EDITOR
PROS
• Just Umbraco document types
• Model is IPublishedContent
• Umbraco 7 UI
• Easy to make editor preview mode
CONS
• Editor UI is limited to right-hand side
• Manual change grid.editors.config.js

24. THE GRID ON
STEROIDS

25. GRID SETTINGS
& STYLES
• Edit row & cell settings
• Settings = HTML attributes
• Styles = inline styles
• 10 prevalue editors
• Limit to rows/cells/row
names

26. GRID SETTINGS
& STYLES

27. CUSTOM GRID
RENDERING
• Uses Bootstrap3 as default
• Use other CSS frameworks

28. NOW LETS USE IT

29. GRID EDITORS
• Used Doc Type Grid Editor
• 10 common used components

30. GRID EDITORS
• Image grid editor
• Doc Type Grid Editor
• Why “replace” Umbraco’s
image grid editor?

31. CUSTOM ROW
SETTINGS
• Make a better editor experience

32. CUSTOM ROW
SETTINGS
• Is a custom property editors

33. CUSTOMIZED
GRID
RENDERING
• Modified Bootstrap3.cshtml
• Dynamic page builder

34. LIVE DEMO

35. COPY/PASTE
GRID CONTENT
• Easy copy/paste grid or row
• Multi-lingual with Vorto

36. LESSONS
LEARNED

37. LESSONS
LEARNED
• Use the grid when it make sense
• Keep it simple!
• Doc Type Grid Editor is easy and versatile
• Use row/cell settings – not styles
• Multiple grid and row layouts is time consuming
• 3 different content ways
• Hardcode
• Ribbons – Nested Content
• Grid page – 1 grid layout, row config for columns

38. QUESTIONS?
• Anders Burla Johansen
• abj@teasolutions.dk
• @andersburla