grid very simple editing example

[edwardsmarkff]

hello all – total grid newbie here.

i am trying to think of the simplest way to interface the awesome grid with existing projects.   so it seems to me the simplest is just to load the grid and monitor any changes.

is there a better way to make sure a change has actually occurred?  all i can think of is to “capture” the value before any change attempt is made by setting an “originalValue” property like so: (sorry i cannot figure out how to indent except using underscores)

const grid = document.querySelector('smart-grid');
grid.editing.enabled = true;   // maybe better to do this in the grid definition?

grid.addEventListener( 'beginEdit', event => {
__const element = event.currentTarget;
__element.setAttribute('originalValue', event.detail.value);
});

grid.addEventListener( 'endEdit', event => {
__const element = event.currentTarget;
__if ( element.getAttribute('originalValue') != event.detail.value ) {
____console.log('id:', event.detail.id, 'name:', event.detail.dataField, 'value:', event.detail.value, 'old value:',element.getAttribute('originalValue'));
____console.table(event.detail.row.data);
__} else {
____console.info('skipping, no changes');
__}
});

opinions?

example here:  https://codepen.io/edwardsmarkf/pen/dywbPVy

• This topic was modified 1 year, 3 months ago by edwardsmarkff.
• This topic was modified 1 year, 3 months ago by edwardsmarkff.
• This topic was modified 1 year, 3 months ago by edwardsmarkff.
• This topic was modified 1 year, 3 months ago by edwardsmarkff.
• This topic was modified 1 year, 3 months ago by edwardsmarkff.
• This topic was modified 1 year, 3 months ago by edwardsmarkff.

[svetoslav_borislavov]

Hi,

To capture the change of a cell, you can use the onCellUpdate callback.
It accepts the following parameters:
(cells: Smart.Grid.Cell[], oldValues: any[], values: any[], confirm: {(commit: boolean): void})
This function is useful if you want to make Ajax call to a server to validate the cell changes.
If the changes are validated, invoke the confirm function.

Here is an example: https://codepen.io/svetoslavb04/pen/MWZgbZY

I hope this helps!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[edwardsmarkff]

ha ha !  i should have known that you would have an INFINITELY better way!   thank you.

• This reply was modified 1 year, 3 months ago by edwardsmarkff.

[Author]

Posts