I'm using the vanilla JS version of AgGrid.
Let's say I have a column called ThingType where the rows can have three values: car, bike, plane
If the value of the individual row is car or bike, I want that cell to be static. However if the text value of that cell is plane I'd like that individual cell to have a custom editor type where I allow editing and autocomplete.
I've seen this docs page: https://blog.ag-grid.com/conditional-formatting-for-cells-in-ag-grid/ that seems to suggest I could setup a custom cellrenderer but it's not clear with out that relates to the columntypes API or how I'd setup an individual cell to use the editbility functionality I setup in a custom column def.
Basically it feels like I want to move type off of columnDef and be cell by cell. Any thoughts on how to achieve this?
This can be done using conditional editing. You treat all values the same and prevent cell editing on cells that meet a specific condition (cells value with "Car" & "Bike").
Plunker Example Link
{ field: 'country',
// China & Russia are not editable, rest are
editable: (params) => !(params.node.data.country === 'Russia' ||
params.node.data.country === 'China')
}
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.
I am trying to make clicable link in group (group and its child should be clickable, should be like a link)
i'm not able to make it because for a clickable link i need to create a cellrenderer but in this case group cellredered in already there
here is my plunker
https://plnkr.co/edit/gMfQXY?p=preview
Why do you need to have it in one column? You can define 'dummy' column exactly for group handling and then, the first column with own cellRenderer for the link.
Anyway, you can use innerCellRenderer inside cellRendererParams- I suppose it's exactly as you looking for.
innerRenderer: The renderer to use for inside the cell (after grouping functions are added).
cellRenderer:'agGroupCellRenderer',
// provide extra params to the cellRenderer
cellRendererParams: {
suppressCount: true, // turn off the row count
suppressDoubleClickExpand: true, // turn off double click for expand
checkbox: true, // enable checkbox selection
innerRenderer: myInnerRenderer, // provide an inner renderer
footerValueGetter: myFooterValueGetter // provide a footer value getter
}
Code part from official doc
I'm working with Fiori elements, and in the ObjectPage I want to display a table inside a section. For this table I have a column as a boolean type.
Is it possible to manage this column as a checkbox by annotation, or some other way? If so, how?
I am not sure why it should not be possible. Since a checkbox basically has two states, it should be able to handle the boolean variables very well. Care to explain more about what exactly you want to achieve?
When using Fiori Elements currently a boolean value is displayed as text.
Expect you are in edit mode - then a checkbox is rendered.
So, the answer is 'No' for display mode and 'yes' (by default) for edit mode.
I'm having a hard time figuring out how to individually style a cell or group of cells when a certain thing happens. For instance I would like to be able to right-click on a cell and hit something like "tag" and it would change the background color of the cell to something different. I would like to do the same thing with rows, columns, or any random group of selected cells. I also need this change in style to persist even if the cell(s) are moved beyond the viewport layer's view.
If you have a hard time with NatTable, maybe it is worth reading some of our tutorials and documents.
https://www.eclipse.org/nattable/documentation.php?page=styling
http://www.vogella.com/tutorials/NatTable/article.html
In short related to your question. Individual styling is done via config labels on a cell and styles that are registered in the ConfigRegistry for that label. So what you need to do is to implement some sort of label registry based on cell indeces. That label registry then needs to be used by a custom ConfigLabelAccumulator so the labels are attached to the cells with the corresponding indeces.
We have a basic implementation on a column base via the ColumnStyleEditorDialog. This can be seen in the _000_Styled_grid example by clicking on the column header and call "Format cells". Personally I think that feature is not complete, but it should help you in seeing how it works in principle.
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