Dojox Datagrid, add span to every cell to make css nowrap to work in IE7 - dojox.grid.datagrid

Since nowrap on td element doesn't seems to work in IE, see this question, I am in desperate need of help how to add a span element with nowrap to every cell in a Dojox Datagrid without having to define field formatters to accomplish this.
See jsfiddle here http://jsfiddle.net/HkxHZ/4/
Using this css I get what I want in Chrome and FF, i.e. no word wrap and overflow hidden. But it doesn't work in IE..
<style type="text/css">
.dojoxGridRowTable {
table-layout: fixed;
width: 0px;}
.dojoxGrid .dojoxGridCell {
text-align: left;
overflow:hidden;
white-space:nowrap;}
</style>​

This method is like auto-size in that is will make the width of each column in the DataGrid big enough to show your data with no wrapping.
What you should do is calculate the proper width for each column of the grid layout based on PX size of the text in the column description and data for that column. This should be done before creating the grid layout.
Here is how you get the proper width in px. Add the following html to your page:
css:
#test
{
position: absolute;
visibility: hidden;
height: auto;
width: auto;
}
<div id="test"></div>
1) Get the font size used in your DataGrid
2) Get the div object and set the font size to what is used in the grid
<div id="test"></div>
var tst_item = window.document.getElementById("test");
tst_item.style.fontSize = grid_fnt_sz;
3) Place each column description and data item intended for your DataGrid into the hidden div:
tst_item.innerHTML = "Your data";
var widthPX = (tst_item.clientWidth + 1); //Width of text in PX
Store this widthPX in an array for each column keeping only the largest found for the column.
4) When creating the layout for your grid, set the width for the column to the largest width from your column description and data for that column.
This method ensures that width of each column will be big enough to show your data without wrapping. Depending on your needs, you can tweek the logic to do what you need. This might not be feasible with large amounts of data. But, it works great for me.

Related

Tinymce - validate cell width in cell properties or is it possible to set min width for any column?

