DOC: update Formhandler binding docs

CONTRIBUTING.md

@@ -35,7 +35,7 @@ To test unit tests on other browsers using Selenium:
   - `test-<module>.html` for each browser module
   - `test-<library>.js` for each library that can be tested directly on node.js
   - `server.js` runs tests on [Puppeteer](https://github.com/GoogleChrome/puppeteer)
-  - `tape.js` is dynamically created using browserify to help with test cases. This is not committed
+  - `tape.js` is dynamically created using browserify to help with test cases. This is not committed. To locally create `tape.js` file, run `npm test`.
   - Other test dependencies
 
 # Interaction conventions

docs/dropdown.md

@@ -75,7 +75,7 @@ To use bootstrap-select options, use `options:`
 - `target`: defines how URL is updated. Can be `''` (Default), `#` or `pushState`
 - `key`: key with which URL is updated.
 - `multiple`: To render a dropdown that supports multi-select. Can be `true` or `false` (Default).
-- `options`: Supports same options as [bootstrap-select options](https://silviomoreto.github.io/bootstrap-select/options/)
+- `options`: Supports same options as [bootstrap-select options](https://developer.snapappointments.com/bootstrap-select/options/)
 
 
 ## $.dropdown events

docs/formhandler.md

@@ -39,6 +39,16 @@ The full list of options is below. Simple options can be specified as `data-` at
       - 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` element.
+
+          Example:
+          `input: 'number', attrs: {step: 10, placeholder: '0 - 1000', name: 'some_name'}` would render as
+
+          `<input step=10 placeholder="0 - 1000" name="some_name" />`
+
     - `template`: string template / function that renders the cell.
       - function accepts an object with these keys:
         - `name`: column name
@@ -79,8 +89,9 @@ The full list of options is below. Simple options can be specified as `data-` at
       - function accepts an object with these keys:
         - `row`: row data
         - `index`: index of the row in the dataset from `src`
-      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'`.
+        - `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.
 - `table`: Shows the table control. Can be:
   - `true`: displays a table (default)
@@ -157,6 +168,8 @@ Features to be implemented:
 
   Note: Make sure `load` event listener is attached before calling `$.formhandler()`
 
+- `editmode` is fired on the source when the Edit button is clicked and table changes to edit mode.
+
 ## $.formhandler examples
 
 Render a table using the FormHandler at `./data`:
@@ -186,3 +199,84 @@ Customize cell rendering to display a chart in a cell:
   })
 </script>
 ```
+
+In edit mode, show HTML input bindings like Dropdown, Datepicker, Number fields.. :
+
+```html
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css"/>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
+
+<div class="edit-fh" data-src="./data"></div>
+<script>
+      $('.edit-fh').formhandler({
+        columns: [
+          {
+            name: 'ID',
+            editable: false     // Disable edit for column "ID" because it is a primary key and cannot be edited.
+          },
+          {
+            name: 'Continent'  // Defaults to editable: false
+          },
+          {
+            name: 'c1',
+            editable: {
+              input: 'number',
+              attrs: {        // keys and values in `attrs` will be added as <input type="number" min=10 max=100 placeholder="0 - 100"/>
+                min: 10,
+                max: 100,
+                placeholder: '0 - 100'
+              }
+            }
+          },
+          {
+            name: 'Stripes',
+            editable: {
+              input: 'select',  // renders a default select dropdown as <select class="form-control form-control-sm">...</select>
+              options: [        // `options` is mandatory because `input` is "select"
+                'Vertical',
+                'Horizontal',
+                'Diagonal'
+              ]
+            }
+          },
+          {
+            name: 'Shapes',
+            editable: {
+              input: 'select',
+              options: [
+                'Circle',
+                'Crescent',
+                'Triangle',
+                'Stars'
+              ],
+              attrs: {
+                class: 'select-example-basic',  // To render the dropdown as select2 library dropdown, add class attribute as identifier
+                name: 'shapes'
+              }
+            }
+          },
+          {
+            name: 'date_col',
+            editable: {
+              input: 'text',
+              attrs: { // To edit column "date_col" using a date picker widget using "bootstrap-datepicker" library, add class attribute as identifier
+                class: 'datepicker-example form-control form-control-sm'
+              }
+            }
+          }
+        ]
+      }).on('editmode', function () {
+        // turns <select class="select-example-basic">...</select> to select2 dropdown widget
+        $('.select-example-basic').select2()
+        // turns <input type="text" class="datepicker-example"/> to bootstrap-datepicker calendar widget
+        $('.datepicker-example').datepicker({
+          format: 'dd-mm-yyyy',
+          todayHighlight: true,
+          autoclose: true
+        })
+      })
+</script>
+```