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:

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.

<link rel="stylesheet" type="text/css" href="dataview.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js" type="text/javascript"></script>
<script src="dataview.min.js" type="text/javascript"></script>
<script src="plugins/gridLayoutEngine.min.js" type="text/javascript"></script>
<script src="plugins/trellisStrategy.min.js" type="text/javascript"></script>

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>

Define variables for dataView and trellisStrategy.
```
var dataView;
var trellisStrategy;
```

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>';

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'
}];

Specify the file to get the data from.

$.getJSON('trellisviewdatafile.json', function(data)

Create a trellis strategy.

{
trellisStrategy = new GC.Spread.Views.DataView.Plugins.TrellisStrategy({
panelUnitWidth: 190
});

Create a basic view.

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

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

grouping: [{
field: 'work',
header: {
height: 24
}
}, {
field: 'category',
header: {
height: 24
}
}],

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.

You can download a CTP of Spread.Views here: http://spread.grapecity.com/spreadjs/views/.

Trellis View

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" />
<link rel="stylesheet" type="text/css" href="dataview.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js" type="text/javascript"></script>
<script src="dataview.min.js" type="text/javascript"></script>
<script src="plugins/gridLayoutEngine.min.js" type="text/javascript"></script>
<script src="plugins/trellisStrategy.min.js" type="text/javascript"></script>
<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.DataView.Plugins.TrellisStrategy({
panelUnitWidth: 190
});
dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.DataView.Plugins.GridLayoutEngine({
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.