JSFiddle - React, Tailwind, and code Playground

by mpsoftware

HTML

<html>  
    <head lang="en">
        <meta charset="utf-8">
        <title>Getting Started With KoGrid Example</title>  
        <link rel="stylesheet" type="text/css" href="KoGrid.css" />
        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="knockout-2.2.1.js"></script>
        <script type="text/javascript" src="koGrid-2.1.1.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body onLoad="BindVm()">
        <div class="gridStyle" data-bind="koGrid: gridOptions"></div>
        
        <select data-bind="options: myOptions, optionsText: 'name'" />
    </body>
</html>

CSS

.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px; 
    height: 300px;
}

JavaScript

function mainVm()
{
  var self = this;
  this.myData = ko.observableArray([{name: "Moroni", age: 50},
                                    {name: "Tiancum", age: 43},
                                    {name: "Jacob", age: 27},
                                    {name: "Nephi", age: 29},
                                    {name: "Enos", age: 34}]);
  this.myOptions = ko.observableArray([{id: 0, name: "Moroni"},
                                       {id: 1, name: "Tiancum"},
                                       {id: 2, name: "Jacob"},
                                       {id: 3, name: "Nephi"},
                                       {id: 4, name: "Enos"}]);
  this.gridOptions = { data: self.myData,
                       columnDefs: [
                                     { field: 'name', displayName: 'Name', width: 80, cellTemplate: '<select data-bind="attr: { \'class\': \'kgCellText colt\' + $index()}, value: $parent.entity[$data.field]"><option>Moroni</option><option>Tiancum</option><option>Jacob</option><option>Nephi</option><option>Enos</option></select>' },
                                     { field: 'age', displayName: 'Age', width: 50 }
                                   ] };
  /*
  this.gridOptions = { data: self.myData,
                       columnDefs: [
                                     { field: 'name', displayName: 'Name', width: 80, cellTemplate: '<select data-bind="attr: { \'class\': \'kgCellText colt\' + $index()}, options: myOptions, optionsText: \'name\', value: $parent.entity[$data.field]" />' },
                                     { field: 'age', displayName: 'Age', width: 50 }
                                   ] };
  */
};

function BindVm()
{
  ko.applyBindings(new mainVm());
}