The ag-grid popupParent documentation/plunker talks about setting popupParent so that context menus have room to display:
var gridOptions = {
columnDefs: [{field: 'num', headerName:'A'}]
rowData: [{num:'1'},{num:'2'},{num:'3'],
popupParent: document.querySelector("body")
};
This affects contextMenu items and columnMenu items, but it does not appear to affect toolPanel. In this plunker, you can see the issue I am having.
Is there another gridOption I should be using to fix this?
Related
I know there is a way to show properties by mouse hove and click event on the map, but my question is how can I show the properties without mouse hover or click event.
I tried using label pane but it's not working in my case.
// show map
mymap = L.map('map_canvas');
// For Label
mymap.createPane('labels');
// This pane is above markers but below popups
mymap.getPane('labels').style.zIndex = 650;
// Layers in this pane are non-interactive and do not obscure mouse/touch events
mymap.getPane('labels').style.pointerEvents = 'none';
var positronLabels = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
attribution: '©OpenStreetMap, ©CartoDB',
pane: 'labels'
}).addTo(mymap);
layer.bindPopup(feature.properties.block_name + '</br>' + feature.properties.DIST_NAME,{
noHide: true,
direction: 'auto'
});
But still, it's not showing by default but it showing when I click on the map.
Please give me some suggestions on how to do it, I already wasted more than 10 days on this single work.
Happy coding.
i'm using AG Grid Angular to create a log view, i will add a lot of entries per second to the grid, typically this type of view's has the newest entry at the bottom, so it would be great if there is a good way where the scrolling will stick at the bottom, so i can always see the latest entry. A bonus would be, if i can manually scroll up and the scrolling will stay at this position.
Here's one way to do it:
handle rowDataChanged in your markup:
<ag-grid-angular
class="ag-dark"
[rowData]="messages"
[columnDefs]="columnDefs"
[gridOptions]="gridOptions"
(bodyScroll)="handleScroll($event)"
(rowDataChanged)="handleRowDataChanged($event)">
</ag-grid-angular>
In the handler for rowDataChanged, call ensureVisibleIndex to scroll to the last row added:
gridOptions: GridOptions = {
suppressScrollOnNewData: true,
}
handleRowDataChanged(event) {
const index = this.messages.length - 1;
this.gridOptions.api.ensureIndexVisible(index, 'bottom');
}
Demo:
https://stackblitz.com/edit/angular-ag-grid-stuck-to-bottom
In that code there is also some logic around when to keep the table scrolled to the end or not based on the scroll position.
When font size is big, auto-sizing (no matter in what way) trims the column data.
I tried it on plnkr.com link referred from: https://www.ag-grid.com/javascript-grid-resizing/#
I styled the rows to have 20px font size and since then the autosizing doesn't work properly.
see in the image, country & date columns are cut in the middle after "Aut-Size all" and after double click to autosize a single column.
plnkr sample
any ideas?
thanks
You can fix this by applying your bigfont class via cellClass instead:
https://plnkr.co/edit/qzwOYqN6ybXJns0xDvqy?p=preview
var gridOptions = {
defaultColDef: {
resizable: true,
cellClass: 'bigfont',
},
columnDefs: columnDefs,
rowData: null,
//rowClass: 'bigfont',
onColumnResized: function(params) {
console.log(params);
}
};
This is happening because to work out the width of a cell, ag-grid clones it. The cloned cell doesn't have some of the parent DOM structure, such as a row with your specified rowClass.
It's a marginal bug in ag-grid.
Related to this, on GitHub:
https://github.com/ag-grid/ag-grid/issues/2731
https://github.com/ag-grid/ag-grid/pull/915
I have a basic ag-grid with some simple dummy data, but it only displays when I don't import the .css files provided with the library, and even then it displays incorrectly.
Excerpted from my package.json:
"ag-grid": "10.0.1",
"ag-grid-react": "10.0.0",
"react": "15.4.2"
From my React component:
constructor:
this.state = { columnDefs: [{headerName: 'Product', field: 'product'},{headerName: 'Country', field: 'country'}], rowData: [{product: 'IOL', country: 'US'}, {product: 'Suture', country: 'IN'}]}
from render():
return (
<div id='grid'>
{/*<div id='grid' className='ag-fresh'>*/}
<div>
Here's the grid...
</div>
<AgGridReact
// listen for events with React callbacks
onGridReady={this.onGridReady.bind(this)}
// onRowSelected={this.onRowSelected.bind(this)}
// onCellClicked={this.onCellClicked.bind(this)}
// binding to properties within React State or Props
showToolPanel={this.state.showToolPanel}
quickFilterText={this.state.quickFilterText}
icons={this.state.icons}
// column definitions and row data are immutable, the grid
// will update when these lists change
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}
// or provide props the old way with no binding
rowSelection="multiple"
enableSorting="true"
enableFilter="true"
rowHeight="22"
/>
</div>)
If I run this code without importing any .css I get a jumbled grid like:
Now if I import the css per the getting started guide:
import 'ag-grid-root/dist/styles/ag-grid.css' // see webpack config for alias of 'ag-grid-root'
import 'ag-grid-root/dist/styles/theme-fresh.css'
... then no part of the grid displays (only my div before the grid). With the css imported, it doesn't matter if I have assigned a theme to the grid or not, nothing shows.
I had a similar problem with the rows of data not showing, just the pagination. Setting a fixed div height worked to make the rows display, but adding domLayout: 'autoHeight' to the gridOptions means its always the right height to display correctly.
I have a Ext.form.Panel inside Ext.window. Form height is more than window height so I have vertical scroll on window.
On form fields validation (on validitychange event) scroll jumps to the top.
How to avoid this behaviour?
I tried to figure out, why one of my forms did scroll up and other did not. Turned out, that I have forgot to explicitly specify layout manager and that default layout manager (anchor) scrolled to top on validity change, while vbox layout did not. While everything looked exactly the same (vbox with align: 'stretch'), it behaved differently when the error was either shown or hidden.
I have the same problem :(
I made a creepy workaround (it works to 80%) Sometimes it still jumps to the top.
You should know, that I have a window with a layout of 'form'. If you have a window with (for example) a layout of 'fit' with an xtype of 'form' - you may have to change the code a little bit.
For example the line el.child(".x-window-body", fasle) wouldn't work.
init: function() {
this.control({
...
/** My Ext.window.Window is called reservationwindow **/
'reservationwindow': {
afterrender: function(comp) {
// comp is this Ext.Component == wrapper
var el = comp.getEl();
//extjs adds the scrollbar to the body element...
var elForm = el.child(".x-window-body", false);
// or el.child(".x-panel-body", false);
//we are listinig to the scroll-event now
this.myFormEl = elForm;
this.safeScroll = {top:0, left:0};
elForm.on('scroll', function() {
console.log("save");
this.safeScroll = this.myFormEl.getScroll();
}, this);
elForm.on('click', function() {
var resWin = this.getResWin();
resWin.scrollBy(0,this.safeScroll.top,false);
console.log("reset");
}, this);
elForm.on('keyup', function() {
var resWin = this.getResWin();
resWin.scrollBy(0, this.safeScroll.top, false);
console.log("reset");
}, this);
}
As you can see, I am listening to the scroll-event and safe and reset the scroll bar. Sometimes (especially if you are writing very quickly in a textbox) the events come in a different order and the page will still jump to the top. Sometimes you also see it flickering around (if it needs too long to set it back to the original position).
So.... As I said, its a creepy workaround.
If you find a better solution, please let me know.
EDIT
I also figured out, that the grow option on a textareafield was one of the troublemakers.
{
id: this.id + '-details',
xtype: 'textareafield',
// grow: true, now it isn't jumping
name: 'message',
fieldLabel: 'Zusätzliche Informationen',
labelAlign: 'top',
renderder: 'htmlEncode',
disabled: isDisabled,
anchor: '100%'
}