If you implement tables and using Knockout.js to push data updates from JS to HTML - probably you experience a situation when it doesn't work to push an update for one of the columns. I mean you could replace the whole observable array element - this would cause full row refresh. But visually this doesn't look nice and why to refresh the whole row, if only one (or few) element (-s) from the row must be refreshed.
If you need to refresh a specific array element (or row column in other words) - you must define the value of that column to be observable.
Refresh will be happening much more smooth, instead of refreshing whole row. See how fast Risk column value is changed after clicking on Process button:
Table is implemented with Oracle JET table component. JET table allows to define template slots, this helps to create a better structure for table columns implementation:
Risk column - the one which is being refreshed is defined as an observable variable in the array:
A new value for Risk column is set directly - by iterating array elements. Refresh on UI happens automatically, through Knockout observable:
Sample application source code is available on my GitHub repo.
If you need to refresh a specific array element (or row column in other words) - you must define the value of that column to be observable.
Refresh will be happening much more smooth, instead of refreshing whole row. See how fast Risk column value is changed after clicking on Process button:
Table is implemented with Oracle JET table component. JET table allows to define template slots, this helps to create a better structure for table columns implementation:
Risk column - the one which is being refreshed is defined as an observable variable in the array:
A new value for Risk column is set directly - by iterating array elements. Refresh on UI happens automatically, through Knockout observable:
Sample application source code is available on my GitHub repo.
No comments:
Post a Comment