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;
}
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;
}
3 Answers
Reset to default 13I 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;
}
Might be too late for the original poster, but Thijs had it correct. Any Ag Grid theme CSS class is applied to the main container but also applied again to the same element that .ag-popup is applied to (don't know why). This also includes custom user-made themes which is any class applied to the main grid container prefixed with .ag-theme-.
In your example, .ag-theme-fresh is also being applied to the same element that .ag-popup which makes the popup a height of 400px. So that is hiding the grid items which it seems fall under 400px.
A solution would be to apply a CSS class to the main grid container without the .ag-theme- prefix and set that height (and maybe width) which would not get duplicated in the child element. Or apply styles directly.