When I use ag-grid of given fixed height with Angular, before any data is shown the space where data will be shown (so grid in fact) is visible with text 'loading'. It's not correct in my case, as I don't bind rowData to Observable or Promise so it's not async. The grid is populated after click on button. I'd like to see only column headers and nothing below that. My grid config looks like that:
<ag-grid-angular
style="width: 100%; height: 335px;"
class="ag-theme-balham"
[gridOptions]="gridOptions"
[columnDefs]="columnDefs"
[rowData]="rowData"
animateRows
rowSelection="multiple"
>
So I'd like to hide whole grid except of column headers until rowData is empty array. Is there a way to do this?
Just to clarify, I use ag-grid with React but there are many similarities between the two. There are two things you can do here:
You can control what text is visible while loading or if there is no data with
[overlayLoadingTemplate]="<span></span>"
[overlayNoRowsTemplate]="<span></span>"
Since you are currently setting a fixed height in your in line styling for the grid, it will always be at 335px. Once you set that to something that's not static, you can add this prop to the grid and it will change the height of the grid depending on data inside.
[domLayout]="autoHeight"
Related
I'm creating tables dynamically based on user data, using Handsontable.
Question: How do I tell handsontable to adjust the height of rows and the width of columns based on the data and the available space?
Maybe this can help:
It is also possible just with CSS but probably you will have to override default min-width for td, th.
Check out this fiddle: http://jsfiddle.net/warpech/z9fYC/
or try also this:
I'm not sure if there is build in function to control this, however, there is hack using css width: in style
style: {
width:'800px'
}
A working example is here http://jsfiddle.net/FDpvV/1/
Here a hint: https://docs.handsontable.com/0.35.0/demo-scrolling.html
I have a formpanel which contains textfield items. Here is a fiddle demonstrating my current screen
Is there anyway to make the width of the textfield take up less than the entire width of the column? Basically, I want the columns stay at the sizes they are (2 columns at 50% each), but I do not want the textfield taking up that entire space of the column.
Can this be achieved using a column layout like I have now?
I think you just use Ext.layout.container.Column wrong way.
In your example each textfield working as column itself and total columnWidth is 1.5.
columnWidths must always add up to 1 (or 100%) when added together, otherwise your layout may not render as expected.
You have to use any container component as column and add textfields to this containers.
Check this simple example.
Is there a way to display the groupFooterTemplate value when showing group aggregates to take the entire row? So instead of the content being confined to the single column where you put the groupFooterTemplate property, I'd like for it to take up the entire row so the contents don't wrap if the container column is really small.
Using the Kendo template to add a tr seems to add a completely new, separate row and also another blank one, so that doesn't work. I also tried targeting the affected td to give it a colspan, but since the grid automatically creates blank cells for the other columns, that didn't work either.
I feel like I'm missing something to be able to do this. Anyone have any ideas?
Thanks!
I ended up using a CSS solution for it, so it just overflows and makes it look like it takes the whole row.
.k-group-footer {
td {
overflow: visible;
// div that contains the aggregate content
.footer-totals {
white-space: nowrap;
}
}
}
I have two tables adjacent to each other both being populated dynamically in C#, I want both of these two tables to have the corresponding row height be exactly the same depending on what the first tables row height is (no specific height has been set, just needs to fit text in).
I have tried various ways of getting the height in C#, javascript, jquery, etc however they all return null or 0, i can get it to work by actively setting the height however this is not very effecient and occasionally buggy, is there a way I can get the height of a dynamically created html table row/cell?
#JoseRuiSantos comment is a better implementation if your design allows it (i.e. combine data in both tables in to a single table and accordingly render rows and columns to display as two different tables using css).
One way I could think is to try using javascript:
For this to work, do not set any table/row/column heights in both tables.
Add an empty column at the end of each table with a div element in it. In the page load completed event, identify the max column height in corresponding row of both tables and set the corresponding div element's (in both tables) height (in corresponding row) to the column max height.
I am trying to implement a table structure in which the header remains fixed when i scroll down. I have used 2 tables for this purpose. The first table has the header values and the second table have the corresponding data(length of data in each column might vary as the data is populated dynamically). The problem is that the header width and data column width are not matching exactly.
I have written some code like shown below to dynamically alter the column width
$('#tdCheckAllBody').width($('#tdCheckAllHead').width());
$('#tdLoginBody').width($('#tdLoginHead').width());
$('#tdStatusBody').width($('#tdStatusHead').width());
$('#tdFNameBody').width($('#tdFNameHead').width());
$('#tdLNameBody').width($('#tdLNameHead').width());
$('#tdCompBody').width($('#tdCompHead').width());
But it doesnt seem to work properly. Any help appreciated.
Use this method
$(window).scroll(function(){
$("#id of the table header").offset({top:$("#id of the control which u placed the scrolling").scrollTop()});
});
Created a working fiddle for this:
http://jsfiddle.net/terjeto/dx7H5/
Offcourse if your case is different, you might need to tweak a litle. In my opinion the problematic areas are if the table use dynamic or % width and coping with the "auto" scrollbar which takes up approx 18px, and offcourse if the table needs horizontal scrollbars it complicates things a litle needing the onscroll event.
Could it be that your exmple is not accurate because of lacking reset-css code?
I use this: http://developer.yahoo.com/yui/reset/