jQWidgets Grid Grouping

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">
<link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.fresh.css">
<div id="myApp" class='jqx-disableselect'>
    <div id="myContainer" style="height:100%"></div>
</div>

CSS

body {
    background-color: #ffe;
}
#myApp {
    position: absolute;
    top: 50px;
    left: 80px;
    bottom: 50px;
    right: 80px;
}

JavaScript

// prepare the data
var source = {
    localdata: [
        ["Futter & kiste", "Maria Anders", "Germany", "1"],
        ["Emparedados&helados", null, "Mexico", "7"],
        ["Trujillo&Emparedados", "Ana Trujillo", "Mexico", "2"],
        ["Eten bij Michel", "Michel", "Netherlands", "1"],
        ["One&Only", "Marcel Groen", "Germany", 0],
        ["Bellini", "Pedrazzetti", "Switzerland", "2"]
    ],
    datafields: [{
        name: 'Company',
        map: '0',
    }, {
        name: 'Contact',
        map: '1',
    }, {
        name: 'Number',
        map: '3',
    },{
        name: 'Company2',
        map: '0',
    }, {
        name: 'Contact2',
        map: '1',
    }],
    datatype: "array"
};
// create the grid
var myTable = $('<div id="myTable"></div>')
$('#myContainer').html(myTable);
myTable.jqxGrid({
    source: new $.jqx.dataAdapter(source),
    width: "100%",
    height: "100%",
    columnsresize: true,
    showstatusbar: true,
    groupable: true,
    showgroupsheader: false,
    ready: function() {
        myTable.jqxGrid('autoresizecolumns', 'all');
    },
    columns: [{
        text: 'Company Name',
        datafield: 'Company',
        width: 50
    }, {
        text: 'Contact Name',
        datafield: 'Contact',
        width: 50
    }, {
        text: 'Number',
        datafield: 'Number',
        width: 50
    }, {
        text: 'Contact Name 2',
        datafield: 'Contact2',
        width: 50
    },{
        text: 'Company Name',
        datafield: 'Company2'
        width: 50
    }]
});
// groups changed event
myTable.on('groupschanged', function onGroupsChanged(event){
    var groupingStatus = event.args.groups.length > 0;
    myTable.jqxGrid('showgroupsheader', groupingStatus);
    myTable.jqxGrid('render');
});