DHTMLx Grid Example

HTML

<script src="https://ideaflyer.s3.amazonaws.com/dhtmlx4/dhtmlx.js"></script>
<link rel="stylesheet" href="https://ideaflyer.s3.amazonaws.com/dhtmlx4/dhtmlx.css">
<link rel="stylesheet" href="https://ideaflyer.s3.amazonaws.com/dhtmlx4/dhtmlx_custom_evolv.css">
<div id="doc3">
<div class="dashlet cdr-dashboard resizable yui-resize" id="yui-gen0">
<div class="dashlet-padding">
<div class="body scrollablePanel" style="height:734px;">
  <div class="dashboard dashboard-load-officer">
    <h2>List</h2>
    <p>items assigned to the user.</p>
    <div class="dashboard-dhtmlx">
        <div id="table-loan-officer-toolbar"></div>
        <div id="table-loan-officer" class="table-grid"></div>
    </div>
  </div>
  <a href="#" id="pasteit">Paste</a>
  <textarea id="pastebin" style="display:block;">paste bin placeholder</textarea>
  <div>
      <textarea id="tocopy" style="display:block;">05/05/2005	BUB118	Groovy	Closed	h. simpson	09/05/2004</textarea> <a href="#" id="copyit">copy</a>
  </div>
</div>
</div>
</div>
</div>

CSS

#doc3 {
  width: auto;
  *width: 56.25em;
  text-align:left;
}


.dashlet {
    border: 1px solid #ccc;
    background-color: #fff;
}
.dashlet {
    background-color: white;
    margin: 20px 0;
    padding: 0;
    position: relative;
}
.dashlet .dashlet-padding {
    padding: 8px;
}

.yui-resize {
    position: relative;
    zoom: 1;
    z-index: 0;
    *width: 56.25em;
}

#table-loan-officer { height: 500px; }
.cdr-dashboard .scrollablePanel {
    overflow: hidden !important;
}
.dashlet .body {
    overflow-x: hidden;
}
.dashboard-dhtmlx {
    position: relative;
    box-sizing: content-box;
}
  #tocopy { float: left; }
#copyit { display:inline-block; margin: 15px; }

JavaScript

var windowNewProcess = 0;
var windowFilterHelp = 0;
var windowAssumptionSet = 0;
var toolbarItemPosition = 0;
var cookieExpireDate = getCookieExpireDate();
var completedProcessNames = [];
var publishedProcesNames = [];
function getCookieExpireDate() {
    var date = new Date();
    var years = 1000 * 60 * 60 * 24 * 365 * 20;
    date.setTime(date.getTime() + years);
    return date;
}

function isColumnHidden(displayColumn,columnName){
    if(displayColumn){
       return "";
    } else {
       return columnName;
    }
}
function decorateWorkItem(grid, rowId, cell, decorate) {
    var name = cell.getValue();
    cell.setValue("<a data-sort='" + name + "' id='"+ rowId.replace("workspace://SpacesStore/","workspace") +"' href='cdr-client-form?nodeRef=" + rowId + "' title='Open Client Form'>" + name + "</a>");
}
function decorateUserName(grid, rowId, cell, decorate) {    
    var userType = decorate.column;
    if(userType == "completedBy") {
        userType = "portfolioReviewer";
    }
    for(var i=0;i<userData[userType].length;i++) {
        if(userData[userType][i]["userName"] == cell.getValue()) {
            cell.setValue(userData[userType][i]["displayName"]);
        }
    }    
}
function parseTableData(grid, params, dataTable) {
    var data = params.data;
    if(params.data && params.data.table) {
        data = data.table;
    }
    if(dataTable) {
        data = dataTable;
    }
    var table = [];
    for(var y=0;y<data.length;y++) {
        if(data[y]) {
            var row = [];
            for(var x=0;x<grid.columnIds.length;x++) {
                var val = data[y][grid.columnIds[x]];
                if(params.currencyFormat && (grid.getColType(x) == "ro")) {
                    for(var i=0;i<params.currencyFormat.length;i++) {
                        if(params.currencyFormat[i] == grid.columnIds[x]) {
                            val = val ? formatCurrency(parseCurrency(removeParenthesisForNegativeNumber(val))) : formatCurrency(0);
                 ...