How can i get the list of all cell instances in a specific row in Ag-Grid?
This is the gridOption object:
export const gridOptions = props => ({
columnDefs: columnDefs(props),
deltaRowDataMode: true,
getRowNodeId: data => data.id,
reactNext: true,
loadingOverlayComponentFramework: Loader,
onCellMouseOver: api => {
// RowNode
const row = api.node;
},
});
In the onCellMouseOver method i have the RowNode class of the current hovered row. I tried to find some method in there as getCells but could not find anything...
Is there any other way?
Related
I am using quickpick to display list of items and allowing user to do multiselect. I am using quickpick like this.
context.subscriptions.push(vscode.commands.registerCommand('command', async () => {
const list = await vscode.window.showQuickPick(filedsList, { ignoreFocusOut: true, canPickMany: true});
}));
I trying to make like if user previously selected some items in the quick pick and next time use opened this quick pick I want to preselect the previously selected values.
Is it feasible to do it in vscode extension development.
There are two options. In both cases you'll have to make QuickPickItems out of your AccurevOperations.cpkFieldsList as you cannot just pass strings as the first argument and use the pre-selection capability. It isn't difficult to do this, just loop through that AccurevOperations.cpkFieldsList array and create objects with the QuickPickItem properties you want, like:
const arr = ["1", "2", "3"];
// const quickPickItems = arr.map(item => ( { label: item, picked: true } ) ); // but this would select them all
const quickPickItems = arr.map(item => {
if (Number(item) % 2 != 0) return { label: item, picked: true };
else return { label: item }
});
So you would use your logic to set the items you want pre-selected to have the picked:true object property. Then
const options = { canPickMany: true };
const qp = vscode.window.showQuickPick(quickPickItems, options);
should show a QuickPick with your selected items.
The other option is to use the createQuickPick method instead, because with that you can use its selectedItems property. So starting with your array:
const arr = ["1", "2", "3"];
const quickPickItems = arr.map(item => ( { label: item } ) ); // and whatever other properties each item needs, perhaps nothing other than label
const qp = vscode.window.createQuickPick();
qp.canSelectMany = true;
qp.items = quickPickItems;
qp.selectedItems = [quickPickItems[0], quickPickItems[2]]; // your logic here
qp.show();
You will have to create an array of objects to assign to the selectedItems property. Perhaps by filtering the quickPickItems array (from above) for the labels you want pre-selected:
qp.selectedItems = quickPickItems.filter(item => {
return item.label === "1" || item.label === "3";
});
the object vscode::QuickPickItem has a property
picked
Optional flag indicating if this item is picked initially.
I have a custom column in Ag Grid which has an image and text in it.
When I export the whole table to excel I get [object] as value for the custom column.
Is there a way to export only the text from the custom column?
Project is in Angular typescript
Good day, please have a look at the docs of customising-cell-and-row-group-values
Description:
You can create custom options and describe what exact field should be passed in export with concrete value:
First look for how can create custom options
Looking for exportDataAsExcel method and ExcelExportParams
Example:
const getContextMenuItems = ({ api, ...restProps }) => {
return [
// other options
{
name: 'Export',
tooltip: 'Export',
subMenu: [
{
name: 'Excel Export',
action: () => api.exportDataAsExcel({
// other params like columnKeys e.t.c
processCellCallback: ({ column, value }) => {
// Rules for your custom cellRenderer here:
if (column.colId === 'yourCustomFieldId') {
return value.customText;
}
return value;
},
}),
},
],
},
];
};
I have an angular application and when I load my page the columns are not yet defined.
The columns are defined when I retrieve the data (which are already sorted).
So if I apply a state on my sorted column (after the data are initialized), the data are refreshed again and I want to avoid this.
Is there a solution to show the sort icon without AG-Grid refresh the data ?
To be more explicit, here is my angular code :
getRows(params: any): void {
//retrieve my data
this.myservice.getAll(params.currentPage, params.pageSize, params.sort).subscribe((data) => {
//send my datas to AG-Grid
params.successCallBack(data.results, data.totalItems);
if (params.currentPage == 0 && this.firstLoad) {
//my datas contain the columns definition
this.initGrid(data.viewParams);
}
});
}
initGrid(viewParams: ViewParamsModel): void {
this.firstLoad = false;
this.dataGrid.setColumnDefs(viewParams.columns);
//I try with this but it reloads my data
this.gridColumnApi.applyColumnState({
state: [
{
colId: 'name',
sort: 'asc',
}],
});
}
When doing this.dataGrid.setColumnDefs(viewParams.columns)
add sort: 'desc'/'asc'
columnDefs: [
{
field: 'Column1',
sort: 'desc', // <====== add this
},
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)
}
As the title, I want to make a row selectable by some conditions with using ag-grid in angularjs.
In the past, I used ui-grid and its property "isRowSelectable" to make it.
$scope.options = {
...
isRowSelectable:function(row){
return row.entity.taskExecutionStatus===0?true:false;
}
}
However, the ag-grid doesn't have the property "isRowSelectable" like ui-grid.
How can I fix it now?
Check if the row is selectable or not in gridOptions.onSelectionChanged() function.
If false, then use node.setSelected(false, false, true) to deselect the row;
A valid solution is to use checkbox selection when you don't want all the rows to be selectable, something like this:
$scope.options = {
columnDefs: [
{headerName: "",
width: 17,
cellStyle: {'padding': '2px'},
checkboxSelection: function(row){
return row.entity.taskExecutionStatus===0?true:false;
}
},
...
],
...
rowSelection: 'single', // or 'multiple'
suppressRowClickSelection: true,
...
};
To select Single row in ag-grid:
$scope.Gridoptions:{
columnDefs:...,
rowData:...,
onRowClicked: RowClick,
rowSelection: 'single',
};
function RowClick(param) {
//To Find CurrentRow Index
var currentRowIndex = param.rowIndex;
//GridData
var gridData = $scope.gridOptionsInstrumentRegister.rowData;
//Item ShowS RoWData
var Item = params.data;
}
checkboxSelection: function (params) {
params.node.selectable = false; // this will explicitly restrict to select (useful in select all)
return true/false; // this will show or hide the checkbox
}