javascript - slickgrid vertical scrolling while column reorder -
i using slickgrid in project , when try reorder columns , web page scrolls vertically , column headers become invisible .i found in slickgrid.js , in function setupcolumnreorder, start function called when user begins drag column. changed start , stop functions in setupcolumnreorder below. time , first time when user begins drag column header , web page scrolls automatically. when user drags second time works intended , no vertical scrolling occurs . how prevent vertical scrolling in first drag operation ?
function setupcolumnreorder() { $headers.filter(":ui-sortable").sortable("destroy"); $headers.sortable({ containment: "parent", distance: 3, axis: "x", cursor: "default", tolerance: "intersection", helper: "clone", placeholder: "slick-sortable-placeholder ui-state-default slick-header-column", start: function (e, ui) { /********************i added part******************************************************/ $("body").css("overflow", "hidden"); $(this.parentnode).css("overflow", "hidden"); // window.scrollto(0, 0) ; /********************i added part******************************************************/ ui.placeholder.width(ui.helper.outerwidth() - headercolumnwidthdiff); $(ui.helper).addclass("slick-header-column-active"); }, beforestop: function (e, ui) { $(ui.helper).removeclass("slick-header-column-active"); }, stop: function (e) { /********************i added part******************************************************/ $("body").css("overflow", "auto"); $(this.parentnode).css("overflow", "auto"); /********************i added part******************************************************/edit : adding example vertical scrolling occurs .
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="shortcut icon" type="image/ico" href="favicon.ico" /> <title>slickgrid example 2: formatters</title> <link rel="stylesheet" href="../slick.grid.css" type="text/css"/> <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/> <link rel="stylesheet" href="examples.css" type="text/css"/> <style> .cell-title { font-weight: bold; } .cell-effort-driven { text-align: center; } .green { background-color: green; } .red { background-color: red; } .orange { background-color: orange; } </style> <script src="../lib/firebugx.js"></script> <script src="../lib/jquery-1.11.2.min.js"></script> <script src="../lib/jquery-ui-1.11.3.min.js"></script> <script src="../lib/jquery.event.drag-2.3.0.js"></script> <script src="../slick.core.js"></script> <script src="../slick.formatters.js"></script> <script src="../slick.grid.js"></script> <script> // standard formatter returns string function formatter(row, cell, value, columndef, datacontext) { return value; } // extended formatter returns object { text , removeclasses, addclasses } // classes removed , added during update, or added on cell creation function statusformatter(row, cell, value, columndef, datacontext) { var rtn = { text: value, removeclasses: 'red orange green' }; if (value !== null || value !== "") { if (value < 33) { rtn.addclasses = "red"; } else if (value < 66) { rtn.addclasses = "orange"; } else { rtn.addclasses = "green"; } } return rtn; } var grid; var data = []; var columns = [ {id: "title", name: "title", field: "title", width: 120, cssclass: "cell-title", formatter: formatter}, {id: "duration", name: "duration", field: "duration"}, {id: "%", name: "% complete", field: "percentcomplete", width: 80, resizable: false, formatter: slick.formatters.percentcompletebar}, {id: "status", name: "status", field: "percentcomplete", width: 50, resizable: false, formatter: statusformatter}, {id: "start", name: "start", field: "start", minwidth: 60}, {id: "finish", name: "finish", field: "finish", minwidth: 60}, {id: "effort-driven", name: "effort driven", sortable: false, width: 80, minwidth: 20, maxwidth: 80, cssclass: "cell-effort-driven", field: "effortdriven", formatter: slick.formatters.checkmark} ]; var options = { editable: false, enableaddrow: false, enablecellnavigation: true }; $(function () { (var = 0; < 5; i++) { var d = (data[i] = {}); d["title"] = "<a href='#' tabindex='0'>task</a> " + i; d["duration"] = "5 days"; d["percentcomplete"] = math.min(100, math.round(math.random() * 110)); d["start"] = "01/01/2009"; d["finish"] = "01/05/2009"; d["effortdriven"] = (i % 5 == 0); } grid = new slick.grid("#mygrid", data, columns, options); }) </script> </head> <body> <table width="100%"> <tr> <td valign="top" width="50%"> <div id="mygrid" style="position:absolute;top:300px;width:700px;height:500px;"></div> </td> <td valign="top"> <h2>demonstrates:</h2> <ul> <li>width, minwidth, maxwidth, resizable, cssclass column attributes</li> <li>custom column formatters</li> <li>an extended formatter returning object { text , removeclasses, addclasses } rather string, allowing adding , removing css classes cell</li> </ul> <h2>view source:</h2> <ul> <li><a href="https://github.com/6pac/slickgrid/blob/master/examples/example2-formatters.html" target="_sourcewindow"> view source example on github</a></li> </ul> </td> </tr> </table> </body> </html>edit : problem seems related mozilla firefox. tested above code google chrome , no vertical scrolling occurs .
have replicated bug in basic examples?
can drag columns in http://6pac.github.io/slickgrid/examples/example2-formatters.html
problem occur there?
i'm not getting issues, if please specify browser , os using.
wiki
Comments
Post a Comment