TEK : Knockout JS grid

Example of an editable grid with KO, but editable on demand

by KevinGabbert

HTML

<script src="https://raw.github.com/AdamPflug/Knockout.Programmatic/master/lib/knockout-2.0.0.js"></script>
<script src="https://raw.github.com/AdamPflug/Knockout.Programmatic/master/src/knockout.programmatic.js"></script>
<h2>TEK : Knockout JS grid editable on demand</h2>

<div id="grid">
<table id="xxx">
  <thead>
      <tr>
          <th>Col 1</th><th>Col 2</th><th>Col 3</th>
      </tr>              
  </thead>
  <tbody>
  
  </tbody>      
</table>
</div>

<script id="inner-row-tmpl" type="text/html">
        <td data-bind="text: par1"></td>
        <td data-bind="text: par2"></td>
        <td data-bind="text: par3"></td>
</script>

<script id="row-tmpl" type="text/html">
    <tr data-bind="template: { name: 'inner-row-tmpl'}">
    </tr>
</script>

CSS

*{font-family:Segoe UI}
h2{margin:10px;}
#grid{border:1px solid #696969;border-radius:5px;display:inline-block;}
#grid table {width:100%;}
th{ background-color:#000; color:#fff;}
th,td{padding:1px 5px 1px 5px;white-space:nowrap}
th.buttons{max-width:20px;width:20px;padding:0px}
input{width:50px;}

JavaScript

var boundData;

                boundData = [
            {
                par1: '1aaaa',
                par2: '1bbbb',
                par3: '1cccc'
            },
            {
                par1: '2aaaa',
                par2: '2bbbb',
                par3: '2cccc'
            },
            {
                par1: '3aaaa',
                par2: '3bbbb',
                par3: '3cccc'
            }
        ];
        
         $("tbody").databind({
            template: {
                name: 'row-tmpl',
                foreach: boundData
            }
        });  


$('#xxx').bind();