<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>SlickGrid example 8: Alternative display</title>
  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
  <link rel="stylesheet" href="examples.css" type="text/css"/>
  <style>
    .slick-cell {
      background: white !important;
      border-color: transparent !important;
      line-height: 19px !important;
    }

      /* alternating offsets */
    .slick-row .cell-inner {
      margin-right: 60px;
    }

    .slick-row[row$="1"] .cell-inner, .slick-row[row$="3"] .cell-inner, .slick-row[row$="5"] .cell-inner,
    .slick-row[row$="7"] .cell-inner, .slick-row[row$="9"] .cell-inner {
      margin-left: 60px;
      margin-right: 0;
    }

    .contact-card-cell {
      border-color: transparent !important;
    }

    .cell-inner {
      height: 80px;
      margin: 10px;
      padding: 10px;
      background: #fafafa;
      border: 1px solid gray;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-box-shadow: 1px 1px 5px silver;
      -webkit-box-shadow: 1px 1px 5px silver;
      -webkit-transition: all 0.5s;
    }

    .cell-inner:hover {
      background: #f0f0f0;
    }

    .cell-left {
      width: 40px;
      height: 100%;
      float: left;
      border-right: 1px dotted gray;
      background: url("../images/user_identity.gif") no-repeat top center;
    }

    .cell-main {
      margin-left: 50px;
    }
  </style>
</head>
<body>
<table width="100%">
  <tr>
    <td valign="top" width="50%">
      <div id="myGrid" style="width:600px;height:500px;"></div>
    </td>
    <td valign="top">
      <h2>Demonstrates:</h2>

      <ul>
        <li>Template-based rendering using John Resig's <a href="http://ejohn.org/blog/javascript-micro-templating/"
                                                           target=_blank>micro-templates</a> while still using
          SlickGrid's virtual rendering technology.
        </li>
      </ul>
        <h2>View Source:</h2>
        <ul>
            <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example8-alternative-display.html" target="_sourcewindow"> View the source for this example on Github</a></li>
        </ul>

    </td>
  </tr>
</table>

<!-- cell template -->
<script type="text/html" id="cell_template">
  <div class="cell-inner">
    <div class="cell-left"></div>
    <div class="cell-main">
      <b><%=name%></b><br/>
      <%=title%><br/>
      <%=email%><br/>
      <%=phone%>
    </div>
  </div>
</script>

<script src="../lib/firebugx.js"></script>

<script src="../lib/jquery-1.7.min.js"></script>
<script src="../lib/jquery.event.drag-2.2.js"></script>

<script src="../slick.core.js"></script>
<script src="../slick.grid.js"></script>

<script>
  // Simple JavaScript Templating
  // John Resig - http://ejohn.org/ - MIT Licensed
  (function () {
    var cache = {};

    this.tmpl = function tmpl(str, data) {
      // Figure out if we're getting a template, or if we need to
      // load the template - and be sure to cache the result.
      var fn = !/\W/.test(str) ?
          cache[str] = cache[str] ||
          tmpl(document.getElementById(str).innerHTML) :

        // Generate a reusable function that will serve as a template
        // generator (and which will be cached).
        new Function("obj",
            "var p=[],print=function(){p.push.apply(p,arguments);};" +

            // Introduce the data as local variables using with(){}
            "with(obj){p.push('" +

            // Convert the template into pure JavaScript
              str
                  .replace(/[\r\t\n]/g, " ")
                  .split("<%").join("\t")
                  .replace(/((^|%>)[^\t]*)'/g, "$1\r")
                  .replace(/\t=(.*?)%>/g, "',$1,'")
                  .split("\t").join("');")
                  .split("%>").join("p.push('")
                  .split("\r").join("\\'") + "');}return p.join('');");

      // Provide some basic currying to the user
      return data ? fn(data) : fn;
    };
  })();

  var grid;
  var data = [];
  var columns = [
    {id: "contact-card", name: "Contacts", formatter: renderCell, width: 500, cssClass: "contact-card-cell"}
  ];

  var options = {
    rowHeight: 140,
    editable: false,
    enableAddRow: false,
    enableCellNavigation: false,
    enableColumnReorder: false
  };

  var compiled_template = tmpl("cell_template");

  function renderCell(row, cell, value, columnDef, dataContext) {
    return compiled_template(dataContext);
  }

  $(function () {
    for (var i = 0; i < 100; i++) {
      var d = (data[i] = {});

      d["name"] = "User " + i;
      d["email"] = "test.user@nospam.org";
      d["title"] = "Regional sales manager";
      d["phone"] = "206-000-0000";
    }

    grid = new Slick.Grid("#myGrid", data, columns, options);
  })
</script>
</body>
</html>