I'm using ag-grid-react masterdetail option to create a master grid with a detail grid. I'd the master grid to have a different theme from the detail grid.
For example, the master grid would have "ag-theme-alpine" and the detail grid would have "ag-theme-alphine-dark". Is this possible?
I tried looking through the docs for some options for the detailCellRendererParams but couldn't find anything obvious.
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 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
I have created a simple form to collect 15 inputs. I installed Flipped Table to flip the table from row to column format and created a new view to display the flipped table using rendered entity.
Then I added a chart attachment to the Master Flipped Table page. The main label is Submission ID and the data fields are the 15 categories. The pie chart is not showing at all. I seem to be stuck in bridging the data from the fields to the pie chart. Any direction will be most helpful.
If you're using the Charts module, in this case I would recommend adding a regular attachment, and then setting the display settings to Chart (Chart attachment is really intended as a second series on an existing chart). Also, please be sure to inspect element and look at the console for any JS errors...it's possible your charting library was not installed properly, and that would give you a good indication.
I'm using AG grid react enterprise version and using master detail features to show details of a particular master row.
I would like to add a feature to dynamically unselect all the detail rows previously selected by user. Is there any way we can do this? I'm programmatically not able to get reference to the detail row nodes.
You need not access the rowNodes of detail grid to clear selections. Having a handle on the detail grid api should do the trick.
From the docs-
You can access the API of all detail grids via the master grid. The
API for each detail grid is stored in a DetailGridInfo
Here's what you can do -
// iterate over all DetailGridInfo's, and call clear seletion on each one
masterGridOptions.api.forEachDetailGridInfo(function(detailGridInfo) {
detailGridInfo.api.deselectAll();
});
You should be able to trigger this as per your custom logic and unselect detail rows
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)