I am using ag-grid in a angular project. I would like to deactivate fill handle only on some columns but i only see a global configuration with gridOptions.
Please help me to do it.
Related
I'm currently using the latest version of Jhipster 7.6.0 and Node 16.14.0. If we try to arrange form fields in column view in other words if we wrap ValidatedField to and , the field values are not populated during Edit mode of the page and the same is true for insert mode. The attached link is showing a simple layout change on the existing user management page, and we are trying to see Last Name and First Name in one row, and we are unable to see the value or update the value if we realign these fields in multiple columns views.
Does anyone know a simple workaround we can use ValidatedForm and ValidatedField in Row, Col, and regular CRUD works like with other pages generated by the framework? Please let me know if more clarification or detail is needed on this case.
Layout and code Sample from User Management page
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'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.
We are using Enterprise AG Grid in our react application. I could not find anything on below in official docs of Ag Grid.
How can we hide all columns at once, not using column api but user should be able to do it, may be a hide all check box in tool panel?
Is there any way to customize tool panel? So that we can add more options specifically for #1.
Once we hide all the column and then add it back from toolpanel. Is there a way that we can force new column to be added in the last instead of its original position as per coldefs?
Any help is appreciated, apologies for long text here.
Update 1.
I was able to add workaround for #1, by using Grouped columns and setting groupheaderheight to 0. Added all columns in one group and then a check/uncheck for all is available in tool panel.
Update 2:
Most of it is supported by Ag-Grid now. Please refer their latest build.
Most of these features are supported by AG-Grid (latest build) out of the box (except #3, which is very specific to our application). Please refer AG-Grid's documentation for more details:
Tool Panel Component
Is there a way to add a custom column menu tab with my own favourite icon which on click would render my custom react component?
something like
myColDef.menuTabs: ['generalMenuTab', 'filterMenuTab', 'myCustomMenuTab']
FYI I'm using v12.0.2
What you're after can't be done I'm afraid. The grid supports React components in all sorts of ways (renderers, editors, filters etc), but not via the column menu.
I've updated the docs page to remove the gibberish issue - it'll be fixed properly in the next release, thanks for highlighting this.
This would be helpful to have. In particular for us, we'd like to filter based off row properties, and not row values. Creating our own tab to filter by cell colors that we have assigned with our own set of labels would be useful.
I agree that it would be a nice feature to have. Apparently, there's no quick out-of-the-box solution to do it. The only workaround I see is to implement your own custom Header component which would display any buttons your want.
There you can put a button to open your own custom menu, which you can implement as any regular UI component. It also means you'll need to manually implement all standard menu options that Ag-Grid provides out of the box if you need them.