I am also trying to positioning a node in a cell in grid layout as below
layout: { name: 'grid',
fit: true, // whether to fit the viewport to the graph
rows:5,
columns:12,
padding: 10, // the padding on fit
position: function( node )
{ console.log("Row : "+node.data('row') + ", COL : "+node.data('col'));
return {row:3, col:node.data('col')};
}
},
But node is always created in the middle of the canvas, even if I hardcode the row as above. Any suggestion, what is going on.
Thank you
If you're manually specifying positions, you shouldn't need to set the overall dimensions. Maybe you've overconstrained it (e.g. row beyond rows)?
Alternatively, you could set the dimensions and a sort function to indicate the ordering.
Related
I am conceiving a horizontal bar containing items.
They must all be of same width, having the same spacing between them.
They can expand as much as they want vertically (
stackblitz here
Problem:
How to automatically set the width of the row elements? Here I simply put a value that looks good: width:200px.
I want them to have a width dependent on the number of element per row.
What I tried:
Using elementRef in Horizontile (component holding the individual tiles, displaying with *ngFor) to get the width of this element:
currentWidth:number;
constructor(private el:ElementRef) {}
ngAfterViewInit(): void {
this.currentWidth=this.el.nativeElement.offsetWidth;}
it returns 5. (??) Using .width returns nothing. Also this is not recommended, I'd like another solution, less coupling.
I noticed I can make use of width:inherit; in the css of the individual tile component, which allows me to set the style from the horizontal list component.
<app-tile [style.width.px]="0.9*currentWidth/nDisplayedTiles" [tile]="item"></app-tile>
As the currentWidth value is zero, of course it doesn't work;
I tried setting it in % but the inherits css tag keeps the %, which is not the intended effect.
Why is the app-tile styling not cared about if inherits is not set?
I tried using ViewEncapsulation but it had no effect either.
This looks like a trivial matter though: did I just miss something?
You can use the offsetParent (link) width and create a method to return the value on each of the cells and call it in your [style.width.px], something like the following will work.
The HTMLElement.offsetParent read-only property returns a reference to the element which is the closest (nearest in the containment hierarchy) positioned ancestor element.
stackblitz
ngAfterViewInit(): void {
//added this as the compiler was throwing ExpressionChangedAfterItHasBeenCheckedError
setTimeout(() => {
this.currentWidth=this.el.nativeElement.offsetParent.clientWidth;
});
}
getWidth(): number{
let width:number = 0;
//you may need to change this value to better display the cells
let multiplier = 0.7;
width = (this.currentWidth * multiplier) / this.ndisplayTiles;
width = Math.round(width);
return width;
}
<app-tile [class]="'layout-tile'" [tile]="item" [style.width.px]="getWidth()">
</app-tile>
I have an ag-grid master-detail grid where one master row typically has only 1 or 2 sub-rows in the detail grid (there's always 2 columns for the detail grid). When I write up the code matching the examples on ag-grid's documentation, it always leaves huge whitespace under the detail grid and it auto-expands the detail grid's width to the width of the container.
I would like to get rid of the extra whitespace under the detail grid and also size the detail grid so the columns are only as wide as they need to be to fit the data. (Thus there would be whitespace to the right side of the detail-grid)
I've tried looking through the styles in chrome dev tools but I can't figure out what controls those 2 styling aspects. In addition, setting domLayout = 'autoHeight' in the detail grid options just moves the bottom of the detail grid to the last row, but it doesn't get rid of the extra whitespace in the cases where there's only 1 detail-row.
Plunkr MVPs (includes domLayout = 'autoHeight' in detail-grid's options):
React: https://plnkr.co/edit/K76FssFF4Ex538fn
Angular: https://plnkr.co/edit/0n5EllKejfyq9x4E
The original plunkr samples came from the "Simple Example" plunkr on the ag-grid master-detail documentation.
All you need to do is refer the documentation here, as for the additional things needed.
We need to use this method from the ag-grid documentation.
this.getRowHeight = function(params) {
if (params.node && params.node.detail) {
var offset = 80;
var allDetailRowHeight =
params.data.callRecords.length *
params.api.getSizesForCurrentTheme().rowHeight;
var gridSizes = params.api.getSizesForCurrentTheme();
return allDetailRowHeight + gridSizes.headerHeight + offset;
}
};
Also on the detail panel grid options we need to add this property, which will set the height dynamically.
this.detailCellRendererParams = {
detailGridOptions: {
columnDefs: [
{ field: 'callId' },
{
field: 'duration',
valueFormatter: "x.toLocaleString() + 's'",
}
],
defaultColDef: {
flex: 1,
editable: true,
resizable: true,
},
onGridReady: function(params) {
params.api.setDomLayout('autoHeight');
},
},
getDetailRowData: function(params) {
params.successCallback(params.data.callRecords);
},
};
Below is a working example for your reference
Plunkr example
After combining Naren's answer with some css adjustments, this is the best result I could get. I'm not accepting this answer because it's not what I want, but I can live with it until I (or someone else) can figure out something better.
https://plnkr.co/edit/d9emrRiavR9gCpQl
Basically I added these 2 things to the plunkr:
this.getRowHeight = params => {
const defRowHeight = params.api.getSizesForCurrentTheme().rowHeight;
if(params.node.detail) {
const offset = 80;
const detailRowHeight =
params.data.callRecords.length * defRowHeight;
var gridSizes = params.api.getSizesForCurrentTheme();
return detailRowHeight + gridSizes.headerHeight + offset;
} else {
return defRowHeight;
}
}
styles: ['::ng-deep .ag-details-row { width: 50% }']
An acceptable solution would provide a way to resize the detail grid directly to the width of the actual columns (rather than an arbitrary percentage)
Image:
(You can remove that little extra space under the 1st row of the detail grid by overriding min-height of one of the grid's css classes. It only appears if there's 1 row in the detail grid)
I'm putting several ag-grids on one page, all with less than 15 rows, but none with the same size. So I need the grid to 'snap' to the number of rows and the column width with no scroll bars.
Setting griOptions.domLayout='autoHeight' worked perfectly for the height. Setting to 'print' is also ok.
But what do I do for width?
I can get the columns the minimum width with : this.gridColumnAPI.autoSizeAllColumns();
How to I shrink the overall grid size to insure i don't get scroll bars?
this.setWidthAndHeight('XXXpx','YYYpx') doesn't seem like an option since the height was set by domLayout.
EDIT1:
I do not specify widths in my columnDefs:
columnDefs = [
{headerName: 'Category', field: 'category' },
{headerName: 'Percent', field: 'percent' },
{headerName: 'Count', field: 'count' } ];
EDIT2:
I wrapped the ng-grid in a div with style="width:500px;height:500px" , and the grid conformed to that, so I'll be trying to dynamically set the style of that div once the gridReady event fires.
So how do I get the dimensions of the grid at any point? I know I can mine the columnApi for width of each...
I am using Fullcalendar Scheduler, and the problem is when i have many resources, it becomes not good, like this:
The live demo with litle resources: http://fullcalendar.io/js/fullcalendar-scheduler-1.3.3/demos/vertical-resource-view.html
I have an idea, it's adding an horizontal scroll, but i don't know the way, can you guys help me out ?
Thank you very much and have a great day.
.fc-view-container {
overflow-x: scroll;
}
.fc-view.fc-agendaDay-view.fc-agenda-view{
width: 500%;
}
/* **For 2 day view** */
.fc-view.fc-agendaTwoDay-view.fc-agenda-view{
width: 500%;
}
Use the combination of this configure options :
dayMinWidth: 150,
stickyFooterScrollbar : true,
dayMinWidth : guarantees your horizontal titles are visible.
stickyFooterScrollbar : guarantees horizontal scrollbar is visible.
Paresh's answer works for views with many columns, but has the limitation that views with few columns will have very wide columns.
Fullcalendar's render algorithm calculates equal column widths based on the view width, and there doesn't appear to be a simple way of setting the column widths using CSS.
Instead we need to enable scrolling on the x-axis:
.fc-view-container {
overflow-x: scroll;
}
then use jQuery to calculate the overall width of the view. Here I am using a minimum column width of 100px:
var columnCount = $('.fc-agendaDay-view th.fc-resource-cell').length;
var viewWidth = $('.fc-view-container').width();
var minViewWidth = 18 + columnCount * 100;
if (minViewWidth > viewWidth) {
$('.fc-view.fc-agendaDay-view.fc-agenda-view').css('width', minViewWidth + 'px');
}
We only change the width of the view and enable scrolling if it exceeds the current width of the view. This has the effect of setting a minimum column size of 100px.
The jQuery needs to run after the calendar.render(); call.
I am having a trouble to customize the kendo chart in order that all of my data in the chart is shown correctly. As you can see on the picture bellow, the value of my data is cutted on half.
As the data is assigned dinamicaly, it's not possible to set the constant size of a chart in order to fix the problem.
Is there any option to set (f.e. css property) to fix this issue?
Or is there any way to manipulate the "max" property of a valueAxis to be always 10% bigger than the maximum loaded value.
I've already tried playing with margins and padding, or changing the width of a chart, but problem is still there.
Here is the photo:
One option is to increase the right margin of the plotArea:
plotArea: {
margin: {
right: 30
}
},
Another option is to change the label position
seriesDefaults: {
type: "bar",
labels: {
visible: true,
background: "transparent",
position: "insideEnd"
}
},