DOC: Release version 0.15.0

CHANGELOG.md

 # Change log
 
+- `0.15.0`:
+    - [$.formhandler](docs/formhandler.md) now supports client-side validation
+      and sorting by multiple columns. A bug related to encoding special
+      characters is also fixed.
+
 - `0.14.0`:
     - [$.formhandler](docs/formhandler.md) uses a `onhashchange: false` to
       disable changing the URL when elements are selected. This is useful when

docs/formhandler.md

@@ -30,72 +30,70 @@ The full list of options is below. Simple options can be specified as `data-` at
     - `title`: for header display. Defaults to the same value as `name`
     - `type`: `text` (default) / `number` / `date`. Data type. Determines filters to be used
     - `format`: string / function that returns formatted cell display value.
-      - function accepts an object with these keys:
-        - `name`: column name
-        - `value`: cell data value
-        - `row`: row data
-        - `index`: row index
-        - `data`: the dataset from `src`
-      - strings specify a numeral.js format if the value is a number (you must include numeral.js)
-      - strings specify a moment.js format if the value is a date (you must include moment.js)
-    - `editable`: `true` (default) / `false`. When `true`, edit and save buttons appears at end of each row.
-      To bind UI input element such as dropdown, datepicker, radio etc., `editable` accepts an object with these keys.
-      - `input`: **Mandatory**. The type of input element to use. The valid values are checkbox, radio, range, select, and any other legal [HTML form input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).
-      - `options`: An array of options to select from. **Mandatory** if `input` is either of `select` or `radio`
-      - `attrs`: To place common attributes such as max, min, placeholder, name etc., on the input.
-        Example: `{placeholder: "Age", max:100}` renders `<input placeholder="Age" max="100">`
-      - `validationMessage`: The message to be shown when invalid input is entered.
-        Example: `"Age must be less than 100"`
+        - function accepts an object with these keys:
+            - `name`: column name
+            - `value`: cell data value
+            - `row`: row data
+            - `index`: row index
+            - `data`: the dataset from `src`
+        - strings specify a numeral.js format if the value is a number (you must include numeral.js)
+        - strings specify a moment.js format if the value is a date (you must include moment.js)
+    - `editable`: `true` (default) / `false`. When `true`, edit and save buttons appears at end of each row. To bind UI input element such as dropdown, datepicker, radio etc., `editable` accepts an object with these keys.
+        - `input`: **Mandatory**. The type of input element to use. The valid values are checkbox, radio, range, select, and any other legal [HTML form input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).
+        - `options`: An array of options to select from. **Mandatory** if `input` is either of `select` or `radio`
+        - `attrs`: To place common attributes such as max, min, placeholder, name etc., on the input.
+          Example: `{placeholder: "Age", max:100}` renders `<input placeholder="Age" max="100">`
+        - `validationMessage`: The message to be shown when invalid input is entered.
+          Example: `"Age must be less than 100"`
     - `template`: string template / function that renders the cell.
-      - function accepts an object with these keys:
-        - `name`: column name
-        - `value`: cell data value
-        - `format`: formatted cell display value
-        - `link`: cell link value (if applicable)
-        - `index`: row index
-        - `row`: row data
-        - `data`: the dataset from `src`
-      - string template can use the above variables
+        - function accepts an object with these keys:
+            - `name`: column name
+            - `value`: cell data value
+            - `format`: formatted cell display value
+            - `link`: cell link value (if applicable)
+            - `index`: row index
+            - `row`: row data
+            - `data`: the dataset from `src`
+        - string template can use the above variables
     - `sort`: `true` / `false` / operators dict with:
-      - `{'': 'Sort ascending', '-': 'Sort descending'}` (default)
+        - `{'': 'Sort ascending', '-': 'Sort descending'}` (default)
     - `filters`: `true` (default) / `false` / operators dict with:
-      - `{'', 'Equals...', '!', 'Does not equal...', ...}`.
-        The default list of operators is based on the auto-detected type of the column.
+        - `{'', 'Equals...', '!', 'Does not equal...', ...}`. The default list of operators is based on the auto-detected type of the column.
     - `link`: string / function that generates a link for this each cell.
-      - If no `link:` is specified, clicking on the cell filters by that cell.
-      - If `link:` is a function, opens a new window with the URL as `fn(args)`.
-        - function accepts an object with these keys:
-          - `name`: column name
-          - `value`: cell data value
-          - `format`: formatted cell display value
-          - `index`: row index
-          - `row`: row data
-          - `data`: the dataset from `src`
-        Example: `function(args) { return 'https://example.org/city/' + args.value }`
-      - If `link:` is a string, opens a new window with the string URL interpolated as a lodash template with an object (mentioned above) as data.
-        Example: `"https://example.org/city/<%- value >"`
+        - If no `link:` is specified, clicking on the cell filters by that cell.
+        - If `link:` is a function, opens a new window with the URL as `fn(args)`.
+            - function accepts an object with these keys:
+                - `name`: column name
+                - `value`: cell data value
+                - `format`: formatted cell display value
+                - `index`: row index
+                - `row`: row data
+                - `data`: the dataset from `src`
+            - Example: `function(args) { return 'https://example.org/city/' + args.value }`
+        - If `link:` is a string, opens a new window with the string URL interpolated as a lodash template with an object (mentioned above) as data.
+          Example: `"https://example.org/city/<%- value >"`
     - `hideable`: `true` (default) / `false`. Show or hide `Hide` option in header dropdown
     - `hide`: `true` / `false` (default). Hides the column
     - `unique`: TODO: {dict of query parameter and display value} or [list of values] or function?
 - `edit`: Shows the Edit control. Can be `true` / `false` (default). Can also pass an object.
