When exporting a grid with groups which have group count with it. The exported excel doesn't contain the group count. Is there a way to export with the group count?
You can easily do that by modifying the group header content in processRowGroupCallback. Here is all of the export options for reference.
gridApi.exportDataAsExcel({
processRowGroupCallback: (params) => {
const { node } = params;
return `${node.key} (${node.allChildrenCount})`;
}
});
Live Example
Related
I'm novice in ag-grid react. Currently I want to export the grid data as excel with multiple sheets. The requirement is, export only selected columns(User will be prompted to choose columns to be present in the excel on click of Export button). I know, we should be using columnKeys attribute. But something, I'm missing here. After clicking columns , I'm getting this error when I click export option
AG Grid: Invalid params supplied to getMultipleSheetsAsExcel() - ExcelExportParams.data is empty.
getRefsFromParent(childRefs) {
this.setState({
myRequestedRefs: childRefs
});
/* Export multiple sheets commence here */
var spreadsheets = []; // var for storing multiple sheets data
for (let i = 0; i < this.state.checkedSheets.length; i++) {
if (this.state.checkedSheets[i] == 'Engagements') {
spreadsheets.push(
//Referring Engagement Reference passed from Parent Component
this.state.engRef.current.api.getSheetDataForExcel({
sheetName: 'Engagements'
})
)
}
else {
spreadsheets.push(
//Sheets will be created based on the selected items from the sheetsList
this.state.ref.current.api.getSheetDataForExcel({
onlySelected: false,
sheetName: this.state.checkedSheets[i]
})
)
}
console.log("Spreadsheets ", spreadsheets);
}
this.state.ref.current.api.exportMultipleSheetsAsExcel({
data: spreadsheets,
columnKeys: this.state.pickedColumns, //columns selected in the modal by user
fileName: 'client-details.xlsx',
});
}
I am using Vue Select to generate a list, where users can add tags, which are saved to a database, but I would like to have some pre-defined values in the list that the user can pick as tags when clicking on them. I tried adding these to the options array, but the problem is that I already populate options with the tags stored in my database, and these overwrite everything in my pre-defined list.
What can I do to solve this issue. Is it an easy fix on the frontend or do I need to add the pre-defined values in my database?
<template>
<v-select
:value="value"
#input="$emit('input', $event)"
:options="options"
maxlength="250"
taggable
multiple
select-on-blur
v-bind="$attrs"
/>
</template>
<script>
import {propertyService} from '#/services/property';
export default {
props: {
value: Array
},
data() {
return {
options: ['Tag1', 'Tag2',], /* VALUES FROM DATABASE GO IN HERE */
};
},
/* HERE DATA FROM MY DATABASE IS IMPORTED */
created() {
propertyService.getPropertyTags().then(result => this.options = result.data);
console.log(this.options)
}
};
</script>
Just use the spread operator to concatenate the predefined items with stored ones from the DB :
created() {
propertyService.getPropertyTags().then(result => this.options = [...this.options, ...result.data]);
console.log(this.options)
}
U can combinated thase array:
computed: {
options() {
return ['tag1', 'tag2', ...this.dbOptions]
}
},
data() {
return {
dbOptions: [], /* VALUES FROM DATABASE GO IN HERE */
}
}
created() {
propertyService.getPropertyTags().then(result => this.dbOptions = result.data);
console.log(this.options)
}
I have setup a filter using the code queen video-works great except one part-
I got two dropdowns,
Category and subcategory,I am trying to setup simple conditional filtering
When I click category, on change event happens -> subcategory gets activated(this is working)
Subcategory should conditionally filter and show only relevant/matching results,however shows all the results from the field.
For eg. Category dropdown we choose - industrial houses -> Subcategory becomes active and shows only the results that match for the industrial category
Currently shows every element from the field,can anyone help me?
Here is the code.Thank you
$w.onReady(function () { //code that clears the search
$w('#clear').onClick(() => {
$w('#dropdown1 , #dropdown2 , #dropdown3, #dropdown4, #dropdown5 , #dropdown6').value = "";
$w('#dataset1').setFilter(wixData.filter())
.then();
});
});
export function button1_click(event, $w) { //filter on click even
let searchValue = $w("#locationSearch").value;
$w("#dataset1").setFilter(wixData.filter()
.contains("bathrooms",$w('#dropdown1').value)
.contains("bedrooms", $w('#dropdown2').value)
.contains("typesOfProperties", $w('#dropdown5').value) //CATEGORY DROPDOWN
.eq("subcategory", $w("#dropdown6").value) //SUBCATEGORY DROPDOWN
.contains('propertyAddress', searchValue)
.contains('averagePrice', $w('#dropdown7').value))
.then((results) => {
console.log("Dataset is now Filtered");
$w("#repeater1").data = results.items;
})
.catch((err) => {
console.log(err);
});
$w("#repeater1").expand();}
//FILTER FROM THE CODE QUEEN VIDEO THAT SHOULD SHOW ONLY MATCHING RESULTS
export function dropdown5_change(event, $w) {
SubCatFilter(); }
function SubCatFilter (){
$w("#dropdown6").enable(); //SUBCATEGORY DROPDOWN
$w("#dataset1").setFilter(wixData.filter() //BOTH FIELDS IN THE SAME DATASET
.eq("subcategory", $w("#dropdown5").value) //SUBCATEGORY KEY FIELD
)
}
In my app I have a mutation where I want to use the optimisticUpdater to update the view before the server response. For that I need to remove some records from a list into the relay store, like that:
optimisticUpdater: storeProxy => {
storeProxy.delete(recordDataID)
}
The problem is that relay don't remove the record, but it transforms the record in null.
This can be annoying because I have to filter the list every time I use it in my app.
Some one know how can I remove the record ?
thx
You have to remove your records from the list
optimisticUpdater: (store) => {
const listOfRecords = store.getRoot().getLinkedRecords('list')
const newList = listOfRecords.filter(record => record.getDataID() !== recordDataID)
store.getRoot().setLinkedRecords(newList, 'list')
}
In this example I assume your list is placed at the root of your graph
If you decorate your query with #connection, then you can use the ConnectionHandler to easily remove records:
const query = graphql`query WidgetListQuery {
widgets(first: 10) #connection(key: "WidgetList_widgets") {
...
}
}`
optimisticUpdater(store) {
const widgets = ConnectionHandler.getConnection(store.getRoot(), 'WidgetList_widgets');
ConnectionHandler.deleteNode(widgets, deleted_widget.id)
}
I am using protractor for e2e testing.
There is a ag-grid table where multiple columns are sorted in ascending order.
How do i go about verifying this?
Picture of Sample table
In AgGrid the rows might not always be displayed in the same order as you insert them from your data-model. But they always get assigned the attribute "row-index" correctly, so you can query for it to identify which rows are displayed at which index.
So in your E2E-tests, you should create two so-called "page objects" (a selector fo something in your view, separated from the text-execution code, google for page object pattern) like this:
// list page object
export class AgGridList {
constructor(private el: ElementFinder) {}
async getAllDisplayedRows(): Promise<AgGridRow[]> {
const rows = $('div.ag-body-container').$$('div.ag-row');
await browser.wait(EC.presenceOf(rows.get(0)), 5000);
const result = await rows.reduce((acc: AgGridRow[], elem) => [...acc, new AgGridArtikelRow(elem)], []);
return await this.sortedRows(result);
}
private async sortedRows(rows: AgGridRow[]): Promise<AgGridRow[]> {
const rowsWithRowsId = [];
for (const row of rows) {
const rowIndex = await row.getRowIndex();
rowsWithRowsId.push({rowIndex, row});
}
rowsWithRowsId.sort((e1, e2) => e1.rowIndex - e2.rowIndex);
return rowsWithRowsId.map(elem => elem.row);
}
}
// row page object
export class AgGridRow {
constructor(private el: ElementFinder) {}
async getRowIndex(): Promise<number> {
const rowIndexAsString: string = await this.el.getAttribute('row-index');
return parseInt(rowIndexAsString, 10);
}
}
And in your test:
it('should display rows in right order', async () => {
const rows = await gridList.getCurrentDisplayedRows(); // gridList is your AgGridList page object, initialised in beforeEach()
// now you can compare the displayed order to the order inside your data model
});
What this code does: you make page objects for accessing the table as a whole and for accessing elements within a row. To accessing the list in the same order as it is displayed in the view, you have to get all displayed rows (with lazy loading or pagination it should be below 100, otherwise your implementation is bad), get the rowIndex from each of them, sort by it and only then return the grid-list to the test-execution (.spec) file.