jQWidgets Grid Toolbar Test

HTML

<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<div id="myApp"></div>

CSS

body {
    background-color: #ffe;
}
#myApp {
    position: absolute;
    top: 10px;
    left: 8px;
    bottom: 10px;
    right: 8px;
}
.gridToolbar {
    border: medium none;
    left: 4px;
    position: absolute;
    top: 6px;
}
.gridSettingsHeader {
    border-bottom: 1px solid rgb(200, 200, 200);
    margin: 2px 0px 8px 2px;
}
div.jqx-grid-pager input.toolbarSearchInput {
    font-size:12px;
    margin-left:20px;
    margin-top:1px;
    height: 20px;
}

JavaScript

var myTable = $('<div id="myTable"></div>')
$('#myApp').append(myTable);

var source = {
    localdata: [
        ["Alfreds Futterkiste", "Maria Anders"],
        ["Ana Trujillo Emparedados y helados", "Ana Trujillo"],
        ["Antonio Moreno Taquera", "Antonio Moreno"],
        ["Around the Horn", "Thomas Hardy"],
        ["Berglunds snabbkp", "Christina Berglund"],
        ["Blauer See Delikatessen", "Hanna Moos"],
        ["Blondesddsl pre et fils", "Frdrique Citeaux"]
    ],
    datafields: [{
        name: 'Company',
        map: '0',
    }, {
        name: 'Contact',
        map: '1',
    }],
    datatype: "array"
};

myTable.jqxGrid({
    width: "100%",
    height: "100%",
    columnsresize: true,
    sortable: true,

    pageable: true,
    source: new $.jqx.dataAdapter(source),
    columns: [{
        text: 'Company Name',
        datafield: 'Company',
        width: 250
    }, {
        text: 'Contact Name',
        datafield: 'Contact',
        width: 180
    }]
});

createToolbar(myTable, false);

function createToolbar(myTable, showSearch) {
    var toolbarId = 'myToolbar';
    var settingsId = toolbarId + '_settings';
    var colsDef = myTable.jqxGrid('columns').records;
    var settings, checkbox;

    // increase table pager height to make room for the toolbar
    myTable.jqxGrid('pagerheight', 38);

    // create HTML markup for the toolbar with a settings button and a table filtering input control
    var toolbarList = $('<ul />');
    mToolbar = $('<div id="' + toolbarId + '" class="gridToolbar" />');
    mToolbar.append(toolbarList);

    // add settings menu to the toolbar
    toolbarList.append('<li id="' + settingsId + '" style="padding: 1px 4px;">' + 'Settings...' + '<ul style="width:440px">' + '<div class="gridSettingsHeader"><b>Show/Hide Columns</b></div>' + '</ul>' + '</li>');

    // addd filtering input to the toolbar, add an 'X' shaped clear button
    if (showSearch) {
        toolbarList.append('<li...