Questions tagged [ag-grid-vue]
ag-grid-vue is the adaptation of ag-grid, a fully-featured and highly customizable JavaScript data grid, for the Vue framework. Use this tag for questions about the usage of ag-grid in Vue specifically.
ag-grid-vue
141
questions
0
votes
0
answers
13
views
iag-grid data is not refreshing when i change the data from an external component
my aggrid is getting its data from a pinia store, bras is an array of the customer's branches
const { selectedCustomer } = storeToRefs(customerStore)
const rowData =selectedCustomer.value.bras
when ...
- 23
-1
votes
0
answers
23
views
AG Grid keeps fetching data multiple time (Server Side Infinite Mode)
im struggling to understand why the grid keep fetching more data (causing flicking) after resolving it. I put the grid in debug mode and got these logs
AG Grid: Updated property datasource from Proxy(...
- 111
0
votes
1
answer
27
views
How to get the count of total rows from ag-grid with serveur side row model (datasource) using vue js?
I'm using ag-grid and vue, with the server side row model.
I would like to display the count of all the rows, and not only the displayed rows but really the count of all the rows from database. This ...
- 13
1
vote
1
answer
48
views
AG Grid: You are mixing modules (i.e. @ag-grid-community/core) and packages (ag-grid-community)
I'm getting this warning message in my console:
AG Grid: You are mixing modules (i.e. @ag-grid-community/core) and
packages (ag-grid-community) - you can only use one or the other of
these mechanisms....
- 22.3k
0
votes
0
answers
24
views
Ag-Grid: When resizing the browser when using sizeColumnsToFit makes the pinned columns as scrollable
I am using the AG-Grid and when I use the SizeColumnsToFit, on resizing the browser the pinned group columns also get scrollable horizontallly. Is there a way to retain the pinned columns even when we ...
- 31
0
votes
0
answers
25
views
Ag grid theme that matches current VSCode colors
I am wanting to use Ag-Grid in a VSCode extension to provide an editable grid in a webview as an alternative to VSCode’s data grid which sadly does not support editting.
I am using Vue for my webview.
...
- 105
0
votes
2
answers
43
views
I'm using ag-grid with Vue installed through npm, how do I import the styles as of version 29.0.0?
I'm using ag-grid with Vue 2. I'm upgrading the version of ag-grid from 24 (ish) to 29.0.0. I have ag-grid installed with npm. With version 24 the project imported the styles sheets from the node ...
- 513
0
votes
1
answer
46
views
Is there any way to check if grouping is active in AG-grid vue?
I am using row grouping panel for ag-grid in Vue. Here we can drop column headers to group by any field. Is there any ag-grid parameter or function to check if grouping is active at the moment or not?
- 31
0
votes
0
answers
55
views
Vue-ag-grid custom column filter with Composition API SFC
Vuejs has Composition API SFC for a long time, this is the new default API for vuejs. But ag-grid vuejs documentation contains only old Options API / Composition API without SFC examples.
Please ...
- 1,993
0
votes
0
answers
75
views
Prevent horizontal scroll reset when updating vue-ag-grid columnDefs
I'm trying to update vue-ag-grid's columnDefs with new values using the updateGridOptions method. However, this action resets the horizontal scroll back to the starting position, which leads to a poor ...
- 41
0
votes
1
answer
104
views
refreshHeader() function is not updating header names after I change i18 locale
As title says, my AG-GRID table is not updating Header names. I've trying to update using two ways: manual and auto.
How manual way works? I have a simple button that fires a @click="updateHeader&...
- 198
0
votes
0
answers
33
views
ag-grid Cell Renderer won't render component with jQuery
I'm using ag-grid in a Vue3 (Composition API) app, and trying to display a some jQuery sparklines (https://omnipotent.net/jquery.sparkline/#s-about) within some of the cells.
As per the ag-grid docs (...
- 1
0
votes
2
answers
44
views
ag-grid collapse header of grouped row it becomes a blank row
When I collapse a certain row that is a header of grouped rows, the rows really disappear, but the header does not return instead I have an empty row and the first child row remains. Other than that, ...
- 69
0
votes
0
answers
77
views
AG-Grid: While writing unit test with Jasmine getting "TypeError: Cannot read properties of undefined (reading 'refreshCells')"
I am working with AG-Grid and I have to write unit test case for the createDef method. I have something like this.
createColDef(){
const colDef = {
//all the coldef's goes here
}
...
- 31
0
votes
1
answer
182
views
Set the pinnedBottomRowData in Ag Grid with colId
I'm having an issue with displaying data in the pinned row in ag-Grid Vue 2. I'm using pinnedBottomRowData to provide data for the pinned row, but the row remains empty even though the pinned row is ...
- 428
0
votes
0
answers
26
views
Trouble Updating AG Grid Detail Grid Template Dynamically with API Response in Vue.js
Description:
We are planning to purchase the AG Grid Enterprise edition. In the Detail Grid feature, when clicking the row expansion icon, we want to make an API call and update the `...
- 1
0
votes
1
answer
60
views
Ag-grid Tree with sparklines?
I am trying to use sparklines on a tree in ag-grid. Is there a way to do this? The aggFunc is called, but the results do not appear to be used. I also tried to set values on the tree itself, but ...
- 1,981
0
votes
0
answers
28
views
Hi, I want to add required true validation when i am trying to edit cell in vue 3
I am using below column
{
headerName: 'Account Name',
field: 'account_name',
editable: true,
cellEditor: 'agTextCellEditor',
cellEditorParams: { maxLength: 20 },
},
I tried below settings but it's not ...
1
vote
0
answers
41
views
How to not loose undo/redo stack data on updating column definition in AG-Grid
I am working on an Ag-grid project, where I have a toggle button to toggle between two groupBy's. Each group by has different Column definitions, which I am then updating using GridApi. When the ...
- 31
1
vote
1
answer
902
views
AG-Grid: Is there a way to make a button to expand / collapse the Column Grouping programmatically?
I want to implement a button which allows us to expand/collapse all the Grouped Columns in a programmatic way. Something similar to the already existing expand/collapse icon but for all the column ...
- 31
0
votes
2
answers
250
views
Display the sum of a column that calculates the sum of rows, in the first cell of said column?
In ag-grid and Vue2 I have a column that sums its rows. The grid also adds two rows to the top: a totals row and a percentage row. The problem I'm facing is: displaying the sum of the totals column ...
- 1
0
votes
0
answers
146
views
Custom date cell editor for ag-grid in vue 3 with typescript and <script setup> syntax
All the examples in the vue3 ag-grid docs for custom cell editors are based on javascript: https://www.ag-grid.com/vue-data-grid/component-cell-editor/.
I have an Angular background and there I would ...
- 1
0
votes
0
answers
15
views
Ag Grid how to disable column sortable property in edit mode?
I am new to ag grid.
I have a property name editMode, Any cell change will set it to true. When it is true, I want to set column sortable to false. How to do it ?
I don't want to use setColumnDefs, ...
- 1
0
votes
1
answer
170
views
Referencing another field in cellRenderer
I am using AG-Grid. I have bunch of fields in columnDefs and a cellRenderer for one of the fields. I want to refer to another field in the cellRenderer. How can I do it?
Thanks
- 931
2
votes
1
answer
257
views
AG Grid: Framework component is missing the method isFilterActive()
I am using "ag-grid-community": "^29.3.3", "ag-grid-vue3": "^29.3.3", with vue 3 composition api.
This is custom filter component which i am using to filter ...
- 354
0
votes
0
answers
23
views
Print grid bug with absolute position
When printing a grid using css to hide other elements on the page, and the grid overflows the page, it duplicates rows on page break, and also squishes some rows. See screenshot.
Here is a code ...
- 2,876
0
votes
1
answer
85
views
In ag-grid how do I make the active row color change to the selected row when the keyboard is used to navigate cells
See below, when I used the keyboard arrow keys to move 1 row down, the highlighted row is still the one above it:
- 682
1
vote
1
answer
111
views
How can I pass an ag-grid table in nodejs?
I have a page in which I generate in the back-end a table using the AG-GRID library, generating a file (js). This file once generated I call it from my front-end in which I use Handlebars. So far the ...
- 29
0
votes
0
answers
53
views
ag grid with vue doesn't render style after horizontal scroll
I have a problem after scroll right it is not rendering the style of the row
// DefaultColDef sets props common to all Columns
const defaultColDef = {
sortable: true,
filter: true,
...
- 354
0
votes
0
answers
43
views
Draggable html element with translateY is below pointer
Using Vue3/Vite with Ag-Grid and Fullcalendar6 with timeline view. I've setup two components (ag-grid and fullcalendar) and want to drag rows from ag-grid to fullcalendar, manage to do this ...
- 11
3
votes
0
answers
912
views
Ag grid Enterprise agNumberCellEditor not working
I am using Ag Grid enterprise and getting below error for inbuilt editors when I used for a column, any thoughts
{
headerName: "Branches",
field: "branches",
width: 120,
...
- 334
1
vote
1
answer
559
views
Why doesn't ag-grid always update after removing a row from the rowData ref value?
I am finding that in ag-grid community edition using vue, if I remove one row from the rowData array, the row removed is immediately removed from the grid. I can see the update right away. But any ...
- 471
0
votes
1
answer
421
views
How can I autosize all the columns in ag-grid when column virtualization is switched on?
According to the ag-grid documentation (https://www.ag-grid.com/javascript-data-grid/column-sizing/)
"The choice is yours, whether you want column virtualisation working OR auto-size working ...
- 682
0
votes
0
answers
100
views
Create tree like structure on flat ag-grid table without using tree structure of ag-grid
I have some heirachical data I don't want to display using a tree data structure offered by ag-grid, but on the flat table itself using cell-renderer want to showcase it as a tree.
I am able to mange ...
- 15
0
votes
0
answers
267
views
How to hide tooltip displayed in AG Grid Columns tool panel?
I am adding a header tooltip for each of the headers in AG Grid.
As it also has a column selection menu as well as a Filter Tool Panel, the same headers are displayed in that pop-up menu and they also ...
1
vote
1
answer
1k
views
Using ag grid with vuejs, how can i make each cells reactive without resetting every cells?
I am facing some issues with AgGrid in Vue3 about reactivity.
I would like to make every cells reactives to other cells changes with custom inputs components (CellRenderer + CellRendererParams).
For ...
- 19
0
votes
0
answers
24
views
Webpage number of HTML nodes explodes: how to diagnose?
I couldn't yet figure out what actions lead for the number of HTML nodes to explode in a vue3 app.
Where do I start to figure the
Unfortunately, there's no error. And after a while, the browser tab ...
- 8,375
0
votes
0
answers
86
views
AG-Grid how do you apply or keep the pagination state after refreshServerSide?
I am using VueJS, ag-grid (v. 24)
How do I keep the state of my grid (filters, pagination) when I perform refreshServerSide?
https://www.ag-grid.com/vue-data-grid/server-side-model-updating-refresh/
...
- 1,435
0
votes
0
answers
155
views
Upgraded ag-grid from V22.1.1 to V28.2.1. In the sideBar columns tool panel check/uncheck functionality for checkbox is not working
I upgraded ag-grid-community, ag-grid-enterprise, ag-grid-vue from V22.1.1 to V28.2.1. I upgraded vue-property-decorator to V9.1.2 (latest). I am using vue version V2.6.10.
I have a sideBar in ag-grid ...
0
votes
0
answers
46
views
ag grid row lines disappear after i scroll right
After I scroll right the line color and also border disappear.
That's with vue3 composition API.
It looks like it doesn't render when i scroll.
const columnDefs = ref([
{ field: "Action"...
- 354
0
votes
0
answers
80
views
ag-grid -- column grouping collapsed columns ignored when selecting or pasting or copying
how to select ,paste & copy collapsed data in column grouping in ag-grid?by default ag-grid ignoring collapsed columns . i want collapsed columns also to be taken into account . Ms Excel has these ...
0
votes
0
answers
86
views
Scrolling is disabled in ag-grid-vue
I am working on a bit older project with ag-grid-vue version 26.2.1 and vue 2 version 2.6.14. The scrolling feature of ag-grid-vue is completely disabled. I tried to follow the documentation and did ...
0
votes
1
answer
366
views
Ag-Grid :: Add 2 child rows in replacement of one child row on parellel side
The requirement is that I want to add the rows based on the selected options from the search as you are able to see from the image (I have selected 2 items from the search) as soon I click on replace ...
- 15
0
votes
2
answers
660
views
Is there way to customise ag grid child count?
I m working with ag grid react, I have done row group. Now Parent row showing child row counts with numeric values. Is there any function to customise row count style.
And I want to calculate rows ...
- 27
0
votes
1
answer
313
views
do provided cell editors work with ag-grid-vue3?
I am using ag-grid via ag-grid-vue3, and when I try applying one of the cell editors such as agDateStringCellEditor, it doesn't seem to have any effect. For example, with this column definition:
...
- 471
0
votes
1
answer
130
views
How to know that AG GRID purge process is still in progress?
I have a use case where numerous background processes are running on the ag-grid row nodes, involving filters and other operations.
When I apply a specific filter, such as a time range, I need to ...
- 2,691
0
votes
1
answer
483
views
Using Ag-Grid with Vue2 and Nuxt2
I've just started learning (exploring the world of frontend if you will) now and received a task to incorporate Ag Grid into a very basic nuxt 2 app, but no matter what i do, it just doesn't seem to ...
- 13
2
votes
1
answer
618
views
Pass parent component in ag-grid context with vue3 composition API
I want to bubble up an emit from a child component in ag-grid using vuejs 3. My strategy is to pass the parent component down with the composition API using <script setup> for use in the child ...
- 289
1
vote
1
answer
253
views
in ag-grid community edition, how do you get the column menu icon to work as expected
Using vue3 and ag-grid community edition, when I click on the column menu icon, the text-filter menu does not pop up and the whole grid starts flashing. There are no errors in the console.
Browsers: ...
- 471
1
vote
1
answer
815
views
Is there a way to sort grouped rows by the number of child rows? AG Grid
There is a similar question named How to sort by the row group count in ag grid?
The anwser although marked correct, doesn't solve the issue.
It involves using custom sorting provided at a column ...
- 33