Permalink
Browse files

Support RTL

Settings now include a boolean option - "rtl".
  • Loading branch information...
1 parent 8fa4178 commit d2809b4ab8db580845ce20598ecc8ee39435f9f2 @meyogi committed Dec 23, 2011
Showing with 242 additions and 69 deletions.
  1. +70 −0 examples/example-rtl.html
  2. +41 −1 slick.grid.css
  3. +131 −68 slick.grid.js
View
@@ -0,0 +1,70 @@
+<!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="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
+ <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.6.custom.css" type="text/css" media="screen" charset="utf-8" />
+ <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
+ </head>
+ <body style="direction:rtl;">
+ <table width="100%">
+ <tr>
+ <td valign="top" width="50%">
+ <div id="myGrid" style="width:600px;height:500px;display:none;"></div>
+ </td>
+ <td valign="top">
+ <h2>Demonstrates:</h2>
+ <ul>
+ <li>basic grid with minimal configuration</li>
+ </ul>
+ </td>
+ </tr>
+ </table>
+
+ <script src="../lib/jquery-1.7.min.js"></script>
+ <script src="../lib/jquery.event.drag-2.0.min.js"></script>
+
+ <script src="../slick.core.js"></script>
+ <script src="../slick.grid.js"></script>
+
+ <script>
+
+ var grid;
+
+ 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 = {
+ rtl: true,
+ 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").show();
+ })
+
+ </script>
+ </body>
+</html>
View
@@ -155,4 +155,44 @@ classes should alter those!
z-index: 10;
position: absolute;
border: 2px dashed black;
-}
+}
+
+
+
+/* ------------------- RTL ------------------- */
+
+.rtl .slick-header.ui-state-default {
+ border-left: auto;
+ border-right: 0px;
+}
+
+
+.rtl .slick-header-column.ui-state-default {
+ border-right: 0px;
+ border-left: 1px solid silver;
+ float: right;
+}
+
+.rtl .slick-sort-indicator {
+ margin-left: auto;
+ margin-right: 4px;
+}
+
+
+.rtl .slick-resizable-handle {
+ right: auto;
+ left: 0px;
+}
+
+
+
+.rtl .slick-cell, .rtl .slick-headerrow-column {
+
+ border: 1px solid transparent;
+ border-right: 1px solid transparent;
+ border-left: 1px dotted silver;
+ padding: 1px 1px 2px 2px;
+}
+
+
+
Oops, something went wrong.

0 comments on commit d2809b4

Please sign in to comment.