Setup Summary: We have two aggrids where we drag from one grid to the second grid. This works perfectly.
Issue: We have some lines we don't want to enable drag on. So we want a conditional drag based on a cell value.
Currently our table settings (we use reactjs) are as follows:
Table 1 and 2 have these properties:
rowData={rowData}
ref={fileGridRef}
columnDefs={columnDefs}
gridOptions={gridOptions}
rowDragManaged={true}
rowDragEntireRow={true}
animateRows={true}
onRowDragEnd={(params: any) => addToFilesGrid(params)}
suppressClickEdit={true}
gridOptions are (for both grids)
rowSelection: "single",
rowMultiSelectWithClick: true,
Column defs are (for both grids)
{
field: "name",
headerName: "File Name",
sortable: true,
filter: true,
editable: true,
cellStyle: { textAlign: "center", marginLeft: "-10px" },
cellRenderer: EditCellRenderer,
rowDrag: (params: any) => {
params.data.type !== ""; //HERE IS THE CONDITION WE HAVE
},
},
{
field: "type",
headerName: "Type",
sortable: true,
filter: true,
editable: false,
}
When the params.data.type is "" we want it not to move.
I tried playing around with rowDragManaged=false, but then nothing moved. I thought about making handlers for onDragEnter/Leave/Move/End, but I would rather avoid that if I can.
Anyone know what the issue is?
Do I have to do unmanaged dragging if I want this to work?
Finally found a solution!
I had seen that rowDrag could be set to a conditional statement but had issues getting it working, and there is one example on ag-grid docs that wasn't helpful in my use case.
So, I have a table, and if a cell is BLANK I don't want the row to drag.
So in the ColDef I had:
rowDrag: params => params.data.type === "",
Because that is what it was in the rowData. Also when I printed out params in other row changing functions (onRowSelected, onRowDragMove, etc...) this field was an empty string -> "".
It seems like for this conditional however it may be treated as an undefined or have a space. Not exactly sure, but I was able to do this:
params => params.data.type.length > 1,
And it worked! This leads me to believe the tags in the aggrid cell or something in their code inserts a space somewhere.
This was shown when I tried
rowDrag: params => params.data.type.length > 0,
and I could still drag the rows where my type field was "".
Related
I know that I can use the flex attribute on a column def if I want that column to take up the remaining space of a grid, like this:
public columnDefs: ColDef[] = [
{ field: 'name', flex: 1 },
{ field: 'medals.gold', headerName: 'Gold' },
{ field: 'person.age' },
];
And I know that I can pin a column to the left (or right) so that it doesn't scroll with the rest of the columns:
public columnDefs: ColDef[] = [
{ field: 'name', pinned: 'left' },
{ field: 'medals.gold', headerName: 'Gold' },
{ field: 'person.age' },
];
But I have a case where I want the first column to both be pinned AND fill the remaining space:
public columnDefs: ColDef[] = [
{ field: 'name', flex: 1, pinned: 'left' },
{ field: 'medals.gold', headerName: 'Gold' },
{ field: 'person.age' },
];
And when I do this (pinned + flex) the grid seems to ignore the flex attribute and always renders the column with the default width. I've been through the AG-Grid docs and don't see anything that explicitly says pinning and flex columns are incompatible, but maybe I'm missing it.
Here's a plunker to play with. Try removing the pinned attribute to see the flex column work.
Has anyone been able to combine these attributes on one column?
OK, I've found a solution. I'm not sure if this is a workaround, or if this is the way you're supposed to do it, so...
It was a combination of handling the gridReady event and calling Grid API api.sizeColumnsToFit().
In my case, I also set the width and suppressSizeToFit=true for the non-pinned columns.
Updated plunker.
I have an agGrid populated with Employee records in JSON format from my web service.
[
{
id: 123,
firstName: 'Mike',
lastName: 'Jones',
countryId: 1001,
DOB: '1980-01-01T00:00:00',
. . .
}
I have a second web service returning a list of country codes:
[
{ id: 1000, name: 'France' },
{ id: 1001, name: 'Spain' },
{ id: 1002, name: 'Belguim' }
]
What I'm trying to do is get my agGrid to have a column showing the user's details, including the name of their country, and when they edit this cell, a list of country codes will appear, where they can select one, and it'll update the record with the id of that country.
Basic stuff, no ?
But has anyone managed to get agGrid to successfully use the "agRichSelectCellEditor" to do this successfully ?
{ headerName: 'Country', width: 120, field: 'countryId', editable: true,
cellEditor:'agRichSelectCellEditor',
cellEditorParams: {
// This tells agGrid that when we edit the country cell, we want a popup to be displayed
// showing (just) the names of the countries in our reference data
values: listOfCountries.map(s => s.name)
},
// The "cellRenderer" tells agGrid to display the country name in each row, rather than the
// numeric countryId value
cellRenderer: (params) => listOfCountries.find(refData => refData.id == params.data.countryId)?.name,
valueSetter: function(params) {
// When we select a value from our drop down list, this function will make sure
// that our row's record receives the "id" (not the text value) of the chosen selection.
params.data.countryId = listOfCountries.find(refData => refData.name == params.newValue)?.id;
return true;
}
},
My code seems to be almost correct.. it manages to:
display the country name in each row of the agGrid
display a popup, listing the country names, from our "list of countries" array
when I select an item in the popup, it successfully updates the countryId field with the (numeric) id value of my chosen country
The only problem is that at the top of the popup, it shows the countryId value, rather than the user's current country name.
Has anyone managed to get this to work ?
The only workaround I could come up with was to override the CSS on this popup and hide that top element:
.ag-rich-select-value
{
display: none !important;
}
It works... but you no longer get to see what your previously selected value was.
(I really wish the agGrid website had some decent, real-life, working Angular examples... or at least let developers post comments on there, to help each other out.)
The solution was to use a valueGetter, rather than a cellRenderer:
{
headerName: 'Country', width: 120, field: 'countryId', editable: true,
cellEditor:'agRichSelectCellEditor',
cellEditorParams: {
// This tells agGrid that when we edit the country cell, we want a popup to be displayed
// showing (just) the names of the countries in our reference data
values: listOfCountries.map(s => s.name)
},
valueSetter: function(params) {
// When we select a value from our drop down list, this function will make sure
// that our row's record receives the "id" (not the text value) of the chosen selection.
params.data.countryId = listOfCountries.find(refData => refData.name == params.newValue)?.id;
return true;
},
valueGetter: function(params) {
// We don't want to display the raw "countryId" value.. we actually want
// the "Country Name" string for that id.
return listOfCountries.find(refData => refData.id == params.data.countryId)?.name;
}
},
I hope this is useful...
I was able to get my similar situation (id:name pairs in a list, but not using Angular though) working without the problem you mentioned above, and without a valueGetter/valueSetter and only a renderer. The benefit is that you don't need to double click the cell to see the list, the cell appears as a selection box always, and you avoid a bug should the user double click the cell when the list is displayed.
The renderer is a lot clunkier than I was wanting (one line like yours) and it didn't seem that aggrid had built in support for this pretty basic function (and I already have spent enough time on this).
Anyway, this is what I had, which at least works, but keen to see further improvements on it. (You will need to at least change 2 lines for the option related code since my defaultValue object is specific to me).
The column definition:
{field: 'defaultValueID', headerName: "Default Value", cellEditor:'agRichSelectCellEditor', cellRenderer: defaultValueRenderer}
And the renderer code:
function defaultValueRenderer(params) {
var input = document.createElement("select");
// allow it to be cleared
var option = document.createElement("option");
option.innerHTML = '[None]';
option.value = null;
input.appendChild(option);
for (var i=0; i < defaultValueList.length; i++) {
var option = document.createElement("option");
option.innerHTML = defaultValueList[i].name;
option.value = defaultValueList[i].gltID;
input.appendChild(option);
}
input.value = params.value;
input.onchange = function() {
params.setValue(this.value);
params.data.defaultValueID = this.value;
}
input.style="width: 100%; height: 100%"; // default looks too small
return input;
}
Here Is Example Of agRichSelectCellEditor...
{
headerName: 'Dropdown', field: 'dropdown',
cellEditor: 'agRichSelectCellEditor',
width: 140,
editable: true,
cellEditorParams: (params) => {
values: Get All Dropdown List Like ["Hello","Hiii","How Are You?"]
},
valueSetter: (params) => {
if (params.newValue) {
params.data.dropdown= params.newValue;
return true;
}
return false;
}
}
Much simpler solution: use cellEditorParams formatValue, along with valueFormatter
{
field: 'foo',
cellEditor: 'agRichSelectCellEditor',
cellEditorParams: {
values: [1,2,3, 4, other ids... ],
formatValue: (id: number): string => this.getLabelFromId(value)
},
valueFormatter: (params: ValueFormatterParams): string => this.getLabelFromId(params.value as number)
}
I am trying to create some columns using the autoHeight property set to true. However, I keep getting these warnings:
ag-grid: invalid colDef property 'autoHeight' did you mean any of these: suppressAutoSize,headerTooltip,openByDefault,headerComponent,suppressSizeToFit,sort,headerGroupComponent,pivot
<...snip...>
ag-grid: to see all the valid colDef properties please check: https://www.ag-grid.com/javascript-grid-column-properties/
My column definitions look something like this:
const columnDefs = [
{
headerName: 'Id',
field: 'id',
filter: 'agTextColumnFilter',
width: 90
}, {
headerName: 'Description',
field: 'sportLeage',
filter: 'agTextColumnFilter',
autoHeight: true,
valueGetter: params =>
params.context.liveEventsController
.createDescription(params.data),
width: 90
};
autoHeight is clearly listed as a valid column definition property. Though, in the debugger, I am looking at colDefUtil_1.ColDefUtil.ALL_PROPERTIES and autoHeight is not one of the available properties.
I am using ag-grid-enterprise v17.0.0.
My thinking is that either my version is out of date or the documentation is.
Check ag-grid v17.0.0 type definition code for ColDef here
autoHeight is not a property of ColDef.
I am currently at v17.1.1 and autoHeight is declared as number.
/** True if this column should stretch rows height to fit contents */
autoHeight?: number;
PS: The comments suggests that it should be a boolean.
Now this reminds me of a saying :)
Code never tells a lie, comments however, sometimes do.
I have requirement to get a drop down from a column which should have three values. I marked the column as editable with editable: true keyword, even then I am not able to edit. I just need a drop down with two values when i double click on the cell.
{headerName: "O", width: 70, valueGetter: this.geValue, editable: true, cellEditor: 'select',
cellEditorParams: {
values: ['Yes', 'No']}
}
I am using select here but not rick select because i am not using ag-grid enterprise. I am also setting these below properties for all the rows.
suppressCellSelection: true,
suppressMovableColumns: true,
suppressRowClickSelection: false,
I need help to find if I am missing anything here. I am not getting a drop down when I double click on cell.
I could finally figure out why I could not edit the cell even if I declare it editable. Because css is adding a class as shown below
<div class="ag-cell-no-focus ag-cell ag-group-cell ag-cell-not-inline-editing ag-cell-value" colid="O" style="width: 54px; left: 48px;"></div>
I have to remove ag-cell-not-inline editing class from the div. I am not sure how. Is there any option to remove default class from grid options?
I want to have the selection checkbox for ag-grid with the option below:
But didn't see the checkbox on the left. Have any idea what else needs to be settings to make the selection checkbox works.
self.appliancesInGroupGridOpts = {
angularCompileRows: true,
enableColResize : true,
rowData: null,
checkboxSelection: true,
enableSorting: true,
columnDefs: [
{
valueGetter: 'data.name',
headerName: $filter('translate')('APPLIANCE.NAME'),
suppressSizeToFit : true,
template: '<span class="appliance-name">{{data.name}}</span>',
checkboxSelection: true,
width: 200
} ,
{
valueGetter: 'data.updated',
headerName: $filter('translate')('APPLIANCE_GROUP.PUBLISH.MODIFICATION_TIME'),
suppressSizeToFit : true,
template: '<span class="appliance-updated">{{data.updated}}</span>',
checkboxSelection: true,
width: 200
}
] ,
http://www.ag-grid.com/angular-grid-selection/index.php
Checkbox selection can be used in two places:
row selection
group selection.
To include checkbox selection for a column, set the attribute
columnDefs: [{
valueGetter: 'data.name',
headerName: $filter('translate')('APPLIANCE.NAME'),
suppressSizeToFit : true,
template: '<span class="appliance-name">{{data.name}}</span>',
width: 200,
checkboxSelection: true
...
on the column definition.
You can set this attribute on as many columns as you like, however, it doesn't make sense to have it in more one column in a table.
To enable checkbox selection for groups, set the attribute:
groupColumnDef: {
headerName: "Athlete",
field: "athlete",
width: 200,
cellRenderer: {
renderer: "group",
checkbox: true
}
}
for the group renderer. See the grouping section for details on the group renderer.
Selecting groups can have the effect of selecting the group row, or selecting all the children in the group. This is done by setting the attribute:
groupSelectsChildren: {true || false}
When set to false, then selecting the group will select the group node.
When set to true, then selecting the group will either select or deselect all of the children.
The example below shows checkbox selection with groups. Selecting the group has the effect of selecting the children. Likewise selecting all the children automatically selects the group. In this scenario the group itself will never appear in the selectedRows list.
The example also shows a checkbox for selection on the age column. In practice, it is not normal to have more than two columns for selection, the below is just for demonstration. Having a checkbox within a non-group row is best for grids that are not using grouping.
In Addition: you could add this on the col definition
checkboxSelection:
Set to true to render a selection checkbox in the column.
What say einav is true however i think he forgot the very base :
set the property rowSelection:'single' or rowSelection:'multiple' on gridOptions if you want to have selection enabled :)
The attribute checkboxSelection is only for columns not grid options.
The following properties are relevant to selection:
rowSelection: Type of row selection, set to either 'single' or 'multiple' to enable selection.
rowDeselection: Set to true or false. If true, then rows will be deselected if you hold down ctrl + click the row. Normal behaviour with the grid disallows deselection of nodes (ie once a node is selected, it remains selected until another row is selected in it's place).
suppressRowClickSelection: If true, rows won't be selected when clicked. Use, for example, when you want checkbox selection, and don't want to also select when the row is clicked.
From the same link given by Einav