Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <base href="http://mleibman.github.io/SlickGrid/examples/">
  <title>SlickGrid example 10: Async post render</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"/>
</head>
<body>
<div style="width:600px;float:left;">
  <div class="grid-header" style="width:100%">
    <label>Scores:</label>
  </div>
  <div id="myGrid" style="width:100%;height:500px;"></div>
</div>
​
<script src="../lib/jquery-1.7.min.js"></script>
<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
<script src="../lib/jquery.event.drag-2.2.js"></script>
<script src="../lib/jquery.sparkline.min.js"></script>
​
<script src="../slick.core.js"></script>
<script src="../slick.editors.js"></script>
<script src="../slick.grid.js"></script>
​
<script>
  function requiredFieldValidator(value) {
    if (value == null || value == undefined || !value.length) {
      return {valid: false, msg: "This is a required field"};
    } else {
      return {valid: true, msg: null};
    }
  }
​
  function waitingFormatter(value) {
    return '<div class="slider"></div>';
  }
​
  function renderSlider(cellNode, row, dataContext, colDef) {
    var cell = $(cellNode);
    cell.find('.slider').slider({
      value: dataContext.value,
      slide: function(e, ui) {
        data[row].value = ui.value;
        cell.prev().html(ui.value);
      }
    });
  }
​
  var grid;
  var data = [];
  var columns = [
    {id: "title", name: "Title", field: "title", sortable: false, width: 120, cssClass: "cell-title"},
    {id: "value", name: "Value", field: "value", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},
    {id: "chart", name: "Slider", sortable: false, width: 425, formatter: waitingFormatter, rerenderOnResize: true, asyncPostRender: renderSlider}
  ];
​
  var options = {
    editable: true,
    enableAddRow: false,
    enableCellNavigation: true,
    asyncEditorLoading: false,
    enableAsyncPostRender: true
  };
​
​
  $(function () {
    for (var i = 0; i < 500; i++) {
      var d = (data[i] = {});
​
      d["title"] = "Record " + i;
      d["value"] = Math.round(Math.random() * 100);
    }
​
    grid = new Slick.Grid("#myGrid", data, columns, options);
  })
</script>
</body>
</html>
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jcreadypro
0viewers