Hide count of records in Ag-Grid in Pivot Mode

  • Thread starter Adarsh Madrecha
  • Start date
A

Adarsh Madrecha

Guest
I am using ag-grid enterprise v21.2.x in my VueJs Project. I have a pivot table as shown in the picture below. I want to hide the count of records in the pivot table.

I tried a solution mentioned in https://stackoverflow.com/a/48912864/4050261 for version 16; but it did not work.

pivoot table

Template

<template>
<v-app>
<v-container fluid class="grey lighten-3">
<ag-grid-vue
style="width: 100%; height: 600px"
class="ag-theme-balham mt-3"
id="myGrid"
:gridOptions="gridOptions"
@grid-ready="onGridReady"
:defaultColDef="defaultColDef"
:columnDefs="columnDefs"
:pivotMode="true"
:rowGroupPanelShow="rowGroupPanelShow"
:pivotPanelShow="pivotPanelShow"
:pivotColumnGroupTotals="pivotColumnGroupTotals"
:pivotRowTotals="pivotRowTotals"
:autoGroupColumnDef="autoGroupColumnDef"
:sideBar="true"
:rowData="rowData"
></ag-grid-vue>
</v-container>
</v-app>
</template>


Script

<script>
import { AgGridVue } from "ag-grid-vue";
import "ag-grid-enterprise";
import { LicenseManager } from "ag-grid-enterprise";
LicenseManager.setLicenseKey(process.env.VUE_APP_AG_KEY);
import axios from "axios";

export default {
components: {
"ag-grid-vue": AgGridVue
},
data() {
return {
// Functional
workDoneObj: [],
workDtFrom: this.dayjs()
.startOf("month")
.format("YYYY-MM-DD"),
workDtTo: this.dayjs().format("YYYY-MM-DD"),
// UI
menuWorkDtTo: false,
menuWorkDtFrom: false,
errMsg: "",
rfItems: [
{ text: "Auto", value: null },
{ text: "My", value: 0 },
{ text: "My Team", value: 2 },
{ text: "All", value: 1 }
],
rf: 0,
// Ag Grid
gridOptions: null,
gridApi: null,
columnApi: null,
defaultColDef: null,
columnDefs: null,
rowGroupPanelShow: null,
pivotPanelShow: null,
pivotColumnGroupTotals: null,
pivotRowTotals: null,
autoGroupColumnDef: null,
rowData: null
};
},
computed: {
workDtFromFormatted() {
return this.dayjs(this.workDtFrom).format("DD MMM YYYY");
},
workDtToFormatted() {
return this.dayjs(this.workDtTo).format("DD MMM YYYY");
}
},
methods: {
async onGridReady() {
const { data: resp } = await axios.post("/task/workdoneag", {
dtfrom: this.workDtFrom,
dtto: this.workDtTo,
rf: this.rf
});
if (resp.success == true) {
this.rowData = resp.data;
}
},
numberFormatter({ value }) {
return ~~value;
}
},
beforeMount() {
this.gridOptions = {};
this.defaultColDef = {
resizable: true,
filter: true,
width: 100
};
this.columnDefs = [
{
headerName: "Task Name",
field: "taskname",
enablePivot: true,
enableRowGroup: true
},
{
headerName: "Task Status",
field: "taskstatus",
enablePivot: true,
enableRowGroup: true
},
{
headerName: "Task Completion",
field: "tskcompletion",
enablePivot: true,
enableRowGroup: true
},
{
headerName: "Work Category",
field: "w_category",
enablePivot: true,
enableRowGroup: true
},
{
headerName: "Work Description",
field: "workdescp",
enableRowGroup: true
},
{
headerName: "Work Date",
field: "workdate",
enablePivot: true,
enableRowGroup: true,
type: "dateColumn"
},
{
headerName: "User Name",
field: "username",
rowGroup: true,
enablePivot: true,
enableRowGroup: true
},
{
headerName: "Service Name",
field: "tasklistname",
enablePivot: true,
enableRowGroup: true
},
{
headerName: "Service Type",
field: "servicetype",
enablePivot: true,
enableRowGroup: true
},
{
headerName: "Year",
field: "compyear",
enablePivot: true,
enableRowGroup: true
},
{
headerName: "Period",
field: "compperiod",
enablePivot: true,
enableRowGroup: true
},
{
headerName: "Client No",
field: "clientno",
enablePivot: true,
enableRowGroup: true
},
{
headerName: "Client Name",
field: "clientname",
rowGroup: true,
enablePivot: true,
enableRowGroup: true
},
{
headerName: "Task Category",
field: "t_category",
enablePivot: true,
enableRowGroup: true
},
{
headerName: "Task ProfitCenter",
field: "t_pcenter",
enablePivot: true,
enableRowGroup: true
},
{
headerName: "Task CostCenter",
field: "t_ccenter",
enablePivot: true,
enableRowGroup: true
},
{
headerName: "Client Category",
field: "c_category",
enablePivot: true,
enableRowGroup: true
},
{
headerName: "Client ProfitCenter",
field: "c_pcenter",
enablePivot: true,
enableRowGroup: true
},
{
headerName: "Client CostCenter",
field: "c_ccenter",
enablePivot: true,
enableRowGroup: true
},
{
headerName: "Group Category",
field: "g_category",
enablePivot: true,
enableRowGroup: true
},
{
headerName: "Group ProfitCenter",
field: "g_pcenter",
enablePivot: true,
enableRowGroup: true
},
{
headerName: "Group CostCenter",
field: "g_ccenter",
enablePivot: true,
enableRowGroup: true
},

// sum one
{
headerName: "Spent Hours",
field: "spenthours",
aggFunc: "sum",
type: "numericColumn",
valueFormatter: this.numberFormatter
}
];
this.rowGroupPanelShow = "always";
this.pivotPanelShow = "always";
this.pivotColumnGroupTotals = "after";
this.pivotRowTotals = "before";
this.autoGroupColumnDef = { width: 300 };
},
mounted() {
this.gridApi = this.gridOptions.api;
this.gridColumnApi = this.gridOptions.columnApi;
}
};
</script>


CSS

<style lang="sass">
@import "../../node_modules/ag-grid-community/dist/styles/ag-grid.css"
@import "../../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css"
</style>

Continue reading...
 
Top