I'm using #material-table/core version 0.2.32. Here is my option prop of the MaterialTable.
options={{
toolbarButtonAlignment: "left",
showTextRowsSelected: true,
search: false,
paging: false,
showTitle: false,
toolbar: true,
selection: true,
exportAllData: false,
exportMenu: [
{
label: t("Alarms.Export.CSV"),
exportFunc: (cols, renderedData, tableData) =>
ExportCsv(cols, tableData.filteredData, t("Alarms")),
},
{
label: t("Alarms.Export.PDF"),
exportFunc: (cols, renderedData, tableData) =>
ExportPdf(cols, tableData.filteredData, t("Alarms")),
},
],
}}
The select rows banner overlaps/hides the export icon in the toolbar. Same behavior with custom ToolBar component too. I can't find the class of the selected rows banner to apply custom styling too. Any workaround would be of great help.
Related
I am having an issue with dragging columns within my control panel, into the row groups pannel also in the control panel. Below are my gird options and default column behavior.
gridOptions={
floatingFilter: false,
animateRows:true,
columnDefs:this.columnDefs,
groupMultiAutoColumn:true,
groupHideOpenParents:true,
suppressMakeColumnVisibleAfterUnGroup:true,
suppressAggFuncInHeader:true,
suppressMenuHide:true,
suppressColumnVirtualisation:true,
autoGroupColumnDef:{
resizable: true,
filterValueGetter: function(params) {
var colGettingGrouped = params.colDef.showRowGroup;
var valueForOtherCol = params.api.getValue(
colGettingGrouped,
params.node
);
return valueForOtherCol;
},
}
};
this.defaultColDef = {flex: 1,
minWidth: 125,
maxWidth:500,
sortable: true,
filter: true,
enableRowGroup: true,
enablePivot: true,
enableValue:true,
cellFilter: 'number: 2',
resizable:true,
menuTabs: ['filterMenuTab', 'generalMenuTab', 'columnsMenuTab'],
sortingOrder: ['asc','desc', 'null'] ,
allowedAggFuncs: ['sum', 'avg', 'count'],
}; this.aggFuncs = {
sum: this.sumFunction,
avg: this.avgAggFunction,
}; this.sideBar = {
toolPanels: [
{
id: 'columns',
labelDefault: 'Columns',
labelKey: 'columns',
iconKey: 'columns',
toolPanel: 'agColumnsToolPanel',
toolPanelParams: { suppressSyncLayoutWithGrid: true },
},
],
defaultToolPanel: 'columns',
};
Currently, when I grab a column I get waring stopping Icon. Any help is appreciated!
Due to me setting the ZOOM property in css to 90%, the grid did not orientate properly and the columns I would drag in would not trigger the row grouping.
I would like start grid with collapsed panel. Equal image in attachment
Provide the configuration in aggrid.
***sideBar = false***
To use the default sidebar, set the grid property sideBar=true. The Columns panel will be open by default
<AgGridReact
defaultColDef={this.state.defaultColDef}
animateRows={true}
sideBar={false}
/>
You hide it by setting defaultToolPanel to null or empty string
public sideBar = {
toolPanels: [
{
id: 'columns',
labelDefault: 'Columns',
labelKey: 'columns',
iconKey: 'columns',
toolPanel: 'agColumnsToolPanel',
toolPanelParams: {
suppressRowGroups: true,
suppressValues: true,
suppressPivots: true,
suppressPivotMode: true,
suppressSideButtons: true,
suppressColumnFilter: true,
suppressColumnSelectAll: true,
suppressColumnExpandAll: true
}
}
],
defaultToolPanel: ''
};
I have the following plunkr: https://plnkr.co/edit/xtPbAztpG14bleAF9bgy?p=preview
var gridOptions = {
defaultColDef: {
// allow every column to be aggregated
enableValue: false,
// allow every column to be grouped
enableRowGroup: true,
// allow every column to be pivoted
enablePivot: false
},
sideBar: 'columns',
which let's me have a columns sidebar with options to edit pivot, grouping and values. However I'd like to only allow grouping for now and ideally show it above the table and not on the side. How would I go about doing that with the new Toolbar in AG grid?
Docs here: https://www.ag-grid.com/javascript-grid-tool-panel/
Ideally it should be like the Drag here to set row groups drop zone in this example: https://www.ag-grid.com/example.php#/
Found it well "hidden away" in the docs
var gridOptions = {
columnDefs: columnDefs,
rowData: null,
pivotMode: true,
enableSorting: true,
sideBar: 'columns',
// THIS IS THE ONE!!!
rowGroupPanelShow: 'always',
pivotPanelShow: 'always',
functionsReadOnly: true
};
Use the suppress options to fine-tune and control the display of the columns sidepanel
Example of custom sidepanel: https://www.ag-grid.com/javascript-grid-tool-panel-columns/#suppress-sections
To customise further, see https://www.ag-grid.com/javascript-grid-tool-panel-columns/#column-tool-panel-example
Example with code and plunkr: https://plnkr.co/edit/TaX0CWTKX4WKPHEijzLS?p=preview
We have customize these options using toolPanelParams Object properties in the following way
var gridOptions = {
sideBar: {
toolPanels: [
{
id: 'columns',
labelDefault: 'Columns',
labelKey: 'columns',
iconKey: 'columns',
toolPanel: 'agColumnsToolPanel',
toolPanelParams: {
suppressValues: true, // disable Value
suppressPivots: true, // disable Pivots
suppressPivotMode: true, // disable PivotMode
suppressRowGroups: false // enable RowGroups
}
},
],
defaultToolPanel: ''
}
};
These are the options given by grid, I want to hide the aggregation part as I don't have any columns to be aggregated.
set gridOptions.toolPanelSuppressValues: true
You can read more about suppressing other portions of the toolpanel here (look for Suppress Example)
In ag grid 23 you have to do it inside sideBar options of GridOptions property.
toolPanels: [
{
id: 'id',
labelDefault: 'labelDefault',
labelKey: 'labelKey',
iconKey: 'iconKey',
toolPanel: 'agColumnsToolPanel',
toolPanelParams: {
suppressPivotMode: true, - here
suppressValues: true,
},
},
],
I'm trying to add a combobox to a floating (popup) form panel in ExtJS. But I'm getting a "Cannot set property 'component' of null" error and the window will not load.
I use the following code in a controller to create the window:
onTreeAddDocClick: function () {
var f = new Ext.form.Panel({
frame: false,
header: false,
floating: true,
closable: true,
items: [{
xtype: 'addDoc'
}]
});
f.show();
}
The code for the window itself is as follows:
Ext.define('OPENhrm.view.dossier.widget.popup.AddDoc', {
extend: 'Ext.form.Panel',
xtype: 'addDoc',
requires: [
'Ext.layout.container.VBox'
],
controller: "dossier-addDoc",
viewModel: {
type: "dossier-addDoc"
},
id: 'addDocForm',
frame: true,
title: 'Add document',
width: 400,
bodyPadding: '10 10 0',
layout: 'form',
closable: true,
defaults: {
anchor: '100%',
allowBlank: false,
msgTarget: 'side',
labelWidth: 50
},
items: [{
// item selector
xtype: 'filefield',
emptyText: 'Select Document',
fieldLabel: 'Document',
name: 'filePath',
id: 'filePath',
buttonText: 'upload document',
buttonConfig: {
icon : '/resources/images/icons/add.jpg'
}
}, {
xtype: 'combo',
fieldLabel: 'Test',
hiddenName: 'test',
store: new Ext.data.SimpleStore({
data: [
['Test1'],
['Test2']
],
id: 0,
fields: ['text']
}),
valueField: 'text',
displayField: 'text',
triggerAction: 'all',
editable: false
}],
// buttons
buttons: [{
text: 'Add',
handler: 'onAddDockClick'
}, {
text: 'Reset',
handler: function () {
this.up('form').getForm().reset();
}
}]
});
If I remove the combobox, the window works just fine. If I place the combobox in a form somewhere else in my application (e.g. on a page with 2 panels; a searchfilter/form and a grid with search results), it works just fine. That other page however, is not a floating/popup window.
I got it to work by defining the whole page in the controller, but as I'm using a MVC structure, that doesn't seem like the way to go. Does anyone know how to get the combobox to work in a floating window, without putting the whole code for that window in the controller?