<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>slickgrid-colfix-plugin example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../bower_components/slickgrid/slick.grid.css" type="text/css" />
    <link rel="stylesheet" href="../bower_components/slickgrid/css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" />
    <link rel="stylesheet" href="../bower_components/slickgrid/examples/examples.css" type="text/css" />
    <style>
      body {margin: 0;}
      .slick-header-columns {background-image: none;}
      .slick-header-column {background-image: none; background-color: #eaeaea;}
      .slick-header-column:hover {background-image: none; background-color: #D4EEFF;}
      .grid {background: white; outline: 0; border: 1px solid gray;}
      .slick-row.active {background-color: #fcc;}
      .idx {background-color: #f2f2f2; border-right: 1px solid #aaa; text-align: right; font-size: 0.8em; padding-right: 8px;}
    </style>
  </head>
  <body>

    <div id="my-grid" class="grid" style="width: 800px; height: 400px"></div>

    <script src="../bower_components/slickgrid/lib/jquery-1.7.min.js"></script>
    <script src="../bower_components/slickgrid/lib/jquery-ui-1.8.16.custom.min.js"></script>
    <script src="../bower_components/slickgrid/lib/jquery.event.drag-2.2.js"></script>
    <script src="../bower_components/slickgrid/slick.core.js"></script>
    <script src="../bower_components/slickgrid/slick.grid.js"></script>
    <script src="../bower_components/slickgrid-colgroup-plugin/dist/slick.colgroup.js"></script>

    <script src="../dist/slick.colfix.js"></script>
    <script>

      /** columns defination */
      var columns = [
        {id: '#',    name: '#', field: 'idx', width: 50, cssClass: 'idx'},
        {id: 'col1', name: 'col 1', field: 'col1'},
        {id: 'col2', name: 'col 2', children: [
          {id: 'col2-1', name: 'col 2-1', field: 'col2-1', width: 100},
          {id: 'col2-2', name: 'col 2-2', children: [
            {id: 'col2-2-1', name: 'col 2-2-1', field: 'col2-2-1', width: 200},
            {id: 'col2-2-2', name: 'col 2-2-2', field: 'col2-2-2', width: 50}
          ]}
        ]},
        {id: 'col3', name: 'col3', children: [
          {id: 'col3-1', name: 'col 3-1', field: 'col3-1', width: 300},
          {id: 'col3-2', name: 'col 3-2', field: 'col3-2', width: 100},
          {id: 'col3-3', name: 'col 3-3', field: 'col3-3', width: 200},
          {id: 'col3-4', name: 'col 3-4', field: 'col3-4', width: 100}
        ]}
      ];

      /** grid options */
      var options = {
        enableColumnReorder: false
      };

      /** data */
      var data = [];
      for (var i = 0; i < 500; i++) {
        data[i] = {
          'idx': i,
          'col1': '01/05/2009',
          'col1-1-1': '01/05/2009',
          'col2-1':    Math.round(Math.random() * 100),
          'col2-2-1':    Math.round(Math.random() * 100),
          'col2-2-2':    Math.round(Math.random() * 100),
          'col3-1': '01/05/2009',
          'col3-2': '5 days',
          'col3-3':    Math.round(Math.random() * 100),
          'col3-4':    Math.round(Math.random() * 100)
        };
      }

      /** SlickGrid */
      var grid = new Slick.Grid('#my-grid', data, columns, options);

      // register colfix plguin
      grid.registerPlugin(new Slick.Plugins.ColFix('#'));

      // register colgroup plguin
      grid.registerPlugin(new Slick.Plugins.ColGroup());

      // justify height
      var mainGrid = $('.grid').eq(2),
          colFixedGrid = $('.grid').eq(1);
      colFixedGrid.find('.slick-header').height(mainGrid.find('.slick-header').height());
      colFixedGrid.find('.slick-header-columns').height(mainGrid.find('.slick-header-columns').outerHeight() * 3);
      colFixedGrid.find('.slick-header-column').outerHeight(colFixedGrid.find('.slick-header-columns').height());
    </script>
  </body>
</html>
