The mat select editor if not working in the ag grid material sample project:
https://www.ag-grid.com/example-angular-material-design/
When changing the vegetable in the editor the selected item is not getting propagated back to the grid.
I have downloaded the sample project and get the same results.
There is an issue logged for Angular Material component with Editors.
Refer: ag-grid-pipeline
AG-2359 Investigating issues with popup editors not working anymore (ie Angular Material editors)
Its status shown as DONE, so in the next release 19.1.5 or 20.0.0, it should be fixed.
Related
We're in the process of using AG Grid in an application to display and edit data, but are having some trouble with the column filter lists.
The icons for the columns being filtered do not have checkmark icons. The outline around the checkmark boxes changes colors, but there are no icons. I was able to recreate the issue in this sandbox: https://codesandbox.io/s/objective-galois-xx6b3z. Any ideas on how to fix this?
Expected behavior:
Checkbox icons should be visible as shown in AG Grid examples: https://www.ag-grid.com/examples/filter-set-filter-list/sorting-set-filter-values/packages/vanilla/index.html
Notes:
I created a very basic grid (see https://codesandbox.io/s/objective-galois-xx6b3z) to ensure that this issue is not related to any of the customizations we have added to our project
I tried using custom icons (see this in AG Grid's documentation), which were also not visible: https://www.ag-grid.com/examples/filter-set-filter-list/sorting-set-filter-values/packages/vanilla/index.html
You are trying to use Alpine theme with different fonts.
For this you will need to define CSS variable that will point to a different font:
.ag-theme-alpine, .ag-theme-alpine-dark {
--ag-icon-font-family: agGridMaterial;
}
I am trying to change the default checkbox in AG Grid to custom SVG I have made. The documentation says that AG Grid overrides browser checkboxes to show an icon but that is not the case in my project. I see the default browser provided checkboxes.(Tested in chrome and safari)
I've tried multiple themes too and still no icons.
I am using the AG Grid Svelte wrapper from here:
https://ag-grid-svelte.michael.kim/guide/overview/
I am new to Material UI and React in general, but as a 10 yr HTML UI vet I am so perplexed right now. We are using XGrid component with rows and columns. When you hover over rows they highlight by turning light blue, but I am at a loss as to how this is happening. When I inspect the row with regular inspector, I don't see any class changes when hovering over the row. When I force hover state, it does not highlight the row. I am guessing two things
It's a mouseenter event, not hover
It's using some built in browser highlight, not a class
Anyway what I'm trying to do is manually highlight a row and it would make sense to use the same class/colour or call some API function, but I cannot find either.
There's documentation here: https://material-ui.com/api/table-row/
Here's an example: How to change the text color of the selected row in material ui table
I am using https://github.com/alexplumb/material-ui-phone-number that is Material UI version of 'react-phone-input-2'. However it refuses to show the drop down arrow for the country flag. Below is the codesandbox that depicts that
https://codesandbox.io/s/optimistic-herschel-c4rru?fontsize=14&hidenavigation=1&theme=dark
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