JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.3.0beta.debug.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
 <table id="developersGrid" data-bind="grid: { data: developers,
                                                selectItem: selectDeveloper,
                                                  colModel: [
    { name: 'ID', index: 'ID', width: 30, sortable: true },
    { name: 'Name', index: 'Name', width: 200, sortable: true },
    { name: 'Desc', index: 'Desc', width: 200, sortable: true }],
                                                 rowId: 'ID',
                                                 pager: '#pager'
                                                    }">
    </table>
    <div id="pager"></div>


<form data-bind="with: selectedDeveloper" style="margin-top:10px">
    <input type="hidden" data-bind="value: ID"/><br/>
    Name:<input type="text" data-bind="value: Name"/><br/>
Desc:<input type="text" data-bind="value: Desc"/><br/>
    <input type="button" value="save" data-bind="click:$parent.save.bind($parent)"/>
</form >

JavaScript

// Simple general-purpose "grid" binding

/*globals ko */

ko.bindingHandlers.grid = {
    init: function (element, valueAccessor) {
        var value = valueAccessor();
        var dataArr = ko.utils.unwrapObservable(value.data).slice(0);

        var grid = $(element).jqGrid({
            data: dataArr,
            datatype: "local",
            localReader:
                        { repeatitems: false,
                            id: value.rowId
                        },
            gridview: true,
            height: 'auto',
            hoverrows: false,
            colModel: value.colModel,
            pager: value.pager,
            rowNum: 3,
            onSelectRow: function(id)
            {
                 var item = $(element).jqGrid('getLocalRow', id);
                 value.selectItem(item);

            }

        });

        $(element).jqGrid("setGridParam", { data: ko.utils.unwrapObservable(value.data).slice(0) });
    },
    update: function (element, valueAccessor) {
       var value = valueAccessor();
        var gridData = $(element).jqGrid('getGridParam', 'data');
        var newData = ko.utils.unwrapObservable(value.data);  

        var prevPage = $(element).jqGrid("getGridParam", 'page');
        var rowNum = parseInt($(element).jqGrid("getGridParam", 'rowNum'), 10);
        var lastPage = Math.ceil(newData.length / rowNum);

        $(element).jqGrid('clearGridData')
                  .jqGrid('setGridParam', { data: newData })
                  .jqGrid('setGridParam', { lastpage: lastPage })
                  .trigger('reloadGrid', [{ page: prevPage}]);
    }
};

var dataArr = [{"ID":1,"Name":"user1","Desc":"desc1"},{"ID":2,"Name":"user2","Desc2":""},{"ID":3,"Name":"user3","Desc":"desc3"},{"ID":4,"Name":"user4","Desc":"desc4"},{"ID":5,"Name":"user5","Desc":"test5"}];

var emptyDeveloper = {ID:null, Name:'', Desc:null};
  var viewModel = {
        developers: ko.observableArray(dataArr),
      selectedDeveloper: ...