JSFiddle - React, Tailwind, and code Playground

by amitava82

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: getDataNew, 
    
    colModel: [{ name: 'act', index: 'act', width: 155, sortable: false },
    
    { name: 'id', index: 'id', width: 30, sortable: true },
                    { name: 'Name', index: 'Name', width: 200,editable:true, sortable: true ,  edittype: 'text', editrules: { required: false }},
                    { name: 'Desc', index: 'Desc', width: 200,editable:true, sortable: true ,  edittype: 'text', editrules: { required: false }}],
                       rowId: 'id',
                       pager: '#pager',
                       rowNum: 10,
                       autowidth: true,
                       height: '300px',
                       viewrecords: true,
                       scrollOffset: 0
                      
    }">
    </table>
  
    <br/><br/>
    <div id="pager"></div>

  <div style="margin: 3px"  data-bind="foreach:developers"> 
 <span style="vertical-align: super;" data-bind="text:id" ></span>
 <span style="vertical-align: super;" data-bind="text:Name" ></span>

 <span style="vertical-align: super;" data-bind="text:Desc" ></span>
 <br/>
 </div>
  <div>
   Edit All Names <input style="width:350px;vertical-align:baseline" data-bind="value:editName" type="text" maxlength="50"/>
   <button...

JavaScript

ko.bindingHandlers.grid = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = valueAccessor();
        var dataArr = value.data();
        var grid = $(element).jqGrid({
            url:'/echo/json/',
            editurl:'/echo/json/',
            data: dataArr,
            datatype: "local",
            localReader:
                        { repeatitems: false,
                            id: value.rowId
                        },
            gridview: true,
            height: 'auto',
            hoverrows: true,
            colModel: value.colModel,
            pager: value.pager,
            rowNum: 20
        
            
        });
  
        $(element).jqGrid('navGrid', '#pager', { edit: true, add: true, del: true, refresh: false },
                {

                    afterSubmit: function (response, postdata) {
                        viewModel.editExisting(postdata);
                        $(element).jqGrid("setGridParam", { datatype: 'local' });
                        $(element).jqGrid("saveRow", postdata.id, true, null);

                        return [true];
                    },
                    closeAfterEdit: true
                },
                {
                    recreateForm: true,
                    addedrow: 'last',
                    afterSubmit: function (response, postdata) {
                        postdata.id = "5";
                        viewModel.addNew(postdata);
                         $(element).jqGrid("setGridParam", { datatype: 'local' });
                                                                                            $(element).jqGrid("addRowData", postdata.id, postdata);

                        return [true];
                    },
                    closeAfterAdd: true
                },
                {
                    afterSubmit: function (response, postdata) {
                        viewModel.deleteExisting(postdata);
                   ...