Commit f36ecaa0 authored by S Anand's avatar S Anand

DOC: update Formhandler binding docs

parent fde83d85
...@@ -35,7 +35,7 @@ To test unit tests on other browsers using Selenium: ...@@ -35,7 +35,7 @@ To test unit tests on other browsers using Selenium:
- `test-<module>.html` for each browser module - `test-<module>.html` for each browser module
- `test-<library>.js` for each library that can be tested directly on node.js - `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) - `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 - Other test dependencies
# Interaction conventions # Interaction conventions
......
...@@ -75,7 +75,7 @@ To use bootstrap-select options, use `options:` ...@@ -75,7 +75,7 @@ To use bootstrap-select options, use `options:`
- `target`: defines how URL is updated. Can be `''` (Default), `#` or `pushState` - `target`: defines how URL is updated. Can be `''` (Default), `#` or `pushState`
- `key`: key with which URL is updated. - `key`: key with which URL is updated.
- `multiple`: To render a dropdown that supports multi-select. Can be `true` or `false` (Default). - `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 ## $.dropdown events
......
...@@ -39,6 +39,16 @@ The full list of options is below. Simple options can be specified as `data-` at ...@@ -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 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) - 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. - `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. - `template`: string template / function that renders the cell.
- function accepts an object with these keys: - function accepts an object with these keys:
- `name`: column name - `name`: column name
...@@ -79,8 +89,9 @@ The full list of options is below. Simple options can be specified as `data-` at ...@@ -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: - function accepts an object with these keys:
- `row`: row data - `row`: row data
- `index`: index of the row in the dataset from `src` - `index`: index of the row in the dataset from `src`
Example: - `notify(message)`: a function that shows a notification
- `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'`. - 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. - 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: - `table`: Shows the table control. Can be:
- `true`: displays a table (default) - `true`: displays a table (default)
...@@ -157,6 +168,8 @@ Features to be implemented: ...@@ -157,6 +168,8 @@ Features to be implemented:
Note: Make sure `load` event listener is attached before calling `$.formhandler()` 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 ## $.formhandler examples
Render a table using the FormHandler at `./data`: Render a table using the FormHandler at `./data`:
...@@ -186,3 +199,84 @@ Customize cell rendering to display a chart in a cell: ...@@ -186,3 +199,84 @@ Customize cell rendering to display a chart in a cell:
}) })
</script> </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>
```
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment