036 Dataview

by origineil

HTML

<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.dataview.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/lib/firebugx.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/lib/jquery-1.7.min.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/lib/jquery-ui-1.8.16.custom.min.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/lib/jquery.event.drag-2.2.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.core.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.formatters.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.editors.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.grid.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.groupitemmetadataprovider.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/controls/slick.columnpicker.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/controls/slick.pager.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/plugins/slick.cellrangedecorator.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/plugins/slick.cellrangeselector.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/plugins/slick.cellselectionmodel.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/plugins/slick.rowselectionmodel.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<div id="myGrid" style="width:600px;height:500px;"></div>

<!-- cell template -->
<script type="text/html" id="CardA_template">
  <div class="cell-inner" >
    <div class="cell-left">
     <table>
         <tr>
             <td>PCCN</td>
             <td>Plisn</td>
         </tr>
      <tr>
          <td><label data-bind="value:...

CSS

.contact-card-cell {
    border-color: transparent !important;
    
}
.cell-inner {
    height: 25px;
    margin: 10px;
    padding: 10px;
    background: #fafafa;
    border: 1px solid gray;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-box-shadow: 1px 1px 5px silver;
    -webkit-box-shadow: 1px 1px 5px silver;
    -webkit-transition: all 0.5s;
}
.cell-inner:hover {
    background: #f0f0f0;
}
.cell-left {
    width: 80px;
    height: 100%;
    float: left;
    border-right: 1px dotted gray;
    margin-right: 5px;
     
}
.cell-right {
      float: left;
}
.cell-main {
     margin-right: 5px; 
    width: 325px;
    height: 100%;
    border-right: 1px dotted gray;
      float: left;
}
.cell-effort-driven {
    text-align: center;
}
.slick-group-title[level='0'] {
    font-weight: bold;
}
.slick-group-title[level='1'] {
    text-decoration: underline;
}
.slick-group-title[level='2'] {
    font-style: italic;
}
/*Slick*/
 .slick-header.ui-state-default, .slick-headerrow.ui-state-default {
    width: 100%;
    overflow: hidden;
    border-left: 0px;
}
.slick-header-columns, .slick-headerrow-columns {
    position: relative;
    white-space: nowrap;
    cursor: default;
    overflow: hidden;
}
.slick-header-column.ui-state-default {
    position: relative;
    display: inline-block;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    height: 16px;
    line-height: 16px;
    margin: 0;
    padding: 4px;
    border-right: 1px solid silver;
    border-left: 0px;
    border-top: 0px;
    border-bottom: 0px;
    float: left;
}
.slick-headerrow-column.ui-state-default {
    padding: 4px;
}
.slick-header-column-sorted {
    font-style: italic;
}
.slick-sort-indicator {
    display: inline-block;
    width: 8px;
    height: 5px;
    margin-left: 4px;
    margin-top: 6px;
    float: left;
}
.slick-sort-indicator-desc {
    background: url(images/sort-desc.gif);
}
.slick-sort-indicator-asc {
    background:...