I'm using slickgrid library, I have a grid that I would like it to have the ability of selecting a row on click.
I'm using the code below, the grid click event is working I can print in the console the id of each row clicked but I'm not able to select it, so how can I do that please? Thanks.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>SlickGrid example 1: Basic grid</title> <link rel="stylesheet" href="js/SlickGrid/slick.grid.css" type="text/css"/> <link rel="stylesheet" href="js/SlickGrid/css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/> <link rel="stylesheet" href="css/exemple.css" type="text/css"/> </head> <body> <table width="100%"> <tr> <td valign="top" width="50%"> <div id="myGrid" style="width:480px;height:187px;"></div> </td> </tr> </table> <script src="js/SlickGrid/lib/jquery-1.7.min.js"></script> <script src="js/SlickGrid/lib/jquery.event.drag-2.2.js"></script> <script src="js/SlickGrid/slick.core.js"></script> <script src="js/SlickGrid/plugins/slick.rowselectionmodel.js"></script> <script src="js/SlickGrid/slick.grid.js"></script> <script> var grid; var columns = [ {id: "title", name: "Title", field: "title",selectable: true}, {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"} ]; var options = { enableCellNavigation: true, enableColumnReorder: false }; $(function () { var data = []; for (var i = 0; i < 5; 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.setSelectionModel(new Slick.RowSelectionModel()); grid.onClick.subscribe(function (e) { var cell = grid.getCellFromEvent(e); console.log(cell.row); grid.setSelectedRows(cell.row); e.stopPropagation(); }); }) </script> </body> </html>
This is a link to a page if you want to test Sample Page