I want to manually trigger slickgrid event. For eg: I want to change current cell to move down when i press down arrow. This i can achieve only when slickgrid is in focus, once the focus is lost to the web page, pressing down arrow will not change active cell.
I tried this:
<!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="mycss/slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="mycss/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
<link rel="stylesheet" href="mycss/examples.css" type="text/css"/>
</head>
<body>
<div>
<p id="p_title"></p>
<p id="p_duration"></p>
<p id="p_Complete"></p>
<p id="p_start"></p>
<p id="p_finish"></p>
<p id="p_effort-driven"></p>
</div>
<table width="100%">
<tr>
<td valign="top" width="50%">
<div id="myGrid" style="width:600px;height:500px;"></div>
</td>
</tr>
</table>
<script src="js/lib/jquery-1.7.min.js"></script>
<script src="js/lib/jquery.event.drag-2.2.js"></script>
<script src="js/slick.core.js"></script>
<script src="js/slick.grid.js"></script>
<script src="js/slick.dataview.js"></script>
<script>
var grid;
var dataView;
var curr_row;
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"}
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
$(function () {
var data = [];
for (var i = 0; i < 50; i++) {
data[i] = {
id: 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)
};
}
dataView = new Slick.Data.DataView();
dataView.setItems(data);
grid = new Slick.Grid("#myGrid", dataView, columns, options);
grid.onKeyDown.subscribe(function (e, args) {
if (e.which == 38) {
curr_row= args.row - 1;
sata(curr_row)
}
if (e.which == 40){
curr_row = args.row + 1;
sata(curr_row)
}
});
grid.onClick.subscribe(function (e, args){
curr_row = args.row;
sata(curr_row)
});
});
function sata(row){
var row_data = dataView.getItem(row); // Read from dataView not the grid data
var cell_contents = row_data['title'];
alert(cell_contents);
}
$(document).keydown(function(e) {
if (e.which == 38) {
curr_row= curr_row - 1;
grid.onClick.notify({row:curr_row})
}
if (e.which == 40){
curr_row = curr_row + 1;
grid.onClick.notify({row:curr_row})
}
});
</script>
</body>
</html>
But, even though i can now get active cell data, the grid not updated (render not refreshed)
Any advice on how to make slickgrid to react to such global events will be highly appreciated. Thanks in advance.
