Want to render the column width based on the text. Few characters are missing after crossing min width(200px) of the column.
Note: Columns are loading dynamically, so that i can't add width property for every column.
I am using Ag-Grid Enterprise edition
Thank you in-advance.
You can't. You have to preset the value of the column's width in the columnDef
const columnDefs: Array<ColDef | ColGroupDef> = [
// ...
{
// ...
width: number,
}
];
You can also have a cellStyle or cellClass property in the column definition.
You can see the API here: https://github.com/ag-grid/ag-grid/blob/master/packages/ag-grid/src/ts/entities/colDef.ts
I think you have a couple of options.
1) Set column widths before rendering. Before the grid is rendered, cycle through your data object for max length of each element that will be displayed in the grid and then set your columnDefs accordingly. To edit columnDefs, you'll need to make it a variable, not a constant and then you are just editing an array of objects. See How to change value of object which is inside an array using JavaScript or jQuery? This approach will slow the initial rendering while calculating the widths.
2) Set column widths after rendering. After the grid is rendered, use the gridApi.setColumnWidth() method. https://www.ag-grid.com/javascript-grid-column-api/
onGridReady(params) {
params.columnApi.setColumnWidth('someColumn', someColumnWidth, true);
}
With this approach, the grid will start rendering a little quicker, but the user might see the column width adjust.
Not exactly what you're trying to do, I don't think, but another option is to let the text truncate and have it show on mouse hover:
agGridColumnDef.cellRenderer = function(params) {
return "<span title='" + params.value + "'>" + params.value + "</span>";
};
The answer for future googlers
<AgGridColumn
wrapText={true}
autoHeight={true}
/>
Related
A Simple Problem: When table is wider than screen (overflow) and it contains lengthy text in some cells or <td>, then the row height will become unnecessary extra.
Before Overflow : Normal and Acceptable. http://jsfiddle.net/mg8869ou/1/
After Overflow : Problematic after adding cells Only To Right-Side making unnecessary height for whole row and also whole table. http://jsfiddle.net/w1dc380w/4/
All my tables have different length of text in cells, different number of rows and columns. Is there a single solution to manage all my tables(overflow) row height?
What I think: use of whitespace:nowrap to remove white-space or make every cell single line + force longest cell of every row and column to be square or nearly square will make table compact.
Solutions Not Useful For all rows or columns or tables:
(1)css min-width to columns or cells (2)css width to table (3)css whitespace:nowrap to table.
Because all cells have different amount of text in it, tables have different width, number of cells, rows & columns. So these CSS leaves useless white-space and unable to make a table compact as possible.
Is there any way to solve this with or without Javascript or any better way what I think?
No extra white-space solution for you,
In your case this jquery will check every row to , and increase the table width till all rows are nearly equal height.
var i = 0,
j, row, table = document.getElementsByTagName('table')[0];
while (row = table.rows[i++]) {
j = 1000;
while (row.offsetHeight > 200 && j < 2500) {
j += 500;
table.style.width = j + 'px';
}
}
Since JQuery=javascript i hope this is acceptable for you:
http://jsfiddle.net/w1dc380w/8/
$( "th,td" ).each(function( index ) {
$( this ).wrapInner( "<div class='wrapper'></div>");
});
CSS:
.wrapper {
width:100px;
height:100px;
}
simple, we need divs sometimes... :)
You've categorized this as javascript, so I'm going to assume you're okay with using some scripting here. I tried some CSS solutions myself from Google and SO, but unfortunately many were responsive based and/or relied on knowing a fixed width - out of the question.
So I used a javascript snippet to loop through all the <td> elements, find which one had the greatest height, then use half of that height to make all of the <td> look roughly square. Fiddle
var greatestHeight = 0;
$('td').each(function(index){
if($(this).height() > greatestHeight){
greatestHeight = $(this).height();
}
});
$('td').css('min-width', (greatestHeight / 2));
It's not perfect, and I'd recommend that you qualify this per table if you have more than one table per page (ie, td.firstTable), otherwise the logic will run between tables.
Want to create the jqgrid footer as described in below grid:
I want the footer in the jqgrid as shown in above jqGrid.
I have set the footerrow:true and $self.jqGrid("footerData", "set", { Total: actualSum });, with this i am able to get the footerRow.
And to add label to this as i mentioned 'Grand Total: ' i need to merge two columns Amount and Tax..
So, how can achieve these.
I have gone through this.
But the cellattr is used to merge the cells.. Incase of footer row i am not able to get this cellattr if there is way to use these approach. How can i fix my probelm using this?
I even gone through these answer.
Here, just the the right border are made hidden conditionally but the colsapn is not used.
So that too didn't help me to fix my problem.
Currently i am getting the footer like these:
#Oleg can you just guide me how i can fix this issue and create the footer using the colspan as i described.
One can use colspan in the footer too. It's important to understand that jqGrid set the footer once during creating the grid and then just can change the width of columns on the footer if the user resized the column width.
To simplify the code I suggest to set resizable: false property on the columns where we use colspan. The demo demonstrates the solution:
In the demo I added resizable: false property in "Client" and "Date" columns ("name" and "invdate" columns) and used the following code after jqGrid is created:
var $footRow = $("#list").closest(".ui-jqgrid-bdiv").next(".ui-jqgrid-sdiv").find(".footrow");
var $name = $footRow.find('>td[aria-describedby="list_name"]'),
$invdate = $footRow.find('>td[aria-describedby="list_invdate"]'),
width2 = $name.width() + $invdate.outerWidth();
$invdate.css("display", "none");
$name.attr("colspan", "2").width(width2);
$footRow.find('>td[aria-describedby="list_tax"]').css("border-right-color", "transparent");
$footRow.find('>td[aria-describedby="list_total"]').css("border-right-color", "transparent");
$footRow.find('>td[aria-describedby="list_closed"]').css("border-right-color", "transparent");
$footRow.find('>td[aria-describedby="list_ship_via"]').css("border-right-color", "transparent");
I am using jqWidgets and I have a Grid but I want to set the "pagesize" dynamically depending on how many rows can fit on the page. - There is no 'auto' option.
So basically, I was thinking of getting the Height of the Grid and doing some calculation and then setting the pagesize, so if the row height was 20px for example, something like this:
var height = $("#jqxgrid").height();
page = height*100/20;
$("#jqxgrid").jqxGrid({pagesize : page});
Basically something like that but the calculation doesn't work properly as I am no good at maths! lol. Any idea's? Thanks
Think I have sorted it... this seems to work as an example:
var page = $("#jqxgrid").height()-128;
pages = page/26;
valuetest = Math.round(pages);
$("#jqxgrid").jqxGrid({pagesize : valuetest})
Actually, there is "auto" option. The option would be to set the Grid's "autoheight" setting to true so the Grid's height would depend only on the number of displayed rows.
I'm trying to split a table -- i.e., rip off the thead and put it in its own table. Here's what I've got so far:
fiddle
var $colgroup = $('<colgroup>');
$('td,th', '.query-results tr:first').each(function () {
$colgroup.append($('<col>').width($(this).outerWidth()));
});
$('<table>')
.insertBefore('.query-results')
.append($colgroup)
.append(
$('.query-results thead'));
$('.query-results').prepend($colgroup.clone());
I can't seem to get the column widths to be respected though; the tables never line up. I tried using colgroups like this guy said, but that doesn't seem to have an effect either.
What could be wrong?
Using the width attribute doesn't change anything either.
It seems you have to set the table width in order for the column widths to be respected.
var $colgroup = $('<colgroup>')
var tableWidth = $('.query-results').width();
$('td,th','.query-results tr:first').each(function() {
$colgroup.append($('<col>').attr('width',parseInt($(this).outerWidth())));
});
$('<table>')
.width(tableWidth)
.insertBefore('.query-results')
.append($colgroup)
.append(
$('.query-results thead')
);
$('.query-results').width(tableWidth).prepend($colgroup.clone());
fiddle
If you're trying to to make a scrollable table with a fixed header have a look here:
http://salzerdesign.com/test/fixedTable.html
I want a table that is 100% if the page that can contain any number of columns, dynamically created. Each column can contain very long words, so long that they all might not fit on one page. To fix this i used table-layout: fixed which made all columns of the table visible on the page. The problem is that I still want the width of each column to be dynamic so that if a column have short words it should be shorter than the one with the long word.
Example: jsfiddle.
Table 1 always shows all columns but when the page is wide enough it breaks the word even though there are free space in other columns.
Table 2 works fine when the page is wider than the columns but the first column pushes the other columns out of the screen/onto other objects when the window is smaller.
Is there a way to get it all? A table that always contains all columns and columns that are not wider than they have to be to fit? I want it to break the words if it has to rather than overflowing the table.
I could accept a js/jquery solution but if it's possible with css that is preferable.
Edit:
Small table:
Note: asasdasdasdasdasdasdasdasdasdasdasd is one word that is shortened because the table can't be larger than this.
+--------------------+----------+---------+
|asasdasdasdasdasdasd|qweqweqweq|zxczxczxc|
|asdasdasdasdasd | | |
+--------------------+----------+---------+
Large table:
Note: all columns are not of equal size, preferably they increase with empty spaces equally distributed.
+--------------------------------------+-------------+------------+
|asasdasdasdasdasdasdasdasdasdasdasd |qweqweqweq |zxczxczxc |
+--------------------------------------+-------------+------------+
If I understand this could be a starting point:
var tds;
$("table").each(function() {
tds = $("td");
for(var x = 0; x < tds.length; x++){
tds.eq(x).css('max-width', '100px');
}
});
First of all remove the "table-layout:fixed" property.
Try the following code, this should work perfectly in your case:
$(document).ready(function(){
$("table").find('tr').children('td').each(function () {
var wdth = $(this).html().length + 10;
$(this).css({ 'padding-right': '10px' }, { 'width': wdth + 'px' });
});
});