Ignite UI Grid KnockoutJS with grouping.

Form of the Ignite UI Grid KnockoutJS Configuration Sample with added grouping.

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20132/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20132/latest/js/infragistics.lob.js"></script>
<script src="http://igniteui.com/js/external/knockout-latest.js"></script>
<script src="http://igniteui.com/js/external/knockout.mapping-latest.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20132/latest/js/extensions/infragistics.ui.tree.knockout-extensions.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20132/latest/js/extensions/infragistics.ui.editors.knockout-extensions.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20132/latest/js/extensions/infragistics.datasource.knockoutjs.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20132/latest/js/extensions/infragistics.ui.grid.knockout-extensions.js"></script>
<script src="http://igniteui.com/js/apiviewer.js"></script>
<script src="http://igniteui.com/js-data/nw-customers-with-orders"></script>
<link href="http://cdn-na.infragistics.com/jquery/20132/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/jquery/20132/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<p>Group by column and then change the state of some groups, then add a new row or use the inputs below to edit the a record through the data source or edit rows inline. The exapnded/collapsed state should remain unchanged.</p>
<div id="error-message" style="color: #FF0000; font-weight: bold;"></div>
    
    <table id="gridKO" data-bind="igGrid: {
            dataSource: data,
            primaryKey: 'ID',
            width: '100%',
            autoCommit: true,
            autoGenerateColumns: false,
       ...

CSS

body {
            padding: 0px !important;
            margin: 0px !important;
        }

JavaScript

$(function () {
var itemsModel, db = nwCustomersWithOrders;

        var Item = function (ID, ContactName, City, Country) {
            var self = this;
            this.ID = ko.observable(ID);
            this.ContactName = ko.observable(ContactName);
            this.City = ko.observable(City);
            this.Country = ko.observable(Country);
        }

        function ItemsViewModel() {
            var self = this;
            self.data = ko.observableArray([]);
            self.selectedItemID = ko.observable(0);

            for (var i = 0; i < db.length; i++) {
            		debugger;
                self.data.push(new Item(db[i].ID, db[i].ContactName, db[i].City, db[i].Country));
            }

            self.selectionChanged = function (evt, ui) {
                var rowdata = ui.row;
                // find it in the array so we don't lose the observables
                var selectedItemInArray = ko.utils.arrayFirst(self.data(), function (item) {
                    return item.ID() === rowdata.id;
                });

                if (selectedItemInArray != null) {
                    self.selectedItemID(parseInt(rowdata.index));
                }
                else {
                    self.selectedItemID(0);
                }
            };
        }
        
        $(function () {
            // Used to show output in the API Viewer at runtime, 
            // defined in external script 'apiviewer.js'    
            var apiViewer = new $.ig.apiViewer();

            itemsModel = new ItemsViewModel();
            ko.applyBindings(itemsModel);
        });
});