JavaScript Grid Resizable

by Kaeden

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="wrapper">
<div id="standardGridWrapper">
    <div id="standardGrid"></div>
</div>
<BR/>
<div id="tabletGridWrapper">
    <div id="tabletGrid"></div>
</div>
</div>

CSS

#standardGridWrapper {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 100px;    
}

#tabletGridWrapper {
    position: absolute;
    top: 440px;
    left: 6px;
    right: 100px;    
}

#tabletGrid .jqx-grid-cell-hover {
    background: #FFFFFF !important;
}

#tabletGrid .columnLabel {
    padding-left: 4px;
}

#tabletGrid .valueLabel {
    padding-left: 4px;
}

#tabletGrid .gridCell {
    padding-top: 4px;
}

#standardGrid .jqx-widget-header, #tabletGrid .jqx-widget-header {
    color: #FFFFFF;
    border-color: #AAAAAA;
    background-color: #003564;
    background-image: -moz-linear-gradient(top, #003564, #004d91);
    background-image: -ms-linear-gradient(top, #003564, #004d91);
    background-image: -o-linear-gradient(top, #003564, #004d91);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#003564), to(#004d91));
    background-image: -webkit-linear-gradient(top, #003564, #004d91);
    background-image: linear-gradient(top, #003564, #004d91);
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
    font-weight: bold;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#standardGrid .jqx-grid-cell.jqx-grid-cell-pinned.jqx-grid-cell-filter-row {
    background-color: #004D91 !important;
}

JavaScript

function generatedata(rowscount, hasNullValues) {
    // prepare the data
    var data = new Array();
    if (rowscount == undefined) rowscount = 100;
    var firstNames =
    [
        "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
    ];

    var lastNames =
    [
        "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
    ];

    var productNames =
    [
        "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Caramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
    ];

    var priceValues =
    [
         "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
    ];

    for (var i = 0; i < rowscount; i++) {
        var row = {};
        var productindex = Math.floor(Math.random() * productNames.length);
        var price = parseFloat(priceValues[productindex]);
        var quantity = 1 + Math.round(Math.random() * 10);

        row["id"] = i;
        row["available"] = productindex % 2 == 0;
        if (hasNullValues == true) {
            if (productindex % 2 != 0) {
                var random = Math.floor(Math.random() * rowscount);
                row["available"] = i % random == 0 ? null : false;
            }
        }
        row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
        row["middlename"] = lastNames[Math.floor(Math.random() * firstNames.length)];
        row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
        row["name"] = row["firstname"] + " " + row["lastname"]; 
        row["productname"] = productNames[productindex];
        row["price"] = price;
        row["quantity"] = quantity;
...