SlickGrid
copy/paste issue
HTML
<script src="https://cdn.rawgit.com/Celebio/SlickGrid/master/lib/jquery.event.drag-2.2.js"></script>
<script src="https://cdn.rawgit.com/Celebio/SlickGrid/master/slick.core.js"></script>
<script src="https://cdn.rawgit.com/Celebio/SlickGrid/master/slick.grid.js"></script>
<script src="https://cdn.rawgit.com/Celebio/SlickGrid/master/slick.dataview.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/Celebio/SlickGrid/master/slick.grid.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/Celebio/SlickGrid/master/slick-default-theme.css">
<div id="oh-my-griddy-aunt"></div>
CSS
::-webkit-scrollbar
{
width: 12px;
background-color: #B9BACC;
}
::-webkit-scrollbar-track
{
color: #fff;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb
{
color: #96A9BB;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
body
{
font-family: Arial, Helvetica, sans-serif;
background-color: #131313;
position: absolute;
top: 5px;
bottom: 5px;
left: 5px;
right: 5px;
}
#oh-my-griddy-aunt
{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
font-size: 12px;
background-color: #ECEEE9;
}
.toggle
{
height: 16px;
width: 16px;
display: inline-block;
}
.toggle.expand
{
background: url(http://tinyurl.com/k9ejb3a/expand.gif) no-repeat center center;
}
.toggle.collapse
{
background: url(http://tinyurl.com/k9ejb3a/collapse.gif) no-repeat center center;
}
/*--- generic slickgrid padding pollyfill ----------------------*/
.dynamic-row { padding-bottom: 1px!important; }
.dynamic-row-padding { }
.dynamic-row-padding-inner { border-bottom: none; }
.dynamic-row-padding-inner div.slick-cell { border-bottom: none; }
.dynamic-row-padding-last { }
.dynamic-row-parent { }
.dynamic-row-parent div.slick-cell { border-bottom: none; }
div.dynamic-row-yin { background: #fff!important; }
div.dynamic-row-yang { background: #FAFAFA!important; }
.slick-cell.active
{
border-color: transparent;
border-right: 1px dotted silver;
border-bottom: 1px solid...
JavaScript
////////////////////////////////////////////////////////////////////////////////
//example codez re trying to create a grid with rows of dynamic height to
//cater for folks that wanna bung loads of stuff in a field & see it all...
//by [email protected] ~ visit: www.violet313.org/slickgrids
//have all the fun with it ;) vxx.
////////////////////////////////////////////////////////////////////////////////
modSlickgridNoResize=(
function()
{
var _dataView=null;
var _grid=null;
var _data=[];
var _detailField="duration";
//////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////
var getKeyDynoCellStyle=function(row) {return "dynamic-cell"+"."+_detailField+"."+row;}
//////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////
var getPaddingItem=function(parent , offset)
{
var item={};
for (var prop in _data[0]) item[prop]=null;
item.id=parent.id+"."+offset;
//additional hidden padding metadata fields
item._collapsed= true;
item._isPadding= true;
item._parent= parent;
item._offset= offset;
return item;
}
//////////////////////////////////////////////////////////////
//this just builds our expand collapse button
//////////////////////////////////////////////////////////////
var onRenderIDCell=function(row, cell, value, columnDef, item)
{
if (item._isPadding==true) return; //render nothing
alert(item._collapsed);
return (item._collapsed ?
"<div class='toggle expand'></div>" : "<div class='toggle collapse'></div>");
}
//////////////////////////////////////////////////////////////
//provide the detail inside a ctr div for us to custom-style
//////////////////////////////////////////////////////////////
var...