We need to validate the cell width less than 10px need to show error message.
Is there any option please let us know.
Also, is it possible to set min width for column.
Thanks
About this: "Also, is it possible to set min width for column."
It`s possible that you set a minimum width in css styles.
You can set default styles in content_style property
example:
init {
...,
content_style: 'th,tr { min-width: 10px; }'
}
URL documentation: https://www.tiny.cloud/docs/configure/content-appearance/#content_style

ag-Grid: extend rows till right edge if columns don't occupy full width

In ag-Grid, if the columns occupy a smaller space than the width of the grid, a blank hole appears on the right of the last column. Please see below (example taken from ag-Grid docs):
The UX designers on my team don't like that. They would like to see the rows extended all the way to the right to balance out the look. Is this possible to do with ag-Grid?
Edit: We don't want to use the sizeColumnsToFit option, because on large monitors it produces very wide columns and the grid becomes unreadable. We want to use the autoSize option to compact the columns and fill the hole on the RHS with blank stripes as suggested above.
Yes it is possible. You can call the sizeColumnsToFit function on the ag-Grid api which will fill out the width of the table with the columns.
Take a look at documentation.
Here is a plunker example.
EDIT
Use the property suppressSizeToFit and set it to true to when you call sizeColumnsToFit, it won't have an affect. Apply this property to the defaultColDef and set it to false for the last column. This was, when you call sizeColumnsToFit, only the last column will be set to full width. See the updated plunker above.
this is how i do it:
/**
* if there is "dead space" present on the grid, the columns will be auto sized to fill the gap
* #param gridApi
* #param columnApi
*/
resizeColumnsToFit(gridApi: GridApi, columnApi: ColumnApi, allowShrink = false) {
if (allowShrink) {
gridApi.sizeColumnsToFit();
} else {
const gridBodyWidth = document.getElementsByClassName("ag-root-wrapper")[0].clientWidth; // todo: use grid's id instead of [0] to allow multiple grids on a page
const allColumnsWidth = columnApi.getAllDisplayedColumns().map(c => c.getActualWidth()).reduce((a, b) => a + b, 0);
if (gridBodyWidth > allColumnsWidth) {
gridApi.sizeColumnsToFit();
}
}
}
This method will size columns to fit only when there is "dead" space on the right. Optionaly set allowShrink to true to force resizing even if there is no dead space
I had the same situation and resolved with the following css override:
.ag-center-cols-container {
width: 100% !important;
}
One possible option I've been playing with is adding a fake column at the end to fill the remaining space. To do so, you just need to add a column with options similar to the following to the end of your list of columns:
{
flex: 1,
headerName: '',
}
See this plunker forked from #ViqMontana's example above.
It's not a perfect solution, but wanted to mention it here in case it helps.
This works like Craig Weston's answer but without the need for !important:
.ag-center-cols-container {
min-width: 100%;
}

Auto Size all columns to fit content

All my searches turned up for sizeColumnsToFit and autoSizeColumns which is not what I want.
My grids have many columns, so it scroll horizontal which is fine
But I cannot know in advance what would be the most space needed for the widest text in a column, so want the grid to auto size all columns to accommodate for whatever is the longest line of text in the cell.
Can one do that? (pretty much like have nowrap on a html table column, not that ag-grid wrap text, it just hide what is too long)
Grid Resizing:
https://www.ag-grid.com/javascript-grid-resizing/
sizeColumnsToFit - this tries to squeeze all the columns in the view - no horizontal scrolling
autoSizeAllColumns - this tries to size all columns to to fit the data - horizontal scrolling
// If you need to resize specific columns
var allColIds = params.columnApi.getAllColumns()
.map(column => column.colId);
params.columnApi.autoSizeColumns(allColIds);
// If you want to resize all columns
params.columnApi.autoSizeAllColumns();
I passed through this and it took me some time to make it work the way I wanted to, by that I mean :
Use all the available space
Make each column take the width required to display its content correctly
Solution :
Add the width parameter for each column (requires some manual tuning to set the right values)
Call gridApi.sizeColumnsToFit() in the onGridReady which will resize to take the available space while making sure that columns having bigger width will take more space
const gridOptions = {
...
columnDefs: [
{
...,
width: 100
},
{
...,
width: 50
},
...
],
...
onGridReady: (event) => event.api.sizeColumnsToFit();
};
Simply use flex instead of width in the column definitions. The grid will adjust automatically.
You can find a complete example for auto resizing all column.
column-sizing
Simply call autoSizeColumns() function, all columns will be resized according to content.
gridColumnApi.autoSizeColumns(allColumnIds, skipHeader);

Add a separator in GWT flextable row

I have a flex table in GWT , it has 3 rows . Now I want to draw a line / separator after every row .(just separator between rows, Not for column)
can i acheive this ..
here's the current screen
You can see 3 rows , just need a clean and nice line between them
A FlexTable is rendered as just a <table> with their cells being simple <td>s. So in your CSS you can include something like this:
.tableWithRowsDelimiter td {
border-bottom: 1px solid #c9c9c9;
}
And then assign the tableWithRowsDelimiter style to your FlexTable, via ui.xml:
<g:FlexTable ui:field="yourFlexTable" class="tableWithRowsDelimiter"/>
Or in your Java code:
yourFlexTable.setStyleName("tableWithRowsDelimiter");

WebKit CSS transformations and animations in Javascript

I'm working on a IPhone web application. I just starded playing with the webkit-transform and webkit-animation CSS rules. I've some questions: for example, is there real advantage in using these instead of, say, jQuery.animate(...)? The resulting animations don't seem to be that much accelerated and fast. Let's explain better: I've a series of images I have to move on the screen, like a gallery... I set each image CSS rules like this:
-webkit-transition-property: left, top, right, bottom, width;
-webkit-transition-duration: 200ms;
then I change the style.left and style.top of each element I want to move with new coordinates. The result is not so fast as I expected. It is fast more or less as jQuery is (not fluid at all). I've seen there is even -webkit-animation and -webkit-transform but I still don't understand how to use them properly. The first one lets me move things around, but doesn't generate an animation, I use the following code:
var trans = "translate(" + x + "px," + y + "px)";
ELEMENT.style.webkitTransform = trans;
with this the element moves around, but without an animation. If I create dynamically an animation with:
var lastSheet = document.styleSheets[document.styleSheets.length - 1];
lastSheet.insertRule("#-webkit-keyframes "+ "animX" + "{ from { top: "+oy+"px; left:"+ox+"px;} to {top: " + y + "px; left: " + x + "px; } }",lastSheet.cssRules.length);
ELEMENT.style.webkitAnimationName = "animX";
this way the element will move once, not so fludly, and well be back to it's old position. Repeating this code doesn't lead to anything.
What do you think, is there a real advantage in terms of fluidity of movement in using those? And if yes, how to use them properly?
Something like this should do what you want, and runs quite smoothly in Safari on my iPhone 4:
<style type='text/css'>
#element {
position: absolute;
top: 0px;
left: 0px;
-webkit-transition-property: top, left, bottom, right;
-webkit-transition-duration: 300ms;
-webkit-transition-timing-function: ease-in;
}
</style>
<script type='text/javascript'>
document.querySelector('#element').style.left = '300px';
</script>