C9 Custom Grid

copy/paste issue

by AntonLapshin

HTML

<script src="https://rawgithub.com/Celebio/SlickGrid/master/slick.core.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/lib/jquery.event.drag-2.2.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/slick.grid.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/Celebio/SlickGrid/master/slick.grid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.0/jquery.mCustomScrollbar.concat.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.0/jquery.mCustomScrollbar.min.css">
<div id="container"></div>

CSS

#container {
    width: 600px;
    height: 300px;
}

.c9grid {
    font-family: Open Sans, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 10pt;
    width: 100%;
    height: 100%;
    position: relative;
    
    > .header {
        background-color: rgb(248,248,248);
        padding: 12px 12px 0 0;
        
        .fields {
            display: inline-block;
            font-weight: bold;
            padding-left: 12px;
            margin-bottom: 12px;
            
            span {
                vertical-align: middle;
                color: rgb(117,129,145);
            }
            
            .label {
                border-radius: 3px;
                padding: 3px 20px 3px 5px;
                margin-left: 2px;
                color: white;
                position: relative;
                pointer-events: none;
                
                &:before {
                    font-weight: normal;
                    content: 'x';
                    position: absolute;
                    top: 2px;
                    right: 6px;
                    color: white;
                    cursor: pointer;
                    pointer-events: all;
                }
            }
            
            &.sort .label {
                background-color: rgb(117,129,145);
            }

            &.group .label {
                background-color: rgb(141,219,206);
            }

            &.aggregation .label {
                background-color: rgb(220,142,142);
            }            
        }
    }
    
    .grid {
        width: 100%;
        height: 100%;
        
        .slick-viewport {
            overflow: hidden;
        }
        
        .mCSB_inside>.mCSB_container {
            margin-right: 15px;
        }
        
        .slick-header-columns {
            background-color: #BABFC3;
            color: white;
            font-size: 10pt;
            font-weight: bold;      
         ...

JavaScript

// Step 1: Select the style element and change it to text/less
$('head style[type="text/css"]').attr('type','text/less');

// Step 2: Set development mode to see errors
less.env = 'development';

// Step 3: Tell Less to refresh the styles
less.refreshStyles();

(function(){
	var defaultOptions = {
		editable: false,
		enableAddRow: false,
		enableCellNavigation: true,
		asyncEditorLoading: false,
		autoEdit: false
	};    
    
    var LAYOUT = '<div class="c9grid">' +  
        		   '<div class="header">' +
        		     '<div class="fields sort"><span>Sort by: </span><span class="label">_id</span><span class="label">name</span></div>' +
         		     '<div class="fields group"><span>Group by: </span><span class="label">isActive</span></div>' +
        		     '<div class="fields aggregation"><span>Aggregation: </span><span class="label">company</span></div>' +
        		   '</div>' +
        		   '<div class="grid"></div>' +
        		   '<div class="popup">' +
        		   	 '<div class="header"><span class="title"></span><span class="close">x</span></div>' + 
        			 '<div data-type="sort" class="item sort">Sort By</div>' + 
        			 '<div data-type="group" class="item group">Group By</div>' +
        			 '<div data-type="aggregation" class="item aggregation">Function / Aggregation</div>' +
    			   '</div>' + 
				 '</div>';       
    
    window.C9Grid = function(container$, columns, data){
        this.container$ = container$;
        this.columns = columns;
        this.data = data;

        var columnsDef = $.map(columns, function(name, i){
            return {
                id: name, name: name, field: name, resizable: true
            };
        });
        
        container$.append(LAYOUT);
       
        this.grid = new Slick.Grid(container$.find('.grid'), data, columnsDef, defaultOptions);	
        //this.grid.setSelectionModel(new Slick.CellSelectionModel());
        this.grid.autosizeColumns();
       ...