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">

  2. 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>

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

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

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

  6. Specify the file to get the data from.
    $.getJSON('trellisviewdatafile.json', function(data) 

  7. Create a trellis strategy.
    {
    trellisStrategy = new GC.Spread.Views.Plugins.TrellisGrouping({
    panelUnitWidth: 190
    });

  8. Create a basic view.
    dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.GridLayout 

  9. Create a group strategy and specify the items in the group.
    grouping: [{
    field: 'work',
    header: {
    height: 24
    }
    }, {
    field: 'category',
    header: {
    height: 24
    }
    }],

  10. 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" />
<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.