-  - `done`: function that gets called after saving the edited row.
+    - `done`: function that gets called after saving the edited row.
 - `add`: Show the Add control. Can be `true` / `false` (default). Can also pass an object.
-  - `done`: function that gets called after saving the new row.
+    - `done`: function that gets called after saving the new row.
 - `actions`: A list of objects. you need not add it to actions
-  - `{{action}}`: a function() that gets triggered on clicking the element with `data-action='{{action}}` attribute. The value of `data-action` attribute must match with key `{{action}}` in `actions`.
-      - function accepts an object with these keys:
-        - `row`: row data
-        - `index`: index of the row in the dataset from `src`
-        - `notify(message)`: a function that shows a notification
-      - If the return value can be a jQuery deferred (e.g. `$.ajax`), it shows a loading indicator and a success / failure message when the deferred is resolved. Example:
-        - `highlight_row`: `function(obj) { $(obj.row).addClass('.yellow_color')}`. Either a new column can be defined in `columns:` (example: {`name`: `Additional Col`}) with cell_template having an element with data attribute as `data-action='highlight_row'` or can use an existing column but with custom template that has an element with data attribute as `data-action='highlight_row'`.
-  - Note: DELETE operation is executed on a row if an element has data attribute `data-action='delete'`. If `delete` action is given in `actions`, the function given for `delete` is executed on click of an element with `data-action='delete'` instead od executing DELETE operation.
+    - `{{action}}`: a function() that gets triggered on clicking the element with `data-action='{{action}}` attribute. The value of `data-action` attribute must match with key `{{action}}` in `actions`.
+        - function accepts an object with these keys:
+            - `row`: row data
+            - `index`: index of the row in the dataset from `src`
+            - `notify(message)`: a function that shows a notification
+        - If the return value can be a jQuery deferred (e.g. `$.ajax`), it shows a loading indicator and a success / failure message when the deferred is resolved. Example:
+            - `highlight_row`: `function(obj) { $(obj.row).addClass('.yellow_color')}`. Either a new column can be defined in `columns:` (example: {`name`: `Additional Col`}) with cell_template having an element with data attribute as `data-action='highlight_row'` or can use an existing column but with custom template that has an element with data attribute as `data-action='highlight_row'`.
+    - Note: DELETE operation is executed on a row if an element has data attribute `data-action='delete'`. If `delete` action is given in `actions`, the function given for `delete` is executed on click of an element with `data-action='delete'` instead od executing DELETE operation.
 - `onhashchange`: `true` re-renders table on hashchange based on filters in URL
   hash. Set `false` to disable listening to hashchange (default `true`)
 - `table`: Shows the table control. Can be:
-  - `true`: displays a table (default)
-  - `'grid'`: renders a grid instead of a table
-  - `false`: disables the table (and shows nothing for the main content)
+    - `true`: displays a table (default)
+    - `'grid'`: renders a grid instead of a table
+    - `false`: disables the table (and shows nothing for the main content)
 - `count`: Shows the number of rows. Can be `true` (default) / `false`
 - `page`: Shows the page control. Can be `true` (default) / `false`.
 - `pageSize`: page size. Defaults to 100
@@ -112,13 +110,13 @@ The full list of options is below. Simple options can be specified as `data-` at
     - returns a dict with modified values of `data` and `meta`
 - `icon`: if `table: 'grid'` is used, display an icon. string / function that renders the cell.
     - function accepts an object with these keys:
-      - `row`: row data
-      - `data`: the dataset from `src`
-      - `index`: index of the row in the dataset from `src`
-  Example:
-    - `icon: 'fa fa-home fa-3x'` renders a FontAwesome home icon
-    - `icon: './path/to/image.png'` renders the image specified
-    - `icon: function(args) { return args.row['image_link'] }` renders an image with `src` attribute as the value from column name `image_link`
+        - `row`: row data
+        - `data`: the dataset from `src`
+        - `index`: index of the row in the dataset from `src`
+    - Example:
+        - `icon: 'fa fa-home fa-3x'` renders a FontAwesome home icon
+        - `icon: './path/to/image.png'` renders the image specified
+        - `icon: function(args) { return args.row['image_link'] }` renders an image with `src` attribute as the value from column name `image_link`
 
 **Advanced**. Each component can have a target which specifies a selector. For
 e.g., to render the export button somewhere else, use
@@ -138,6 +136,7 @@ targets are:
 `data-search-template="<input type='search'>"` will replace the search template
 with a simple input. Available template strings are:
 - `tableTemplate`
+- `table_gridTemplate`
 - `countTemplate`
 - `pageTemplate`
 - `sizeTemplate`

package.json

 {
   "name": "g1",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Gramex 1.x interaction library",
   "license": "MIT",
   "author": "S Anand <s.anand@gramener.com>",