Menu
When I click on the filter icon next to each column, it opens the popup showing the options for selecting the filter, however only the popup shows, the actual grid behind it vanishes. So the popup is just floating on an empty background. When I close the popup, the grid returns.
I use Vue.js only by <script src="./js/vue.js"></script>
My html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./node_modules/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
<link rel="stylesheet" href="node_modules/xel/themes/material.css">
<link rel="stylesheet" href="css/style.css">
<title>Test</title>
</head>
<body>
<div id="app">
<app-header :par="'test'"></app-header>
<app-grid ref="grid"></app-grid>
</div>
<script src="../node_modules/xel/xel.min.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/render.js"></script>
</body>
</html>
My js:
class Spreadsheet {
constructor(
rowData = [],
columnDefs = [
{
headerName: 'Name',
field: 'name',
sortable: true,
checkboxSelection: true,
headerCheckboxSelection: true,
filter: 'agTextColumnFilter',
filterParams: {
clearButton: true,
debounceMs: 200
}
},
{
headerName: 'Model',
field: 'model',
sortable: true,
filter: 'agTextColumnFilter',
filterParams: {
clearButton: true,
debounceMs: 200
}
},
{
headerName: 'Price',
field: 'price',
sortable: true,
editable: true,
filter: 'agNumberColumnFilter',
filterParams: {
clearButton: true,
debounceMs: 200
}
}
]
) {
this.template = `
<div class="spreadsheet">
<x-input class="filter" type="text" @input="filter">
<x-label>filter...</x-label>
</x-input>
<div ref="grid_vue" class="ag-theme-fresh"></div>
</div>
`
this.data = function() {
return {
columnDefs: null,
rowData: null,
gridOptions: null,
devices: []
}
}
this.beforeMount = function() {
this.devices = rowData;
this.gridOptions = {
suppressDragLeaveHidesColumns: true,
defaultColDef: {
filter: true,
resizable: true,
width: 100
},
columnDefs: columnDefs,
rowData: rowData,
enableCellChangeFlash: true,
animateRows: true,
rowSelection: 'multiple',
onGridReady: function(params) {
params.api.sizeColumnsToFit();
}
}
}
}
methods = {
addItem(item_obj) {
this.devices.push(item_obj);
this.gridOptions.api.setRowData(this.devices);
},
filter(event) {
const filter_text = event.target.value;
this.gridOptions.api.setQuickFilter(filter_text);
},
redrawAllRows() {
this.gridOptions.api.refreshCells();
this.gridOptions.api.redrawRows();
}
}
mounted = function() {
const eGridDiv = this.$refs.grid_vue;
new agGrid.Grid(eGridDiv, this.gridOptions);
}
beforeUpdate = function() {
console.log('beforeUpdate');
this.redrawAllRows();
}
}
const devices = [
{name: "phone", model: 'Sumsung', price: 35000, class: "smartphone"},
{name: "laptop", model: 'HP', price: 32000, class: "pc"},
{name: "test", model: 'Test', price: 72000, class: "test"}
];
const app_table = new Spreadsheet(devices);
const app_header = {
props: ['par'],
template: `
<div class="pageHeader">
<x-button class="addDongleButton" @click="addItem">
<x-label>Add Item</x-label>
</x-button>
</div>
`,
methods: {
addItem() {
console.log(this.par);
const some_obj = {name: "Test2", model: 'X2', price: 555, class: "test"};
vm.$refs.grid.addItem(some_obj);
}
}
};
const vm = new Vue({
el: "#app",
components: {
appHeader: app_header,
appGrid: app_table
}
});
Css:
@import "../node_modules/ag-grid-community/dist/styles/ag-grid.css";
@import "../node_modules/ag-grid-community/dist/styles/ag-theme-fresh.css";
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
body {
background: rgb(241, 241, 241);
box-sizing: border-box;
}
.pageHeader {
z-index: 1000;
background: #a1c4dd;
height: 75px;
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
}
.spreadsheet {
margin: 85px 5% 20px;
}
.filter {
display: inline-block;
height: 25px;
margin-bottom: 5px;
}
.ag-theme-fresh {
height: 400px;
width: 100%;
}
.ag-theme-fresh.ag-dnd-ghost {
width: 30%;
min-width: 100px;
}
204
asked Sep 06 '25 03:09
I don't know if it's the same issue, but I came to this post while hunting down very similar experience. I found a div with class ag-popup, if I make a css rule that gives that a height of 0 it's seeming to fix the issue and I haven't seen a side effect yet. ie
.ag-popup
{
height: 0;
}
Same thing happened to me while using Svelte, used the answer by joolsf. When checking ".ag-theme-balham" was also applied to the div as explained by joolsf. In there a min-height was set. This means I had to add the following:
.ag-popup {
height: 0 !important;
min-height: 0 !important;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With