javascript - Manually trigger slickgrid events -
i want manually trigger slickgrid event. eg: want change current cell move down when press down arrow. can achieve when slickgrid in focus, once focus lost web page, pressing down arrow 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 = []; (var = 0; < 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 dataview not 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, though can active cell data, grid not updated (render not refreshed)
any advice on how make slickgrid react such global events highly appreciated. in advance.
this code addresses issue,
<!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 curr_cell; 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 = []; (var = 0; < 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) { curr_cell= args.cell; 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_cell= args.cell; curr_row = args.row; sata(curr_row) }); }); function sata(row){ var row_data = dataview.getitem(row); // read dataview not 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.gotocell(curr_row, curr_cell) grid.onclick.notify({row:curr_row, cell:curr_cell}) } if (e.which == 40){ curr_row = curr_row + 1; grid.gotocell(curr_row, curr_cell) grid.onclick.notify({row:curr_row, cell:curr_cell}, e) } }); </script> </body> </html> please advice, if there better way achieve this.
Comments
Post a Comment