991 - Add Datagrid editing

[tmcconechy]

Explain the details for making this change. What existing problem does the pull request solve?

This PR adds the ability to edit input cells and checkbox editors in the datagrid. As well as a lot of editing related features. Like addRow, clearRow ect. Validation and dirty tracking

Related github/jira issue (required):
Fixes #991
Fixes #1057

Steps necessary to review your pull request (required):
Misc

• http://localhost:4300/ids-alert/example.html alerts can hover tooltips now
• card context menus dont break out of the card
• checkbox can not have animation
• delimeter misspelled and fixed
• menu can be toggleable. Try row heights
• review PR/Docs

Basics

• go to http://localhost:4300/ids-data-grid/editable.html
• click into the description cell and type
• in the ledger cell a mask is on for 4 letters
• in pub date can only mask a date
• in pub time can only mask a time
• in price time can only mask a decimal
• in price int time can only mask a integer
• post history is a checkbox
• http://localhost:4300/ids-data-grid/editable-inline.html is the same but the editor is visible visually
• test row heights / themes and RTL all works

Validation/Dirty

• clear the description and hit enter and an error will show
• try and reset the error
• same for dirty indicator
• when some cells are dirty type $('ids-data-grid').dirtyCells to get an output

Buttons

• try the add button to see addRow work
• try the delete button to see removeRow work (works on first selected row)
• try the clear button to see clear work (works on first selected row)

Keyboard

• ENTER] Start editing
• [ENTER] Finish editing and start editing the same cell in next row if editNextOnEnterPress is on
• [SHIFT] + [ENTER] Same as above but with previous row if editNextOnEnterPress
• [F2] Finish editing and stay in same cell
• [CMD/CTRL] + [ENTER] Also Finish editing
• [ESC] Reverts the value back to its original value and cancels editing
• Start Typing any key to start edit
• Space Bar -> works with selection and keyboard when not editing
• [TAB] Finish editing and start editing the next cell (replaces actionable mode)
• [SHIFT] + [TAB] Finish editing and start editing the previous cell (replaces actionable mode)

Included in this Pull Request:

• An e2e or functional test for the bug or feature.
• A note to the change log.

[jdilag90]

Nice! couple things I found by following the pr test instructions

Selecting rows with description 106 & 108 and then clicking delete button, deletes rows with description 106 & 109.

Clearing an editable description then pressing Enter doesn't show required error, clearing and then focusing out with mouse click does trigger the error though

[tmcconechy]

thanks @jdilag90 fixed those 2....

[deep7102]

Looks nice, found few as:

http://localhost:4300/ids-data-grid/editable.html

• clear wrong row

- make error by removing `108` from `Description` column 2nd last row
- click sort, now this error row will move to 1st row
- click on checkbox to select this first row
- click on `clear` button
- see it clear but wrong row, and it reset the sort it self

• error cell not move with rearrange

- make error by removing `102` from `Description` column 2nd row
- drag and move `Description` column to somewhere else
- see error cell not moved along column

• error cell color not consistent

- switch to dark or contrast theme
- make error by removing `102` from `Description` column 2nd row
- and make error by removing `108` from `Description` column 2nd last row
- click sort, now this error rows will move to top
- but it change the cell color

[tmcconechy]

@deep7102 and all. I think i got everything here please check again.

[EdwardCoyle]

Everything looked good functionality-wise, but something is out of sorts in the tests.

[deep7102]

Looks good 🍌