Getting started with SlickGrid

https://groups.google.com/d/topic/knockoutjs/OsvpsIfI_fs/discussion

by ericjohannsen

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<script src="http://mleibman.github.com/SlickGrid/lib/jquery.event.drag-2.0.min.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.grid.js"></script>
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/slick.grid.css">
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/css/smoothness/jquery-ui-1.8.5.custom.css">
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/examples/examples.css">
<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.dataview.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/controls/slick.pager.js"></script>
<link rel="stylesheet" href="https://raw.github.com/mleibman/SlickGrid/master/controls/slick.pager.css">
<script src="https://raw.github.com/mleibman/SlickGrid/master/controls/slick.columnpicker.js"></script>
<link rel="stylesheet" href="https://raw.github.com/mleibman/SlickGrid/master/controls/slick.columnpicker.css">
<script src="https://raw.github.com/mleibman/SlickGrid/master/plugins/slick.rowselectionmodel.js"></script>
 <div >                                
    <div class="grid-header" style="width:100%;">
        <span style="float:right;display:inline-block;">
            Search:
            <input type="text" id="txtSearch" value="" />
        </span> 
    </div>
    <div id="myGrid" style="width:100%;height:1300px;"></div>
    <div id="pager" style="width:100%;height:20px;"></div>
</div>

JavaScript

var dataView;
var grid;
var data = [];
var columns = [
{
    id: "Description",
    name: "Description",
    field: "Description",
    sortable: true,
    width: 200,
    minWidth: 200},

{
    id: "unique_id",
    name: "unique_id",
    field: "id",
    sortable: true,
    width: 120}
];

var options = {
    enableCellNavigation: true,
    forceFitColumns: true,
    topPanelHeight: 25
};

var sortcol = "LeaseID";
var sortdir = 1;
var searchString = "";


function myFilter(item, args) {
    var myDescription = item["Description"].toUpperCase();

    var mySearch = args.searchString.toUpperCase();

    if (mySearch != "" && myDescription.indexOf(mySearch) == -1) {
        return false;
    }
    return true;
}

function comparer(a, b) {
    var x = a[sortcol],
        y = b[sortcol];
    return (x == y ? 0 : (x > y ? 1 : -1));
}


$(".grid-header .ui-icon").addClass("ui-state-default ui-corner-all").mouseover(function(e) {
    $(e.target).addClass("ui-state-hover")
}).mouseout(function(e) {
    $(e.target).removeClass("ui-state-hover")
});


$(function() {

    // prepare the data
    data[0] = {
        id: '125',
        EntityName: 'New York',
        Classification: 'Buildings',
        LeaseID: '1234 add from ie7',
        Description: 'asdf',
        Version: '4',
        Category: 'Lessee',
        Status: 'In Progress',
        Options: 'Options'
    };
    data[1] = {
        id: '120',
        EntityName: 'New York',
        Classification: 'Buildings',
        LeaseID: '12345uii',
        Description: '',
        Version: '1',
        Category: 'Lessor',
        Status: 'In Progress',
        Options: 'Options'
    };
    data[2] = {
        id: '105',
        EntityName: 'Chicago',
        Classification: 'Parking',
        LeaseID: 'u78979',
        Description: 'Lessee Lease',
        Version: '1',
        Category: 'Lessee',
        Status: 'In Progress',
        Options: 'Options'
    };
    data[3] = {
        id: '103',
        EntityName:...