jQWidgets Grid Tests

HTML

<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxmenu.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.columnsresize.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.pager.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdropdownlist.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.storage.js"></script>
<div class="gridContainer">
    <div id="jqxgrid"></div>
</div>

CSS

body {
    background-color: #ffe;
}
.gridContainer {
    position:absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
}

JavaScript

var data = [
    ["Alfreds Futterkiste", "Maria Anders", "Germany"],
    ["Ana Trujillo Emparedados y helados", "Ana Trujillo", "Mexico"],
    ["Alfreds Futterkiste", "Maria Anders", "Germany"],
    ["Ana Trujillo Emparedados y helados", "Ana Trujillo", "Mexico"]
];

// prepare the data
var dataAdapter = new $.jqx.dataAdapter({
    localdata: data,
    datatype: "array"
});

$("#jqxgrid").jqxGrid({
    width: 400,
    height: 200,
    source: dataAdapter,
    pageable: true,
    columnsresize : true,
    columnsreorder : true,
    columns: [{
        text: 'Company Name',
    }, {
        text: 'Contact Name',
    }, {
        text: 'Country',
    }]
});

var gridstate = null;

$('.gridContainer').append($('<button>Save State</button>').on('click', function () {
    gridstate = $("#jqxgrid").jqxGrid('savestate');
}));


$('.gridContainer').append($('<button>Render</button>').on('click', function () {
    $("#jqxgrid").jqxGrid('render');
}));


$('.gridContainer').append($('<button>Load State</button>').on('click', function () {
    $("#jqxgrid").jqxGrid('loadstate', gridstate);
}));