Spread.Views and the Trellis Layout

If you want to create a card style layout that can be used to collaborate with others or to keep track of a process, the Trellis view in Spread.Views may be just what you need. The following example uses a Trellis view for keeping track of a bid process. Use the following steps to create the example:

  1. Add the following references to your page. The gridLayoutEngine reference is used for a basic grid. The trellisStrategy reference is required for a Trellis view. 
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js" type="text/javascript"></script>
<script src="./common/gc.spread.common.10.0.0.min.js" type="text/javascript"></script>
<script src="./gc.spread.views.dataview.10.0.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./gc.spread.views.dataview.10.0.0.css">
<script src="./plugins/gc.spread.views.gridlayout.10.0.0.min.js" type="text/javascript"></script>
<script src="./plugins/gc.spread.views.trellisgrouping.10.0.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./plugins/gc.spread.views.trellisgrouping.10.0.0.css">
  1. Set the styles and colors for the items in the Trellis view and the height and width for the grid.
 html {
position: fixed;
width: 100%;
}
.group-item-title {
border: none;
color: #f1f1f1;
background: #C48C43;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0.4em;
font-size: 16px;
}
.group-item-description {
padding: 8px;
}
.gc-trellis-group-header-inner {
padding: 0 0.4em;
font-size: 16px;
}
.group-item-container {
height: 100%;
font-size: 12px;
overflow: hidden;
position: relative;
}
.group-item-container-inner {
height: 95%;
border-radius: 4px;
overflow: hidden;
color: #f1f1f1;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.10);
}
.finish {
background: #603E50;
}
.eighty-per {
background: #695877;
}
.fifty-per {
background: #73738E;
}
.thirty-per {
background: #7C9EAA;
}
.start {
background: #8FC8C9;
}
.finish-head {
background: #533747;
}
.eighty-per-head {
background: #5F506B;
}
.fifty-per-head {
background: #6A6B83;
}
.thirty-per-head {
background: #76949F;
}
.firstcol {
background: #C0C0C0;
}
.firstcol-header {
background: #808080;
}
.four {
background: #C0C0C0;
}
.four-header {
background: #808000;
}
.start-head {
background: #86BBBD;
}
.trellis-strategy .gc-trellis-group-header {
line-height: 24px;
}
</style>
</head>
<body style="margin:0;position:absolute;top:0;bottom:0;left:0;right:0;font-size:14px;">
<div style="height: 100%; position: relative">
<div style="height:90%;">
<div id="grid1" style="height:100%;"></div>
</div>
</div>
  1. Define variables for dataView and trellisStrategy. 
var dataView;
var trellisStrategy;
  1. Create a row template and use a range of values to assign a color to the card item. 
var rowTemplate = '<div class="group-item-container">' +
'<div class="group-item-container-inner {{? it.progress==100}}finish{{?? it.progress>=80}}eighty-per{{?? it.progress>=50}}fifty-per{{?? it.progress>=40}}four{{?? it.progress>=30}}thirty-per{{?? it.progress>=20}}
firstcol{{??}}start{{?}}">' +
'<div data-column="title" class="group-item-title {{? it.progress==100}}finish-head{{?? it.progress>=80}}eighty-per-head{{?? it.progress>=50}}fifty-per-head{{?? it.progress>=40}}four-header{{?? it.progress>=30}}
thirty-per-head{{?? it.progress>=20}}firstcol-header{{??}}start-head{{?}}"></div>' +
'<div data-column="description" class="group-item-description"></div>' +
'</div></div>';
  1. Specify the column items from the JSON file. 
var columns = [{
id: 'title',
name: 'title',
dataField: 'title'
}, {
id: 'description',
name: 'description',
dataField: 'description'
}, {
id: 'progress',
dataField: 'progress'
}];
  1. Specify the file to get the data from. 
