I'm struggling to create an editable grid with ag-grid. I've found that using both a renderer and editor where both have useField creates problems when removing rows with react-final-form-array.
Keep in mind that a renderer is the readonly/normal state of the cell while the editor is the edit view; Editor is only rendered while editing.
https://codesandbox.io/s/infallible-violet-joej4?file=/src/App.js
In the example above, you'll see that I've commented out the renderer and validation rules. Commenting out the renderer prevents me from displaying validation errors--on top of this, ag-grid destroys the useField, so my validations are also lost.
Naively, I thought form validation instead of field validation was the way to go, but again, I still require a custom renderer to display validations or metadata.
I then thought of creating a two dimensional array that has all of the useField cells but this causes "Rendered more hooks than during the previous render." errors. I'm not well versed in hooks but I don't see <Field> working either.
Thoughts?
Moved away from updating by cell, and instead updated by grid. This let ag-grid be the source of truth that updates final-form as needed.
Related
I'm using ag-grid ng2 v28.1, and some columns are autosizing, and some are not (using selective column autoresize based on ColId). On both Chrome and Edge. I dug into the autosize code, and something is preventing the dummy container from actually growing its contents based on the dummy row/cells cloned into it. I see the cells with their content but the measuring span doesn't seem to be expanding based on its contents. I have stripped out all my own styles and div layers from my cellRender, and it still doesn't work. I can't find any CSS reason why that span won't expand to consider it's contents.
Anyone ever hit up against this wall?
I need to remove some cell/row properties field like Scope, H Align & V Align. Any way to remove this field.
Cell Properties:
Row Properties:
Thanks.
The table plugin's documentation can be found here:
https://www.tiny.cloud/docs/plugins/table/
There is not a way to hide these specific fields via configuration so your best solution would be to copy the table plugin and modify the code that displays these dialogs to hide the elements you don't want shown.
As a hack, you could simply add a "display:none!important" style targetting the elements you want to have hidden in the dialogs.
I advise against removing them from the DOM, as the tinyMCE plugin could be targeting them, thus generating javascript errors in the console, and possibly breaking things. Hiding them is a much safer hack.
I am quite new to ag-grid.
We are using ag-grid Angular version. All of our cells are editable in grid and there are approx more than 3000 cells.
Having an Angular form for grid and form control for each cell seems to make grid lot slower. specially while generating all form controls on load and before submitting form when all form control's validity is updated.
Has anyone found a better way to perform ag-grid cell validation with Angular?
Thank for any help.
In the ag-Grid documentation, data validation is suggested with a custom Cell Editor. In the cell editor component you can perform data validation on the cell input directly. Perhaps this gives you better performance than the Angular Form control.
See the "Numeric" column example on their website:
https://www.ag-grid.com/example-angular-editor/
I have components that are generated dynamically after they are added to the page. These components are generated on the fly and in some instances are floating elements. This makes it very dificult for parsys to draw correctly. All the time the parsys (parbase - css class name) has a height of 0. I can fix that by changing the default property of parbase from overflow="visible" to overflow="auto". However I want to know if anyone else has run into this issue and what is the best method to do this implementation when you are only on edit mode but ignore it on any other view.
So you have a few options.
First, you can check the WCMMode in the page header and if the mode is EDIT then you can load an "editmode.css" after your main CSS has loaded. This is where I put overrides to handle drawing issues like what you encountered.
This keeps it all in one place, and in any mode other than edit that css will never load.
The second option is to allow these items to flow normally in Edit mode and disable floats, as suggested above. Depending on how editing works, one or the other might be superior.
I have a CellTable with a bunch of cells that render to <input> tags. Tabbing between the inputs is broken because of CellTable's fancy event processing. It seems that tab inspires each cell to finishEditing, but that in turn hogs the focus and the focus never gets to the next <input>.
Setting tabIndex on each input does not seem to affect the behavior.
How can I restore the usual tabbing functionality?
I recently figured this out. Annoying, but simple once you find the magic.
Create a new Cell type to use in your table, as the stock TextInputCell specifies a tab index of -1. Basically do everything that TextInputCell does, but dont specify any tab index in your template.
Disable the default keyboard navigation on your CellTable. cellTable.setKeyboardSelectionPolicy(KeyboardSelectionPolicy.DISABLED)
This should result in a normal tab navigation in your CellTable.
Disabling KeyboardSelectionPolicy may not work on all views, if you are using any MVP frameworks. GWT selects the cell instead of the input field within the cell.
Here is a solution which I used in my applications: Adding TAB control to GWT CellTable
the solution from Ben Imp works fine if you dont change the value of the cell, but if you change the value and try to navigate with tab to the next cell it lost focus and starts with the first element of the view. I have not found a solution for this inappropriate behaviour.
For those looking at this in the future trying to figure out how to have tabbing while changing values, do what the Ben Imp suggests then also in your custom components remove any reference to super.finishEditing. In some cases this means overriding finishEditing and having it do nothing.