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;
}
}
}
Related
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"
This is a continuation of my previous post found here.
The fixed headers work fine but I'm having a problem on initial load.
When the table first loads it looks like this:
But then once I click on of the column heads to sort it by that value everything snaps into place and ends up looking like this:
Like I said in my previous post, I'm using the anguFixedHeaderTable plugin. The headers stick fine but I'm just getting this glitch. I can provide details on all the resources I use in this project if that helps to debug the problem. I can provide more info but I just don't know what to provide at this point.
Additionally, when I click on the column to sort the list the table flickers in that it expands to full size before coming back to a height of 300px with a scroll bar. If I click it a few more times it sorts without any table flickers. If I click on a new column header to sort by that it again flickers once but a few more clicks of the same header results in a smooth and clean ordering. Any idea what's causing this flicker?
Edit 1:
Based on Code Wizard's advice I took the working code from the demo and put it into the github .js file. Here's what I have now:
function tableDataLoaded() {
// first cell in the tbody exists when data is loaded but doesn't have a width
// until after the table is transformed
return $elem.find("tbody").is(':visible');
/*var firstCell = elem.querySelector('tbody tr:first-child td:first-child');
return firstCell && !firstCell.style.width;*/
}
This actually works perfectly on first load. The only problem is I have two tables that the user can switch between with a click of a button. Those tables are controlled with a simple ng-show expression to detect which view the user selected. So when the table first loads, the look exactly like they should in both views. But then if you keep toggling back and forth the columns start messing up again. Until you click the column to sort it, then it snaps back into place.
Edit 2:
I tried going the css route and I mostly got it working. Only problem is the columns are slightly misaligned. The main issue is that the columns widths aren't dynamic. Here's a plunker to reproduce my issue. As you can see, the first row's first column content spills into the adjacent column. I want the columns to be dynamic and aligned
Since i dont have your code i can only try to help you out by pointing out some issues that might cause this problem.
When HTML engine render out tables it has to loop over all the cells and to calculate the max width of each cell in order to find the max width per table column.
The anguFixedHeaderTable use this code:
function tableDataLoaded() {
// first cell in the tbody exists when data is loaded but doesn't have a width
// until after the table is transformed
var firstCell = elem.querySelector('tbody tr:first-child td:first-child');
return firstCell && !firstCell.style.width;
}
And this function is fired here:
// wait for data to load and then transform the table
$scope.$watch(tableDataLoaded, function(isTableDataLoaded) {
if (isTableDataLoaded) {
transformTable();
}
});
If the table is not loaded yet when this code is executed the table will "fix" its width and it will use the default width which the HTML engine set to it.
What i suggest to do in order to fix it is to load the table and only After its loaded (to be sure that the function is called after the table was loaded) is to use java script code which will append the directive to the table of to re-write this module to fix this issue.
Updates after playing with the code and trying to fix the problem.
Note
On the demo site the code is different than the one in GitHub
Demo code:
- http://pointblankdevelopment.com.au/plnks/angularjs-fixed-header-scrollable-table-directive/app.js
GitHub code
- https://github.com/cornflourblue/angu-fixed-header-table/blob/master/angu-fixed-header-table.js
And the difference is this:
# The working code in the demo
$scope.$watch(function () { return $elem.find("tbody").is(':visible') },
# The "buggy" code on git hub
// wait for data to load and then transform the table
$scope.$watch(tableDataLoaded,
function(isTableDataLoaded) {
if (isTableDataLoaded) {
transformTable();
}
}
);
Grab the code from the demo and it will work as expected.
Good Luck.
have you try adding width:100%; in table and tr ?
table,tr {
width:100%;
}
Demo here
Your issue is mostly fixed, and I think you just need to apply fixes from CSS to complete it. How about we wrap the first column like this:
table tr th:first-child, table tr td:first-child{
word-wrap: break-word;
white-space: inherit!important;
}
Preview on Plunker
The TDs in your table are already responsive, we just need to modify to make the content is not overflow by applying the wrap in every th, td that you might think it would happen.
The above code I applied it to the first child, but you can customize to entire table.
Try adding this CSS:
.table {
width: 100%;
height: 200px;
}
Please see this modified CodePen: CodePen for fixed Header & Footer
what I'm asking about may be a bit too specific to be realistic, but what I'm looking for is a way to have a table/grid in a webpage that is composed of colour-coded cells. Upon clicking a cell, it expands to reveal the previously hidden contents of the cell. Ideally this would be accompanied by some sort of jquery-esque smooth animation.
I'm not asking necessarily for a complete solution here, but rather where I would need to start looking in order to be able to create something along these lines.
What I'm thinking is something that looks like this before you click on a cell:
And this afterwards:
Thanks in advance,
Kez
Use Javascript
Try this
<td id="name1" onclick="myfunction()"><div id="content"></div></td>
Java script
<script type="text/javascript">
function myfunction()
{
$("#content").html("Cell Content Become Visible ");
}
</script>
Thanks for the tips, guys, I actually managed to get pretty much exactly what I wanted using your advice. In particular the event.target property came in useful. Thanks, Izzluca.
I have created a JSfiddle showing my solution.
I gave a class ("tlight") to every cell I wanted to be able to resize, and used the following jquery code:
$(document).ready(function () {
$('.tlight').bind('click', resizeAll);
function resizeAll() {
$('.tlight').animate({
height: 50,
width: 50
}, "slow");
$(event.target).animate({
height: 100,
width: 100
}, "slow");
};
});
Kez
Not sure I am getting the problem...
It looks like you have to add a listener for the click event, on every td or maybe, ligther, on the tbody of the table: checking the "event.target" property you could be able to get to the td that raised the event (I am assuming you are working with an HTML table).
For the content, you could store it directly inside the cell itself, maybe inside a div wrapper; you can set the css property overflow on the wrapper, showing the content as much as you want (you should have to specify the height/width of the wrapper and "overflow:hidden;" on it, if I recall correctly). The cell will resize accordingly with its content.
At the click handler, you can change the overflow property to "overflow:visible;": in that case, all the content will be shown (or just change the height/width to show more of it).
If you don't set any fixed height for the table's cells, the row will get the height of the highest cell, so you don't have to fix the row's height when you explode the cell's content.
PS: Maybe interesting: using "table-layout:fixed;" you should be able to assign a percentage height to the rows, like:
table {
height: 300px;
}
.row1: {
height: 50%;
}
.row2: {
height: 50%;
}
I'm making a prototype in HTML and I want to make a table, which will display more table rows when a user clicks on a button. I want to use the slideToggle function or something smooth.
It works, showing the content, but there is some lag or something strange going on. I have applied somewhat the same function on other objects (not in tables) and there it have worked out nicely.
This is my script:
$(document).ready(function() {
$('#show-more-rows').click(function() {
$('#tr-button').slideToggle();
$('.hidden-row').slideToggle();
});
$('#show-less-rows').click(function() {
$('#tr-button').slideToggle();
$('.hidden-row').slideToggle();
});
);
Here is a jsFiddle for my table.
Any help and tips will be appreciated!
jQuery's slide animation doesn't support table rows. Just split up the table in two tables (the one visible and the one that will be expanded) and wrap the second one in a div. Now you can slideToggle() this div.
Here's your fix: http://jsfiddle.net/5SYBe/12/
The problem is that you are using it on tr elements, which cannot be re-sized to less than their contents.. (that is the way tables work)
So the animation tries to animate their height from 0 to full but it fails so you see them at full size from the start.
The same goes on with the hiding. While the animation lasts (which does nothing visually) you see it and at the end where the elements gets hidden you get the final state..
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/