twitter-bootstrap-modal

Demostrating issues #143 and #144 in bootstrap-select.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css">
<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>
   

<div class="container">



        <!-- Button to trigger modal -->
        <div>
            <a href="#myModal1" role="button" class="btn" data-toggle="modal">Gridception</a>
        </div>

        <!-- Modal -->
        <div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Redeem Request Detail</h3>
            </div>
            <div class="modal-body">
                <table width="100%">
  <tr>
    <td valign="top" width="50%">
      <div id="myGrid" style="width:500px;height:200px;"></div>
    </td>
               
          
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>

CSS

.btn-group {
    z-index: 1051;
}

JavaScript

//$('#myModal1 .selectpicker').selectpicker();

 var grid;
  var columns = [
    {id: "title", name: "Title", field: "title"},
    {id: "duration", name: "Duration", field: "duration"},
    {id: "%", name: "% Complete", field: "percentComplete"},
    {id: "start", name: "Start", field: "start"},
   // {id: "finish", name: "Finish", field: "finish"},
    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"},
    {id: "newgrid", name: "newgrid", field: "newgrid", width: 80, sortable: true, formatter:reportFormatter}
  ];
  var options = {
    enableCellNavigation: true,
    enableColumnReorder: false
  };
function reportFormatter(row, cell, value, columnDef, dataContext) {
    return "<button class='show-report'>show</button>";}



  $(function () {
    var data = [];
    for (var i = 0; i < 500; i++) {
      data[i] = {
        title: "Task " + i,
        duration: "5 days",
        percentComplete: Math.round(Math.random() * 100),
        start: "01/01/2009",
        finish: "01/05/2009",
        effortDriven: (i % 5 === 0)
      };
    }
    grid = new Slick.Grid("#myGrid", data, columns, options);
  });

grid.onClick.subscribe(function(e,args) {
 if ($(e.target).hasClass('show-report')) {
     $('#myModal').modal('show');
     
     
    //window.open((href="http://cnn.com"), 'Redeem Request Detail', 'width=800, height=700');
            //return true;
 }
});