HI,
In flex, I have a datagrid with 22 columns. I initially display all the columns. The width of each column right is uniform.
Now when i change the visiblity of a few columns, the width of each column varies. How do i maintain a uniform column width for each column whether or not there are any invisible columns?...
Also how do i get the count of number of visible columns. the ColumnCount property returns total number of columns and not the number of visible ones.
The columns are an array, so you can append code to whatever function makes them invisible and loop through that array setting each ones width. You will just need to keep tabs on your Datagrids width, and the number of visible columns, which you can also do with a loop. Here's some untested code that should put you close to your goal:
function makeAColInvisible():void{
//code you use to set col invisible
var visColCount:number = 0;
for each (var item:DataGridColumn in myDataGrid.columns){
if(item.visible == true){
visColCount++;
}
}
for each (var item2:DataGridColumn in myDataGrid.columns){
item2.width = myDataGrid.width / visColCount;
}
}
Related
This question already has answers here:
One flex/grid item sets the size limit for siblings
(6 answers)
Closed 3 years ago.
There a ton of answers on SO on how to make columns equal height based upon the content of the largest column, however I am looking to make all columns equal height based upon the smallest column.
In this example, I want all columns to have the same height as the middle column and the content within the two larger columns to scroll. I am using Bootstrap 4 but am open to any other solutions.
You might have to use javascript.
Store all the column heights into an array.
Loop through and pick the smallest height.
Set the height of the other divs based on the smallest height.
// Get all the columns
const columns = document.querySelectorAll('.column');
// Array for storing height values for columns
var columnHeights= [];
// Add Column Heights to array
for(index=0; index<columns.length; index++) {
column= columns[index];
columnHeights.push(column.getBoundingClientRect().height);
}
// Get the minimum column height
Array.min = function(heightsArray){
return Math.min.apply( Math, heightsArray );
};
var minimumHeight = Array.min(columnHeights);
// Set the height of the other columns based on the minimum height
columns.forEach(col => {
col.style.height = minimumHeight+'px';
});
A working pen is here
In twitter bootstrap (and/or css), how can we ensure a table is displayed in its full form (with fixed dimensions), no matter whether or not its row are populated with data or not ?
I'm not sure to completely understand the question. But if you want to check if your table is fully displayed, I will use JavaScript/jQuery.
You could just check if the table has the size that you put in the CSS but I don't think that what you mean with your question:
if($(".table").height()==??) {
//DO WHAT YOU WANT
}
If your data are put on one line in the table, you can then check the number of row and multiply by the size of one row: https://jsfiddle.net/ugppwzsc/1/
But if your row have various size, you will have to calculate the size of every row and check if it's what you want:
var cal = 0;
$( "tr" ).each(function() {
cal += $(this).height();
});
if($("table").height()==cal) {
//DO WHAT YOU WANT
}
I have a DataGrid in my project. It doesn't fit's the width of the form, so the scrollBar appears. The DataGrid, on it's initial state, displays a few columns and a part of the next column (which would appear after scrolling).
Is there any way, I can get the width of this, displaying part?
You should get the width of the parent object.
let's say the datagrid is in your application, then you should get the width of the stage.(stage.stageWidth)
If your datagrid is on a certain x location in your application (or any other parent object) then you should take the width of the parent object - the x value of your datagrid. (stage.stageWidth - dataGrid.x)
Ok, I had some time to dig more deeply in this problem. I've searched a few classes to see, how the Adobe was implementing those grid behavior (displaying columns partly). So, for those, who'll need to deal with this, the needed part is in DataGrid.as file, method configureScrollBars .. actually, this part of it:
// if the last column is visible and partially offscreen (but it isn't the only
// column) then adjust the column count so we can scroll to see it
if (collectionHasRows && rowCount > 0 && colCount > 1 &&
listItems[0][colCount - 1].x +
visibleColumns[colCount - 1].width > (displayWidth - listContent.x + viewMetrics.left))
colCount--;
else if (colCount > 1 && !collectionHasRows)
{
// the slower computation requires adding up the previous columns
var colX:int = 0;
for (var i:int = 0; i < visibleColumns.length; i++)
{
colX += visibleColumns[i].width;
}
if (colX > (displayWidth - listContent.x + viewMetrics.left))
colCount--;
}
That's pretty much all code, that needed to catch and measure all those tricky divided cols in a grid :)
I have a clustered chart with 2 column series. The problem is that sometimes one column's values are so large, the other column is dwarfed. So I added checkboxes to show/hide a given column, and set the visibility of the ColumnSeries as such:
visible="{checkbox.selected}" includeInLayout="{checkbox.selected}"
This shows/hides the given column correctly, the problem is that it does not reset the Y-Axis, so the other column never actually grows in height (when the column with the larger values is hidden). I've tried resetting the data provider, validating/invalidating the chart, and nothing seems to work.
Anyone have any ideas?
Thanks!
I would imagine from your description that you actually need to remove the series from the chart. So
public function onToggle(){
var newSeries:Array = [];
if(bigSeries.selected) {
newSeries.push(bigSeries);
}
if(smallSeries.selected) {
newSeries.push(smallSeries);
}
chart.series = newSeries;
}
In my flex app I store the widths and visiblility of columns in an xml file. When the app loads it reads from the xml file and sets he columns values as applicable:
for(i = 0; i < columnsOrder.length; i++){
newOrder[i] = myDG.columns[Number(columnsOrder[i]) - 1];
newOrder[i].visible = (Number(columnsVisiblity[i]) == 1);
newOrder[i].width = Number(columnsWidth[i]);
}
myDG.columns = newOrder;
myDG.invalidateList();
The problem appears to be setting the visibility (it sets the visible field correctly but messes up the width)... I've tried setting it after setting the width (outside of the loop) and before the loop as well. It resizes the columns properly if I don't do anything with the visibility.
Any ideas?
Add an import statement at the top of your class file:
import mx.core.mx_internal;
Then remove using the mx_internal namespace, remove the owner of the column, change the width and then reasign the parent:
public static function resizeColumn(col:DataGridColumn, size:int):void
{
var owner:* = col.mx_internal::owner
col.mx_internal::owner = null;
col.width = size;
col.mx_internal::owner = owner;
}
This ought to do the trick (well, it did for us after a couple of days of swearing)
Is you horizontalScrollPolicy set to false on the datagrid?
"If the DataGrid's horizontalScrollPolicy property is false, all visible columns must fit in the displayable area, and the DataGrid will not always honor the width of the columns if the total width of the columns is too small or too large for the displayable area."
http://livedocs.adobe.com/flex/3/langref/mx/controls/dataGridClasses/DataGridColumn.html#width
I was able to get it to work by calling the above loop in a function twice... the first time it add the visible columns, the second time it sets the correct width. Not the best solution but I cannot spend any more time on it.