We Keep Coding

ag-grid column text truncating issue

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}
/>

Way to create empty space in gridster js

I am doing project in jquery to display the bus map as rows and columns. For that I am using gridster.js to display the seat arrangement. I am having the piece of following code
$(".gridster ul", xxxMapContainerST).each(function(){
var gridster =$(this).gridster({
widget_margins : [ 1, 1 ],
widget_base_dimensions : [ 30, 30 ],
draggable : false,
avoid_overlapped_widgets : false,
extra_rows : 0,
extra_cols : 0,
resize:false
}).data('gridster').disable();
});
Here the problem arise is when I want to display empty seats i.e not a cornered seats. The empty seat position was filled by the adjacent seats (filled by vertically down position seats). It causes severe misalignment. I have googled . No obvious solution found. Anyone kindly do some remedy for this problem.
Below link raises the same question, yet no answer found
Make gridster.js tiles stick in specific grid positions (snap to grid)

I was going thru something like same. May be I am answering it way too late!
But the demo link you have mentioned here is using a better 'version' of Gridster.
E.g. , the package I have downloaded from gridster's official page is v0.5.6 - 2014-09-25
and the one which consists of demo is - v0.6.10 - 2015-05-31
If you still want to upgrade your app
Following are the download links for CSS and JS
JS : http://dsmorse.github.io/gridster.js/dist/jquery.gridster.min.js
CSS : http://dsmorse.github.io/gridster.js/dist/jquery.gridster.min.css

Setting jqxGrid pagesize automatically

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.

Split table in two keeping same column width

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

Datatables on-the-fly resizing

I'm using the marvellous DataTables jQuery plug-in; http://datatables.net/ Added the FixedColumns and KeyTable extras.
Now the table does resize prettily when the window size is changed. However, the containing div of the table can also be resized in width by a jQuery animation, and I haven't found a way to resize the table with it-- it just stays stagnant in its original width. Only if I change the div width in the code before pageload, the table is resized correctly.
How can I make the DataTable resize on-the-fly according to both the window width and the containing div width?

What is happening is that DataTables is setting the CSS width of the table when it is initialised to a calculated value - that value is in pixels, hence why it won't resize with your dragging. The reason it does this is to stop the table and the columns (the column widths are also set) jumping around in width when you change pagination.
What you can do to stop this behaviour in DataTables is set the autoWidth parameter to false.
$('#example').dataTable( {
"autoWidth": false
} );
That will stop DataTables adding its calculated widths to the table, leaving your (presumably) width:100% alone and allowing it to resize. Adding a relative width to the columns would also help stop the columns bouncing.
One other option that is built into DataTables is to set the sScrollX option to enable scrolling, as DataTables will set the table to be 100% width of the scrolling container. But you might not want scrolling.
The prefect solution would be if I could get the CSS width of the table (assuming one is applied - i.e. 100%), but without parsing the stylesheets, I don't see a way of doing that (i.e. basically I want $().css('width') to return the value from the stylesheet, not the pixel calculated value).

I know this is old, but I just solved it with this:
var update_size = function() {
$(oTable).css({ width: $(oTable).parent().width() });
oTable.fnAdjustColumnSizing();
}
$(window).resize(function() {
clearTimeout(window.refresh_size);
window.refresh_size = setTimeout(function() { update_size(); }, 250);
});
Note: This answer applies to DataTables 1.9

This did the trick for me.
$('#dataTable').resize()

$(document).ready(function() {
$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
// var target = $(e.target).attr("href"); // activated tab
// alert (target);
$($.fn.dataTable.tables( true ) ).css('width', '100%');
$($.fn.dataTable.tables( true ) ).DataTable().columns.adjust().draw();
} );
});
It works for me, with "autoWidth": false,

You should try this one.
var table = $('#example').DataTable();
table.columns.adjust().draw();
Link: column adjust in datatable

Use "bAutoWidth": false and go through the example given below. It is working for me.
Example:
$('#tableId').dataTable({
"bAutoWidth": false
});

I had the same challenge. When I collapsed some menus I had on the left of my web app, the datatable would not resize. Adding "autoWidth": false duirng initialization worked for me.
$('#dataTable').DataTable({'autoWidth':false, ...});

might be late also like the other answer but I did this early this year and the solution I came up with is using css.
$(window).bind('resize', function () {
/*the line below was causing the page to keep loading.
$('#tableData').dataTable().fnAdjustColumnSizing();
Below is a workaround. The above should automatically work.*/
$('#tableData').css('width', '100%');
} );

Have you tried capturing the div resize event and doing .fnDraw() on the datatable? fnDraw should resize the table for you

I got this to work as follows:
First ensure that in your dataTable definition your aoColumns array includes sWidth data expressed as a % not fixed pixels or ems.
Then ensure you have set the bAutoWidth property to false
Then add this little but of JS:
update_table_size = function(a_datatable) {
if (a_datatable == null) return;
var dtb;
if (typeof a_datatable === 'string') dtb = $(a_datatable)
else dtb = a_datatable;
if (dtb == null) return;
dtb.css('width', dtb.parent().width());
dtb.fnAdjustColumSizing();
}
$(window).resize(function() {
setTimeout(function(){update_table_size(some_table_selector_or_table_ref)}, 250);
});
Works a treat and my table cells handle the white-space: wrap; CSS (which wasn't working without setting the sWidth, and was what led me to this question.)

I was having the exact same problem as OP. I had a DataTable which would not readjust its width after a jQuery animation (toogle("fast")) resized its container.
After reading these answers, and lots of try and error this did the trick for me:
$("#animatedElement").toggle(100, function() {
$("#dataTableId").resize();
});
After many test, i realized that i need to wait for the animation to finish for dataTables to calculate the correct width.

The code below is the combination of Chintan Panchal's answer along with Antoine Leclair's comment (placing the code in the windows resize event). (I didn't need the debounce mentioned by Antoine Leclair, however that could be a best practice.)
$(window).resize( function() {
$("#example").DataTable().columns.adjust().draw();
});
This was the approach that worked in my case.