Comments (9)
Further info, grid options are configured thus:
this.gridOptions = {
enableAutoResize: true,
enableSorting: true,
datasetIdPropertyName: 'id',
enableCellNavigation: true,
editable: true,
enableAddRow: true,
enableCompositeEditor: true,
enableRowSelection: true,
autoResize: {
container: this.gridContainer?.nativeElement,
bottomPadding: 2,
rightPadding: 2,
},
rowHeight: 48,
externalResources: [this.compositeEditorInstance],
};
I wasn't sure why but enableRowSelection: true,
seems to be required for the composite editor to work. It seems like a strange requirement for adding a row though.
from angular-slickgrid.
Update:
- the items are actually showing the
highlight
style, notselected
(I just happen to use the same color for both). - another bug seems to be that the
:hover
style on rows is overridden by thehighlight
style, but for even rows only, so that hovering odd rows shows the :hover style when they are highlighted, but even rows it does not.
from angular-slickgrid.
A workaround here is to set the GridServiceInsertOption.highlightRow
to false
in the call to addItem
(it defaults to true
).
Otherwise, it seems the bug is that all other rows are highlighted, instead of the newly added row.
from angular-slickgrid.
I wasn't sure why but
enableRowSelection: true,
seems to be required for the composite editor to work. It seems like a strange requirement for adding a row though.
We use Composite Editor mostly, and strictly in our case, for Mass Update or Mass Selection updates hence why Row Selection is required by the plugin.
The row highlight after update is achieved by using SlickGrid item metadata change, it adds a CSS class named highlight
for 1.5sec which simulates the highlight flashing. Perhaps the highlight
is too generic of a name and is causing issues on your side because that CSS class is already defined for something else? I guess that it might be better to rename that class for something less generic, maybe slickgrid-highlight
. Could that be the cause of your issue? For reference, the highlight
is used in this line of the Slickgrid-Universal highlightRowByMetadata()
method of the GridService... hmmm actually taking a look at the slick-bootstrap.scss
file, the .hightlight
on specific to .grid-canvas .slick-row .highlight
(here), so even if it's a generic name it shouldn't cause issues with any other generic highlights.
For the other styling issues you mentioned, I think it would be easier if you contribute a fix, all the Composite Editor styling should be in Slickgrid-Universal in this file
https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/slick-editors.scss#L154
Note however that I published v7.0 couple days and therefore I stopped supporting v6.x. It would be better if you migrate to v7.0, but note that it requires Angular 17
Without a full repro, it's hard to provide any help and the Example 11 is working as expected and has Cypress E2E tests so I cannot replicate without a full repro, perhaps you can test in Example 11 and provide code that fails with that demo
from angular-slickgrid.
I think I've discovered the source of my issue - the data are stored in the database with rowClass: 'highlight'
because that value is being written to the dataContext
. I am saving dataContext
to the database in the onSave
callback. Perhaps there's a better way to write the new row to the backend? I would not expect the dataContext
to be mutated and have extra properties added to it. The code I have looks like:
this.compositeEditorInstance?.openDetails({
headerTitle: modalTitle,
insertOptions: {
// highlightRow: false,
},
modalType,
// insertNewId: 1234, // you can provide a custom Id (defaults to last Id+1)
// insertOptions: { position: 'bottom' }, // if you wish to add the item to the bottom (defaults to top of the grid)
onError: (error) => {
console.error(error);
alert(error.message);
}, // you should define how to deal with error coming from the modal
// you can optionally provide an async callback method when dealing with a backend server
onSave: (formValues, selection, dataContext) => {
console.log('saving', { formValues, selection, dataContext });
return new Promise((resolve, reject) =>
this.dataViews
.upsertDataViewEntry(this.collection, dataContext.id, dataContext)
.subscribe({
next: (result) => {
const updatedDocument = result.result;
Object.assign(dataContext, updatedDocument);
resolve(true);
},
error: (err) => reject(err),
})
);
},
});
I can see that rowClass
propety is stored to the DB (via call to upsertDataViewEntry
) although it is later deleted from the dataContext object so it doesn't actually show up in the console.log
that I have there. It seems kind of fragile because if someone happens to use a field named rowClass
then it could presumably break the grid display.
from angular-slickgrid.
Yeah ok, it does use rowClass
in the Grid Service method, the reason is because I followed this Stack Overflow answer on how to highlight a row. For the rare case that the data context is mutated (e.g. TreeData/RowDetail do mutate data context), I typically prefix these props with 2 underscores __rowClass
, that should be better to avoid conflicts with user's code. I don't know if there's a better way to highlight, I just followed the SO like I said, so I can't say much about its fragility but I could use the __
prefix though
from angular-slickgrid.
Thanks for your quick response! For now, I think I can work around this knowing that the rowClass
property can be ignored when persisting the newly added data.
I'm not too familiar with the underlying APis but maybe it would be possible to store metadata somewhere else, i.e. not on the data object itself. Perhaps a separate map, rowId -> metadata?
from angular-slickgrid.
So I looked at possibly reimplementing the row highlight and after investigating, I decided to address the issue directly in the SlickGrid core library (because with the new major release, SlickGrid is now merged in Slickgrid-Universal). I don't want to deviate the SlickGrid core lib too much but in this case I made an exception since in SlickGrid we already have a ref (row cache) to all the currently shown Slick rows in the grid (including their HTML Node ref), since we have that I can simply add/remove CSS classes for a certain duration period and voila! At the end of it, I no longer need the use of ItemMetadata (which indirectly required to mutate the item, as you pointed out as being fragile, and also no longer need to update the item in the grid), so performance wise it should also be a lot better. I also added a new grid option rowHighlightCssClass
that is defaulted to highlight-animate
and when in play, it will use CSS animation (similar to prior code but much lighter and it seems visually better too). You can see more info in the Slickgrid-Universal PR referenced above (including an animated GIF of the UI with the new code)
So all in all, this is much better but will only be available in Angular-Slickgrid v7.x (same note as I left in the other issue, I don't want to support older versions)
from angular-slickgrid.
The row highlight should be a lot better with the new implementation in v7.1.0, you can see the updated demo Example 11 to test it out.
from angular-slickgrid.
Related Issues (20)
- Frozen columns do not fit in viewport HOT 3
- The Multi-column tri-state sorting option doesn't work HOT 2
- Boolean column with filter collection and render html not working, displays true/false HOT 7
- Update Step By Step Install Wiki page HOT 10
- Example 22 keeps formatter components alive outside of grid HOT 20
- Example 22 shows temp ng-template being rendered for a short period
- cell highlighted stays on the same position even when filtered HOT 1
- Attach Angular Component in AsyncPostRender and keep it running HOT 2
- I have issues with Editor text box. HOT 6
- I am getting error when I use multipleSelect . "Cannot find type definition file for 'trusted-types'. " HOT 9
- Shared module gridOptions seetings not preserve in page module HOT 15
- Incorrect dataContext is passed in `onSave` callback using composite editor HOT 6
- Polyfills ERROR TypeError: Function.prototype.toString requires that 'this' be a Function at Boolean.toString (<anonymous>) HOT 25
- Custom header and footer templates, like for Aurelia
- No data warning stays if data lazy loaded and gridOptions changed HOT 12
- Angular slickgrid upgrade does not working HOT 3
- between Operator HOT 1
- Angular esbuild error on DomPurify with rowDetailView and no pre/post template HOT 5
- CSP compliance HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-slickgrid.