I'm new to GWT and trying to understand it, but have encountered with a problem. When I try to add column style to the specified column in the table
table.getColumnFormatter().addStyleName(column, "columnStyle");
it doesn't take effect, but when I apply this style to each cell in the column
table.getCellFormatter().addStyleName(row, column, "columnStyle");
it works fine. Why I can not apply the style to the whole column?
It's possible that you're adding unsupported CSS elements to <col>, it only accepts backgrounds, width and borders CSS properties, whereas a <td> can accept many more.
Related
Is it possible to have a grid column containing multiple types inside of it based on the value of a cell? Where each cell is rendered based on value. For instance, with in the same column a cell could be of type 'text' or 'datetime' or 'list' etc... and for each type I can use built in inline-editing? See image illustration below. Basically a key/value editor where the value column need to contain more than one 'type. Please post a sample answer.
It's possible, but you cannot rely on standard funtionality.
The idea of a w2grid is to assign a renderer to a column and render all cells of the same column in the same way.
You could implement a render function for your column and then generate the HTML for each cell based on those arguments:
http://w2ui.com/web/docs/1.5/w2grid.columns
Or you could override getCellHTML() for your grid.
Have a look at the implementation of getCellHTML() to see what awaits you if you want to customize it:
https://github.com/vitmalina/w2ui/blob/master/src/w2grid.js#L7396
Although it was a hack solution I ended up creating multiple grids aligned vertically each with a property & value column but the value column's 'type' attribute is different for each grid based on the w2ui framework out of box functionality I Desired for it. Each Grid is also separated by the header without padding to give it a feel like it is one grid. See Image below. now obviously the draw back of this is you cannot sort on all the fields but this is not required in my use case.
Is it possible to add a border to the pivot groupings (or possibly just column groupings) on ag-grid? My groups are quite wide and I'm using material theme which makes it hard to read the grid clearly.
There doesn't seem to be any api exposed or css class to use?
e.g. sum (gold) or whatever column is on the left of the group would have border-left css to demark from the previous group.
https://www.ag-grid.com/javascript-grid-pivoting/#example-simple-pivot
Try to add cellClass and headerClass.
Add CSS to this class and also to ag-header-group-cell-with-group.
Plunkr:
https://next.plnkr.co/edit/ZQ1rv0cwau99oarH
I need to slightly modify a ag-grid row after it has been rendered. In ag-grid, the actual HTML elements are not necessarily persistent, so manually-set styles may fall off.
For one thing, I have to modify the selection checkbox to set its tabindex to -1. This can technically be done in the cellRenderer callback, although it looks quite hacky. (The checkbox can be found at params.eGridCell.children[0].children[0].wrappedElement.)
But I also have to add a CSS class to some rows to highlight them based on external criteria. I haven't found a way to do this at all.
The best solution would seem to be using some sort of after-rendering callback, but to my knowledge no such thing exists.
I found a couple of related questions, but they were both resolved via cellStyle, which would not suffice here:
Row formatting in ag-Grid
How to provide a background color for an entire row in ag grid based on a certain value in a column?
You have not 1 but 3 options:
getRowClass(params):
Callback version of property 'rowClass'. Function should return a string or an array of strings.
getRowStyle(params):
Callback version of property 'rowStyle'. Function should return an object of CSS values.
processRowPostCreate(params):
Allows you to process rows after they are created. So do final adding of custom attributes etc.
In this last one you have the row in params.eRow.
All taken from https://www.ag-grid.com/javascript-grid-callbacks/index.php
I'm using smartgwt ListGrid. The problem appears when it's empty, and if i manually set columns width, i can get some columns clipped in the view port and there is no horizontal scrolling so I can't access them.
But if I add an empty record, the scrollbar appears. I've fixed it by adding
setAutoFitData(Autofit.HORIZONTAL);
setAutoFitMaxColumns(3000);
setOverflow(Overflow.AUTO);
But I need to add some freezed columns to my listGrid. I'd like to use setFrozen(true) method, but its not compatible with setAutoFitData(Autofit.HORIZONTAL);
What I need is
to show a scrollbar if columns are out of the view port, even when list grid is empty.
some first columns must be frozen.
Everything works with the base List Grid with no additional options. But when i set
setShowEmptyMessage(false);
my scrollbar disappears.
Kind of workaround i've found:
setShowEmptyMessage(true);
setEmptyMessage(" ");
I am using a Gwt DataGrid with multiple Columns. The default behavior of the columns is to wordwrap. I would like for one of the columns to not wordwrap and just cut off. Is this possible?
For example, currently this is displayed:
I am making a
sandwich
I would like it to display:
I am making a
In addition to overflow:hidden you may need white-space:nowrap and finally add a text-overflow: ellipsis so there is an indicator to the user that the incomplete text is being shown.
You can set overflow: hidden in the style of each Column.
You can use DataGrid.addColumnStyleName to set styles on individual columns, or just addStyleName to add a style to the whole widget.