Knockout + wijmo grid

by goranobradovic

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.3.0.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.9.min.css">
<script src="http://cdn.wijmo.com/interop/knockout.wijmo.3.20132.9.js"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20132.9.min.js"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.9.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<div data-bind="wijlineargauge: { value: selectedCount, min:0, max:40 }, valueUpdate: 'click'"></div>
<table data-bind="wijgrid: { data: data, allowEditing: true, allowPaging: false, pageSize: 3, columns: columns, editingInitOption: 'click', selectionMode: 'none', cellClicked: function(e, args){ $(e.target).wijgrid('endEdit');}, allowVirtualScrolling:true }">
</table>
<input data-bind="value: selectedCount"/>
<button data-bind="click: confirm, enabled: selectedCount()>0" title="Confirm" >Confirm</button>


<div data-bind="confirmationDialog:confirmationDialog" data-dialog='{"title":"Are you sure?"}'>
    <table data-bind="wijgrid:{data:selectedItems()}" />
</div>

JavaScript

var gridData = [
    { Number: 27, Nationality: 'Canada', Player: 'Adams, Craig', Position: 'RW', Selected: true },
	{ Number: 43, Nationality: 'Canada', Player: 'Boucher, Philippe', Position: 'D, R', Selected: true },
	{ Number: 24, Nationality: 'Canada', Player: 'Cooke, Matt', Position: 'LW, L', Selected: false },
	{ Number: 87, Nationality: 'Canada', Player: 'Crosby, Sidney (C)', Position: 'C, L', Selected: true },
	{ Number: 1, Nationality: 'United States', Player: 'Curry, John', Position: 'G, L', Selected: true }
];


var viewModel = function (gridData) {
    var koGridData = ko.mapping.fromJS(gridData);
    var selectedItems = ko.computed(function(){
        return koGridData().filter(function(row){
            return row.Selected() == true;
        });
    });
    var selectedCount = ko.computed(function(){
        return selectedItems().length;
    });
    var confirmationDialogVisible = ko.observable(false);
    return {
        data: koGridData,
        selectedItems: selectedItems,
        selectedCount: selectedCount,
        columns: [
        { headerText: "Number", readOnly: true }, 
        { headerText: "Nationality", readOnly: true }, 
        { headerText: "Player", readOnly: true }, 
        { headerText: "Position on", readOnly: true },
        { headerText: "Select", dataType:'boolean', readOnly: false }
            ],
        confirm: function(){
            confirmationDialogVisible.showDialog();
        },
        confirmationDialog: confirmationDialogVisible
    };
}(gridData);

ko.bindingHandlers.confirmationDialog = {
                    init: function (element, valueAccessor) {
                        valueAccessor().showDialog = function () {
                            valueAccessor()(null);
                        };
                        var options = $.extend({
                            buttons: [
                                { text: 'Yes', click: function (event, ui) { valueAccessor()(true); } },
                         ...