Ignite UI Responsive jQuery Grid - Editing

by ericlaten

HTML

<script src="http://cdn-na.infragistics.com/jquery/20131/latest/js/infragistics.loader.js"></script>
<h1 class='logo'>Responsive jQuery Grid - Mobile Editing</h1>

<table id="grid"></table>

CSS

</style> <!-- as per http://doc.jsfiddle.net/use/hacks.html --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <style>

/* --- Unrelated sample styling --- */
 .logo {
    background-image: url('http://www.infragistics.com/uploadedImages/Content/PRODUCTS/jQuery/ignite-secondary-navigation-logo.png');
    background-repeat: no-repeat;
    padding-left: 135px;
    margin: 5px;
    vertical-align: top;
    font-size: 1.2em;
}
body {
    font-size: 0.85em;
    font-family :"Segoe UI", Verdana, Helvetica, Sans-Serif;
}
button {
    text-decoration: none;
    line-height: 1.5em;
    background-color: #ACACAC;
    color: #fff;
    border: none;
}
button:hover {
    background-color: #007FAF;
}
button:active {
    background-color: #00AEEF;
}

JavaScript

var people;
setupData();

$.ig.loader({
    scriptPath: "http://cdn-na.infragistics.com/jquery/20131/latest/js",
    cssPath: "http://cdn-na.infragistics.com/jquery/20131/latest/css",
    theme: 'metro'
});

$.ig.loader("igGrid.Responsive.Hiding.Paging.Updating", function () {
    $("#grid").igGrid({
        dataSource: people,
        primaryKey: 'BusinessEntityID',
        autoGenerateColumns: false,
        autoGenerateLayouts: false,
        columns: [{
            key: 'BusinessEntityID',
            dataType: 'number',
            headerText: 'Id'
        }, {
            unbound: true,
            key: 'name',
            dataType: 'string',
            headerText: 'Full Name'
        }, {
            key: 'FirstName',
            dataType: 'string',
            headerText: 'First name'
        }, {
            key: 'LastName',
            dataType: 'string',
            headerText: 'Last Name'
        }, {
            key: 'PersonType',
            dataType: 'string',
            headerText: 'PersonType'
        }, {
            key: 'NameStyle',
            dataType: 'bool',
            headerText: 'Name Style'
        }, {
            key: 'Title',
            dataType: 'string',
            headerText: 'Title'
        }, {
            key: 'AdditionalContactInfo',
            dataType: 'string',
            headerText: 'Additional Contact Info'
        }, {
            key: 'Demographics',
            dataType: 'string',
            headerText: 'Demographics'
        }, {
            key: 'rowguid',
            dataType: 'string',
            headerText: 'Row GUID'
        }, {
            key: 'ModifiedDate',
            dataType: 'date',
            headerText: 'Modified Date'
        }],
        features: [{
            name: 'Responsive',
            forceResponsiveGridWidth: false,
            columnSettings: [{
                columnKey: 'BusinessEntityID',
                classes: "ui-hidden-phone"
            }, {
                columnKey:...