SlickGrid multiple row selection

selects multiple rows on cell click

by Rituja Veer

HTML

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css">
<script src="https://rawgithub.com/Celebio/SlickGrid/master/lib/jquery.event.drag-2.2.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/slick.core.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/slick.grid.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/Celebio/SlickGrid/master/slick.grid.css">
<link rel="stylesheet" href="https://rawgithub.com/Celebio/SlickGrid/master/slick-default-theme.css">
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/slick.formatters.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/slick.editors.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/plugins/slick.cellselectionmodel.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/plugins/slick.cellrangedecorator.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/plugins/slick.cellrangeselector.js"></script>
<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>basic grid with minimal configuration</li>
      </ul>
        <h2>View Source:</h2>
        <ul>
            <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example1-simple.html" target="_sourcewindow"> View the source for this example on Github</a></li>
        </ul>
    </td>
  </tr>
</table>

CSS

/*style the main menu*/

  
  .selected {
border-right-color: silver;
 border-right-style: solid;
 background: #f5f5f5;
color: gray;
 font-size: 10px;
}

  
  
  
  
  
.myMenu {
	margin:0;
	padding:0;
}

.myMenu li {
	list-style:none;
	float:left;
	font:12px Arial, Helvetica, sans-serif #111;
}

.myMenu li a:link, .myMenu li a:visited {
	display:block;
	text-decoration:none;
	background-color:#09F;
	padding: 0.5em 2em;
	margin:0;
	border-right: 1px solid #fff;
	color:#111;
}

.myMenu li a:hover {
	background-color:#0CF;	
}

/*style the sub menu*/
.myMenu li ul {
	position:absolute;
	visibility:hidden;
	border-top:1px solid #fff;
	margin:0;
	padding:0;
}

.myMenu li ul li {
	display:inline;
	float:none;
}

.myMenu li ul li a:link, .myMenu li ul li a:visited {
	background-color:#09F;
	width:auto;
}

.myMenu li ul li a:hover {
	background-color:#0CF;	
}

.red{
    background: red !important;
}

.green{
    background: green !important;
}

input.editor-text{
    background: transparent !important;
    border: transparent !important;
}

.customSelected {
    z-index: 10;
    background: #DFE8F6 !important;
}
.ng-invalid {
	border: 1px solid red;
}

body {
	font-family: Arial, Helvetica, sans-serif;
}

body,td,th {
	font-size: 14px;
	margin: 0;
}

table {
	border-collapse: separate;
	border-spacing: 2px;
	display: table;
	margin-bottom: 0;
	margin-top: 0;
	-moz-box-sizing: border-box;
	text-indent: 0;
}

a:link,a:visited,a:hover {
	color: #5D6DB6;
	text-decoration: none;
}

.error {
	color: red;
}

.ui-helper-hidden {
	display: none;
}

JavaScript

var grid;
  var columns = [
    {id: 0, name: "Title", field: "title"},
    {id: 1, name: "Duration", field: "duration",behavior:"select"},
    {id: 2, name: "% Complete", field: "percentComplete"},
    {id: 3, name: "Start", field: "start"},
    {id: 4, name: "Finish", field: "finish"},
    {id: 5, name: "Effort Driven", field: "effortDriven"}
  ];

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

  $(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);
    
    $('#myGrid .slick-row').on( 'click', function () {
      $(this).toggleClass('selected');
    });   
    
   
        

    
    
    
  })