JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › grid very simple editing example
Tagged: grid
- This topic has 2 replies, 2 voices, and was last updated 1 year, 2 months ago by edwardsmarkff.
-
AuthorPosts
-
August 15, 2023 at 5:15 pm #108543edwardsmarkffParticipant
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, 2 months ago by edwardsmarkff.
- This topic was modified 1 year, 2 months ago by edwardsmarkff.
- This topic was modified 1 year, 2 months ago by edwardsmarkff.
- This topic was modified 1 year, 2 months ago by edwardsmarkff.
- This topic was modified 1 year, 2 months ago by edwardsmarkff.
- This topic was modified 1 year, 2 months ago by edwardsmarkff.
August 16, 2023 at 6:22 am #108552svetoslav_borislavovParticipantHi,
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 BorislavovSmart UI Team
https://www.htmlelements.com/August 16, 2023 at 3:59 pm #108554edwardsmarkffParticipantha ha ! i should have known that you would have an INFINITELY better way! thank you.
- This reply was modified 1 year, 2 months ago by edwardsmarkff.
-
AuthorPosts
- You must be logged in to reply to this topic.