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.
