I struggled with pinning a group column left and I wanted to share my solution with the world. Refer to the autoGroupColumnDef section. Hope this helps!
var columnDefs = [
{ headerName: "Console", field: "console", width: 140, rowGroup: true},
{ headerName: "Alarm Type", field: "AlarmType", width: 20, pivot: true },
{ headerName: "Total", field: "Total", width: 55, aggFunc: 'sum'},
{ headerName: "%", field: "Percentage", width: 50, aggFunc: 'sum', cellRenderer: roundNumber },
{ headerName: "IP", field: "InProgress", width: 45, aggFunc: 'sum', cellRenderer: roundNumber }
];
var gridOptions = {
groupMultiAutoColumn: true,
groupDefaultExpanded: -1,
suppressAggFuncInHeader: true,
groupSuppressBlankHeader: true,
pivotMode: true,
columnDefs: columnDefs,
enableRangeSelection: true,
toolPanelSuppressRowGroups: true,
toolPanelSuppressPivotMode: true,
toolPanelSuppressPivots: true,
toolPanelSuppressValues: true,
autoGroupColumnDef: {
headerName: 'Consoles',//custom header name for group
pinned: 'left',//force pinned left. Does not work in columnDef
cellRendererParams: {
suppressCount: true,//remove number in Group Column
}
}
};
To achieve expected use below option of removing pivotMode: true which is causing issue while pinning column to left
working soluion for reference
var columnDefs = [
{ headerName: "Console", field: "console", width: 140, rowGroup: true},
{ headerName: "Alarm Type", field: "AlarmType", width: 55, pivot: true },
{ headerName: "Total", field: "Total", width: 55, aggFunc: 'sum'},
{ headerName: "%", field: "Percentage", width: 50, aggFunc: 'sum'},
{ headerName: "IP", field: "InProgress", width: 45, aggFunc: 'sum'}
];
var gridOptions = {
groupMultiAutoColumn: true,
groupDefaultExpanded: -1,
suppressAggFuncInHeader: true,
groupSuppressBlankHeader: true,
columnDefs: columnDefs,
enableRangeSelection: true,
toolPanelSuppressRowGroups: true,
toolPanelSuppressPivotMode: true,
toolPanelSuppressValues: true,
autoGroupColumnDef: {
headerName: 'Consoles',//custom header name for group
pinned: 'left',//force pinned left. Does not work in columnDef
cellRendererParams: {
suppressCount: true,//remove number in Group Column
}
}
};
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
var data = [
{'console': 1, 'AlarmType': 'A', 'Total': 200, 'Percentage': 20, 'InProgress': 123456},
{'console': 1, 'AlarmType': 'A', 'Total': 200, 'Percentage': 20, 'InProgress': 123456}
];
gridOptions.api.setRowData(data);
});
<!DOCTYPE html>
<html lang="en">
<head>
<script> var __basePath = ''; </script>
<style media="only screen">
html, body {
height: 50%;
width: 60%;
margin: 0;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
html {
position: absolute;
top: 0;
left: 0;
padding: 0;
overflow: auto;
}
body {
padding: 1rem;
overflow: auto;
}
</style>
<script src='https://unpkg.com/#ag-grid-community/all-modules#22.1.1/dist/ag-grid-community.min.js'></script></head>
<body>
<div id="myGrid" style="height: 100%;" class="ag-theme-balham"></div>
<script src="main.js"></script>
</body>
</html>
Plunker for reference - https://plnkr.co/edit/eWc4HsKzLO80vTKtSxQp?p=preview
Related
Is it possible to align row group to align right?
I tried headerClass: 'ag-right-aligned-header' but it doesn't seem to work.
{headerName: 'Name', headerClass: 'ag-right-aligned-header', field: 'name', rowGroup: true, enableRowGroup: true }
Just reverse the flex-direction on the element. You could even add a position indicator for this if required, or add a headerClass in this specific column header.
.ag-header-row-column-group .ag-header-group-cell-with-group:last-child .ag-header-group-cell-label {
flex-direction: row-reverse;
}
OR
/* add headerClass: 'simple-right-aligned' to columnDef */
.simple-right-aligned .ag-header-group-cell-label {
flex-direction: row-reverse;
}
Note: This also changes the < open / closed item position, which is probably an unwanted but not significant side effect, as really the reading order is essentially reversed and would behave as expected.
const columnDefs = [{
headerName: 'Athlete Details',
children: [{
field: 'athlete',
width: 180,
filter: 'agTextColumnFilter',
},
{
field: 'age',
width: 90,
filter: 'agNumberColumnFilter',
},
{
headerName: 'Country',
field: 'country',
width: 140
},
],
}, {
headerName: 'Athlete Details Duplicated',
children: [{
field: 'athlete',
width: 180,
filter: 'agTextColumnFilter',
},
{
field: 'age',
width: 90,
filter: 'agNumberColumnFilter',
},
{
headerName: 'Country',
field: 'country',
width: 140
},
],
},
{
headerName: 'Sports Results',
headerClass: 'simple-right-aligned',
children: [{
field: 'sport',
width: 140
},
{
columnGroupShow: 'closed',
field: 'total',
width: 100,
filter: 'agNumberColumnFilter',
},
{
columnGroupShow: 'open',
field: 'gold',
width: 100,
filter: 'agNumberColumnFilter',
},
{
columnGroupShow: 'open',
field: 'silver',
width: 100,
filter: 'agNumberColumnFilter',
},
{
columnGroupShow: 'open',
field: 'bronze',
width: 100,
filter: 'agNumberColumnFilter',
},
],
},
];
const gridOptions = {
defaultColDef: {
sortable: true,
resizable: true,
filter: true,
},
// debug: true,
columnDefs: columnDefs,
rowData: null,
};
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
const gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
.then((response) => response.json())
.then((data) => gridOptions.api.setRowData(data));
});
html,
body {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
html {
position: absolute;
top: 0;
left: 0;
padding: 0;
overflow: auto;
}
body {
padding: 1rem;
overflow: auto;
}
/*
.ag-header-row-column-group .ag-header-group-cell-with-group:last-child .ag-header-group-cell-label,
*/
.simple-right-aligned .ag-header-group-cell-label {
flex-direction: row-reverse;
}
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"></script>
<div id="myGrid" style="height: 100%" class="ag-theme-alpine">
</div>
I'm building an app using React and MaterialUI. In the DataGrid is there a way to show or "hide" a specific column ? My last column is called action and I have the delete in there and would like to show it to ppl who are loggged in.
Here's my test component.
I've put the part of the code that I thought would do it but unfortunately it's not the case
import { useContext } from 'react';
import { Box} from '#mui/material';
import { DataGrid, GridActionsCellItem } from '#mui/x-data-grid';
import { BacsRoulantsContext } from '../contexts/BacsRoulantsContext';
import { Delete as DeleteIcon } from '#mui/icons-material';
const trashRows = [
{
id: 1,
serialNumber: '123456',
rfidChip: '123455',
bacType: 'DECHETS-360',
deliveryDate: '2002-03-03',
},
{
id: 2,
serialNumber: '7890112',
rfidChip: '123455',
bacType: 'DECHETS-360',
deliveryDate: '2002-10-03',
},
];
export default function Configuration() {
const { isAuthenticated } = useContext(BacsRoulantsContext);
const BINSCOLUMNS = [
{
field: 'id',
headerName: 'ID',
width: 50,
},
{
field: 'serialNumber',
headerName: 'Numéro de série',
width: 150,
editable: true,
},
{
field: 'rfidCode',
headerName: 'Puce RFID',
width: 150,
},
{
field: 'description',
headerName: 'Type de bacs',
width: 150,
},
{
field: 'deliveryDate',
type: 'date',
headerName: 'Date de livraison',
width: 160,
},
{
field: 'actions',
type: 'actions',
headerName: 'Actions',
width: 100,
cellClassName: 'actions',
getActions: ({ id }) => {
**return [
{ isAuthenticated } && (
<GridActionsCellItem
icon={<DeleteIcon />}
label="Cancel"
onClick={() => console.log('MyID', id)}
/>
),
];**
},
},
];
return (
<Box sx={{ width: '100%' }}>
<DataGrid
autoHeight
columns={BINSCOLUMNS}
disableColumnMenu
hideFooter
disableSelectionOnClick
getRowId={(row) => row.id}
rows={trashRows}
/>
</Box>
);
}
For anyone who is wondering how to do it, I found a simple solution. I added the hide: !isAuthenticated on the column definition and that fixed my problem. Here the new column definition with the hide
const BINSCOLUMNS = [
{
field: 'id',
flex: 1,
headerName: 'ID',
sortable: false,
},
{
field: 'serialNumber',
flex: 1,
headerName: 'Numéro de série',
sortable: false,
},
{
field: 'rfidCode',
flex: 1,
headerName: 'Puce RFID',
sortable: false,
},
{
field: 'description',
flex: 1,
headerName: 'Type de bacs',
sortable: false,
},
{
field: 'deliveryDate',
flex: 1,
headerName: 'Date de livraison',
sortable: false,
type: 'date',
},
{
field: 'actions',
type: 'actions',
headerName: 'Actions',
hide: !isAuthenticated,
width: 100,
cellClassName: 'actions',
getActions: ({ id }) => {
return [
<GridActionsCellItem
icon={<DeleteIcon />}
label="Cancel"
onClick={() => console.log('MyID', id)}
/>,
];
},
},
];
Don't know if that's how I'm suppose to do it but works for me!
I'm using ag-grid with group columns. I have problem to manually move group columns when there is a hidden column in one of the groups.
These are the columns definition, the "Athlete" column is hidden:
this.columnDefs = [
{
headerName: "Athlete Details",
pinned: null,
lockPinned: true,
marryChildren: true,
children: [
{
headerName: "Athlete",
field: "athlete",
width: 150,
hide: true,
pinned: null,
lockPinned: true
},
{
headerName: "Age",
field: "age",
width: 90,
pinned: null,
lockPinned: true
},
{
headerName: "Country",
field: "country",
width: 120,
pinned: null,
lockPinned: true
}
]
},
{
headerName: "Sports Results",
pinned: null,
lockPinned: true,
marryChildren: true,
children: [
{
headerName: "Sport",
field: "sport",
width: 110,
pinned: null,
lockPinned: true
},
{
headerName: "Total",
field: "total",
width: 100,
pinned: null,
lockPinned: true
},
{
headerName: "Gold",
field: "gold",
width: 100,
pinned: null,
lockPinned: true
},
{
headerName: "Silver",
field: "silver",
width: 100,
filter: "agNumberColumnFilter",
pinned: null,
lockPinned: true
},
{
headerName: "Bronze",
field: "bronze",
width: 100,
pinned: null,
lockPinned: true
}
]
}
Here's a plunker demo with full example: https://plnkr.co/edit/jjeDCsswWT0BnPwGGtjU?p=preview
In the example, the Athlete column is hidden.
After dragging the "Athlete Results" group column to the right, it's not possible to drag the "Sports Results" group column to the right.
Once removing the hide = true from the Athlete column it works fine.
I am trying to lead data from my controller. The queries work right but i cant seem to load the data in the view. If anyone can see my mistake, i will appreciate it.
controller
public ActionResult GetItemList(int RRGroupID)
{
var item = ReportEngineHelper.GetReportingEngine(Session).Generate<ItemListQuery>(new Filter()
{
Item=new Item()
{
RRGroupID = RRGroupID,
}
}).ToQueryModel<ItemName>();
var listItemName = new List<ItemName>();
return Json(item, JsonRequestBehavior.AllowGet);
}
view
var detailsSource =
{
url: $.ajax({url: url,
type: "json",
data: {RRGroupID:RRGroupID},
}),
datatype: "json",
datafields: [{ name: "ItemID", type: "int" }, { name: "FullItemName" }],
};
var detailsAdapter = new $.jqx.dataAdapter(detailsSource);
$("#jqxgrid").jqxGrid({
source: detailsAdapter,
autoheight:true,
autowidth: true,
columns: [
{ text: 'Item Name', datafield: 'FullItemName', width: 200, editable: false },
{ text: 'Unit', width: 100, editable: true },
{ text: 'Beginning Balance', width: 180, editable: true },
{ text: 'Loss', width: 80, editable: true, cellsalign: 'right' },
{ text: 'Quantity Recieved', width: 90, editable: true, cellsalign: 'right'},
{ text: 'DOS', width: 100, editable: true, cellsalign: 'right' },
{ text: 'Requested Quantity', width: 100, editable: true, cellsalign: 'right'}
],
});
//this is your function build grid
function buildDetail(data){
var detailsSource:{
localdata:data,
datafields: [{ name: "ItemID", type: "int" }, { name: "FullItemName" }],
type:'json',
};
var detailsAdapter = new $.jqx.dataAdapter(detailsSource);
$("#jqxgrid").jqxGrid({
source: detailsAdapter,
autoheight:true,
autowidth: true,
columns: [
{ text: 'Item Name', datafield: 'FullItemName', width: 200, editable: false },
{ text: 'Unit', width: 100, editable: true },
{ text: 'Beginning Balance', width: 180, editable: true },
{ text: 'Loss', width: 80, editable: true, cellsalign: 'right' },
{ text: 'Quantity Recieved', width: 90, editable: true, cellsalign: 'right'},
{ text: 'DOS', width: 100, editable: true, cellsalign: 'right' },
{ text: 'Requested Quantity', width: 100, editable: true, cellsalign: 'right'}
],
});
}
// now get your data with ajax then build grid.
$(document).ready(function(){
$.ajax({url: url,
type: "json",
data: {RRGroupID:RRGroupID},
success:function(data){
//now call your build function
buildDetail(data);
}
});
})
By this way, you load your data without using jqx.ajax
I'm new to using ext4js and web app dev in general.
I have a form, and in that form, I want a checkbox and right next to it is a textfield. I changed the layout type of the form from vbox to column and I set the width of the checkbox and textfield so that they'll both be in one line. So far, that worked great for me.
However, when I duplicated the checkbox and textfield, the result changed. The duplicated checkbox and textfield were on different lines and they were centered.
Here is my code:
{
xtype: 'form',
itemId: 'spousework',
maxWidth: 500,
width: 75,
layout: 'column',
bodyBorder: true,
bodyPadding: 10,
bodyStyle: 'border-right-style: solid;',
frameHeader: false,
header: false,
title: 'My Form',
items: [
{
xtype: 'displayfield',
itemId: 'userNameField2',
margin: '10 0 10 0',
maxWidth: 700,
minWidth: 700,
width: 700,
defaultAlign: 'center',
fieldLabel: 'Spouse\'s Work',
hideLabel: true,
labelWidth: 0,
value: 'SPOUSE\'S WORK',
fieldStyle: 'color: #007AA3; text-align: left; font-weight: bold;'
},
{
xtype: 'checkboxfield',
maxHeight: 20,
fieldLabel: 'Spouse\'s Employer',
labelWidth: 120,
boxLabel: ''
},
{
xtype: 'textfield',
margin: '0 0 0 10',
maxHeight: 20,
width: 300,
fieldLabel: '',
labelWidth: 120
},
{
xtype: 'checkboxfield',
maxHeight: 20,
fieldLabel: 'Spouse\'s Employer',
labelWidth: 120,
boxLabel: ''
},
{
xtype: 'textfield',
margin: '0 0 0 10',
maxHeight: 20,
width: 300,
fieldLabel: '',
labelWidth: 120
}
]
}
Can anyone help? How do you properly line up items in succeeding rows using a column layout for the form?
you can use filedcontainer in your form like below with column layout
{
xtype: 'fieldcontainer',
layout: 'column',
fieldLabel: 'Spouse\'s Employer',
items: [
{
xtype: 'checkboxfield',
maxHeight: 20,
boxLabel: '',
margin: '0 5 0 0'
},
{
xtype: 'textfield',
}
]}