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;
}
Related
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 need three icons/buttons in one cell in each row and make it clickable. In other words i will need three icons in each cell in specific column (rest of the column will have data), See attached image for example.
Language using: Angular and ag-grid techniques
See this mockup image for example
You can achieve the above functionality by creating a custom render component. checkout the similar example from AG Grid
Rendering using Angular Components
Currently out of the box my grid looks like this
https://www.ag-grid.com/javascript-grid-row-styles/#row-style
however I need the cells to be divided like they are on the grids on this page
https://www.ag-grid.com/javascript-grid-cell-styling/
anyone know how to set this value?
It is due to this theme ag-fresh (check that in the html markup, this theme class is applied).
When class="ag-theme-balham" is applied, you won't be able to see cell dividers.
You can also check the same on this ag-grid Demo page (change theme dropdown)
I'm preparing Eclipse editor where one of the tabs is a tree with some values. I'm using colors and font style to give more information for the user. E.g. when the user puts a value which is out of range then the font color is red, or when a value is non-default then the font has a bold style.
But the user has to move the selection to another cell to see if the color/style has changed or not. Is it possible to change the color/style of the selected cell in the JFace tree?
There are several ways to do this. The two most obvious are:
Add your own custom label provider. Example here.
Add a label decorator. Here is a older somewhat dated article.
It is not possible to change the colors via theming.