$.getJSON('trellisviewdatafile.json', function(data)
  1. Create a trellis strategy. 
{
trellisStrategy = new GC.Spread.Views.Plugins.TrellisGrouping({
panelUnitWidth: 190
});

  1. Create a basic view. 

    dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.GridLayout

  2. Create a group strategy and specify the items in the group. 

grouping: [{
field: 'work',
header: {
height: 24
}
}, {
field: 'category',
header: {
height: 24
}
}],
  1. Assign the row template and set the group strategy to the trellis strategy. 
rowTemplate: rowTemplate,
rowHeight: 120,
groupStrategy: trellisStrategy

That is all you need to create a Trellis view in Spread.Views.

SpreadViewsTrellis

Download Now!

Here is the complete code example: 

<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js" type="text/javascript"></script>
<script src="./common/gc.spread.common.10.0.0.min.js" type="text/javascript"></script>
<script src="./gc.spread.views.dataview.10.0.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./gc.spread.views.dataview.10.0.0.css">
<script src="./plugins/gc.spread.views.gridlayout.10.0.0.min.js" type="text/javascript"></script>
<script src="./plugins/gc.spread.views.trellisgrouping.10.0.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./plugins/gc.spread.views.trellisgrouping.10.0.0.css">
<style>
html {
position: fixed;
width: 100%;
}
.group-item-title {
border: none;
color: #f1f1f1;
background: #C48C43;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0.4em;
font-size: 16px;
}
.group-item-description {
padding: 8px;
}
.gc-trellis-group-header-inner {
padding: 0 0.4em;
font-size: 16px;
}
.group-item-container {
height: 100%;
font-size: 12px;
overflow: hidden;
position: relative;
}
.group-item-container-inner {
height: 95%;
border-radius: 4px;
overflow: hidden;
color: #f1f1f1;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.10);
}
.finish {
background: #603E50;
}
.eighty-per {
background: #695877;
}
.fifty-per {
background: #73738E;
}
.thirty-per {
background: #7C9EAA;
}
.start {
background: #8FC8C9;
}
.finish-head {
background: #533747;
}
.eighty-per-head {
background: #5F506B;
}
.fifty-per-head {
background: #6A6B83;
}
.thirty-per-head {
background: #76949F;
}
.firstcol {
background: #C0C0C0;
}
.firstcol-header {
background: #808080;
}
.four {
background: #C0C0C0;
}
.four-header {
background: #808000;
}
.start-head {
background: #86BBBD;
}
.trellis-strategy .gc-trellis-group-header {
line-height: 24px;
}
</style>
</head>
<body style="margin:0;position:absolute;top:0;bottom:0;left:0;right:0;font-size:14px;">
<div style="height: 100%; position: relative">
<div style="height:90%;">
<div id="grid1" style="height:100%;"></div>
</div>
</div>
<script type="text/javascript">
var dataView;
var trellisStrategy;
var rowTemplate = '<div class="group-item-container">' +
'<div class="group-item-container-inner {{? it.progress==100}}finish{{?? it.progress>=80}}eighty-per{{?? it.progress>=50}}fifty-per{{?? it.progress>=40}}four{{?? it.progress>=30}}thirty-per{{?? it.progress>=20}}firstcol{{??}}start{{?}}">' +
'<div data-column="title" class="group-item-title {{? it.progress==100}}finish-head{{?? it.progress>=80}}eighty-per-head{{?? it.progress>=50}}fifty-per-head{{?? it.progress>=40}}four-header{{?? it.progress>=30}}thirty-per-head{{?? it.progress>=20}}firstcol-header{{??}}start-head{{?}}"></div>' +
'<div data-column="description" class="group-item-description"></div>' +
'</div></div>';
var columns = [{
id: 'title',
name: 'title',
dataField: 'title'
}, {
id: 'description',
name: 'description',
dataField: 'description'
}, {
id: 'progress',
dataField: 'progress'
}];
$(document).ready(function() {
$.getJSON('trellisviewdatafile.json', function(data) {
trellisStrategy = new GC.Spread.Views.Plugins.TrellisGrouping({
panelUnitWidth: 190
});
dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.GridLayout({
grouping: [{
field: 'work',
header: {
height: 24
}
}, {
field: 'category',
header: {
height: 24
}
}],
rowTemplate: rowTemplate,
rowHeight: 120,
groupStrategy: trellisStrategy
}));
})
});
</script>
</body>
</html>

You can download the data file from here: trellisviewdatafile.

MESCIUS inc.

comments powered by Disqus