I am new to ag-grid. As seen in the screenshot below, I have 4 columns initially. When I remove column 3 (test3), notice that there is space on the right that indicates that a column in missing. How can I ensure that once a column is removed, that the remaining 3 columns (in this case) will fill the area? I tried to pass resizable : true into defaultcolDef but that did not fix the issue...
Intial View
View once Test 3 column is filtered out
Use flex: 1 on each column.
See the documentation here for more info: https://www.ag-grid.com/javascript-data-grid/column-sizing/#column-flex
Or checkout this plunker example: https://plnkr.co/edit/7evoWXCM1sChDBmX
Just drag one of the columns out of the grid to see it working
You can use the columnVisible-event to catch any columns added or removed
https://www.ag-grid.com/javascript-data-grid/grid-events/#reference-columns-columnVisible
and then call
gridOptions.api.sizeColumnsToFit();
https://www.ag-grid.com/javascript-data-grid/column-sizing/#size-columns-to-fit
Related
I am creating a grid (so something with rows and columns with buttons in the cells) and a slider that should alter the number of columns.
The number of rows is virtually unlimited and, since the grid layout in bootstrap is implemented with a flexbox i should either swap column classes or redraw everything every onchange event.
is there another way in bootstrap or do i need to create a grid layout from scratch and alter the column layout each time?
i managed to do that by adding a counter of elements inside a row and whenever i reach the desired element number i append a new row and start adding elements to the last row
like so
if(indexofrow%element.getColNumber()==0){
indexofrow++;
document.getElementById("canvas").insertAdjacentHTML("beforeend","<div class='row flex-nowrap'/></div>");
drawSingleButton(i,element,arrayOfLayers);
}else{
drawSingleButton(i,element,arrayOfLayers);
indexofrow++;
}
it's probably a cheap workaround but for my case it works
doc says autofits Changes the width of the columns of the current range to achieve the best fit, based on the current data in the columns. So it's based on the data in the columns.
Now I have an example: input 'aaaaaaaaaaaaa' in A1 and 'aaa' in A2, and I execute ctx.workbook.worksheets.getActiveWorksheet().getRange("A2").format.autofitColumns(); but it autofits according to the A1's content rather than A2's, but what I want is the later one, is there any way to achieve this please?
Thanks, I can repro this issue, I think our behavior API aligned with when double click the resizable button in column, it will resize according to the content of the whole column.
A bug(#3984867) was created to track this issue, Team is investigation on it.
,
I have a grid that I want it's width to be always 100 % of the container.
I got his working by setting autowidth: true. Now the problem is that when I hide a column my grid no longer expands to 100% of parent's width.
Here is an example illustrating the issue.
De-comment the line with in the load complete to see both cases.jsfiddle
loadComplete: function(data){
//$(this).hideCol(['number']);
}
This is happening because you're hiding the column after the grid has finished loading, e.g. the total width has already been calculated. If you always want the 'number' column hidden then just add the hidden: true property to it.
Modified fiddle: http://jsfiddle.net/fo3wb58w/
If you want to dynamically hide columns at startup (your question doesn't make this clear) then please take a look at How to adjust the column width of jqgrid AFTER the data is loaded?
Is there any option to not show grouping header in SlickGrid?
1) I tried to just set it to
.slick-group{
display:none;
}
but all normal rows have set top inline:
<div class="ui-widget-content slick-row even slick-group" style="top:50px"...
That means that even grouping row not shown anymore, the space between grouped row blocks left. So thats not solves my problem.
2)I've found question where one guy hides total row using dataView parameter displayTotalsRow: false. And i wonder maybe there is some displayTotalsRow like paramenter, that hides grouping row?
I have a filter on slick grid header. When I hide a column using setColumns function, the header row gets messed up. Filters overlap each other. Any suggestions?
Figured out solution myself.
Function setColumns is re-initializing the display and additional header row is being added on top. So existing header row has to be removed before setting up columns.
I wrote following line before calling setColumns:
$('.slick-headerrow-column').remove();