Day of week Grid

by Leonardo Trimarchi

HTML

<script src="https://rawgithub.com/Celebio/SlickGrid/master/slick.core.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/Celebio/SlickGrid/master/slick.grid.css">
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/examples/examples.css">
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/css/smoothness/jquery-ui-1.8.16.custom.css">
<script src="https://rawgit.com/Celebio/SlickGrid/master/lib/jquery.event.drag-2.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.grid.js"></script>
<script src="http://mleibman.github.com/SlickGrid/lib/jquery-1.7.min.js"></script>
<script src="http://mleibman.github.com/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<div class="container">
    <div id="dialog">
        <div style="position:relative">
            <div style="width:600px;">
                <div id="myGrid" style="width:250px;height:290px;"></div>
            </div>
        </div>
    </div>
        <button id="opener">Open Dialog</button>

JavaScript

var grid;
var columns = [
    { id: "DayofWeek", name: "DayofWeek", field: "DayofWeek" },
    { id: "StartTime", name: "StartTime", field: "StartTime" },
    { id: "EndTime", name: "EndTime", field: "EndTime" }
];



var options = {
    editable: true,
    autoedit: false,
    enableCellNavigation: true,
    enableColumnReorder: false,
    multiColumnSort: true
};

 var options = {
    enableCellNavigation: true,
    enableColumnReorder: false
  };
  $(function () {
    var data = [];
    for (var i = 0; i < 10; i++) {
      data[i] = {
     };
    }
    grid = new Slick.Grid("#myGrid", data, columns, options);
  })