const columns = [
{ field: 'id', headerName: 'ID', },
{
field: 'moduleName',
headerName: 'Module Name',
flex: 1,
editable: false,
sortable: false,
filter: false,
hideable: false
},
{
field: 'moduleCode',
headerName: 'Module Code',
flex:1,
align: "left",
editable: false,
sortable: false,
},
{
field: 'moduleType',
headerName: 'Module Type',
type: 'number',
flex: 1,
sortable: false,
editable: false,
align: "left",
headerAlign: 'left'
},
{
field: 'yearOfStudy',
headerName: 'Year of Study',
type: 'number',
flrx: 1,
sortable: false,
editable: false,
align: "left",
headerAlign: 'left'
},
{
field: 'program',
headerName: 'program',
type: 'number',
flex: 1,
sortable: false,
editable: false,
align: "left",
headerAlign: 'left'
},
{
field: 'programCode',
headerName: 'Program Code',
type: 'number',
flex: 1,
sortable: false,
editable: false,
align: "left",
headerAlign: 'left'
},
];
this is how it looks on the pc
enter image description here
now this is on mobile it is not responsive
enter image description here this mobile it is not responsive
mui datagrid by setting columns to
flex it is not responsive on mobiles phones it is just truncating the text instead of flex
Related
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 am trying to add vertical separator only to Main Header columns - 'Main-H-Col2' and 'Main-H-Col3' and not on sub column headers. How to achieve this ?
export const TestAgGridColumns = [
{headerName: 'Col1', field: 'col1', sortable: true, filter: true, lockVisible: true, lockPosition:
true, editable: false},
{headerName: 'Main-H-Col2',
children: [
{ headerName: 'sub-H-Col2',
field: 'sub-H-Col2',
sortable: true,
filter: true,
lockVisible: true,
lockPosition: true,
cellRenderer: 'agCellRenderer',
cellEditor: 'agSelectCellEditor',
cellEditorParams: {
values: ['Y', 'N'],
cellRenderer: 'agCellRenderer',
}
}
]},
{headerName: 'Main-H-Col3',
children: [
{ headerName: 'sub-H-col3-1', field: 'sub-H-col3-1', sortable: true, filter: true, lockVisible:
true, lockPosition: true,
cellRenderer: 'agCellRenderer',
cellEditor: 'agSelectCellEditor',
cellEditorParams: {
values: ['Y', 'N'],
cellRenderer: 'agCellRenderer',
}
},
{ headerName: 'sub-H-col3-2', field: 'sub-H-col3-2', sortable: true, filter: true, lockVisible:
true, lockPosition: true},
{ headerName: 'sub-H-col3-2', field: 'sub-H-col3-2', sortable: true, filter: true,
lockVisible: true, lockPosition: true, editable: false,
tooltipField: 'sub-H-col3-1Changes',
tooltipComponentParams: { color: '#ececec' }}
]}
];
Good Morning,
I have some problem when I attempted to fill my Grid panel from my web service, the result was an empty grid, thank you for advance.
// Create store
var myStore = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: 'Service.asmx/GetPeople',
headers: {
'Content-type': 'application/json'
}
}),
root: 'd',
id: 'Id',
fields: ['Id', 'FistName', 'LastName', 'BirthDate'],
autoLoad: true
});
//Create grid to display data from store
var gridTest = new Ext.grid.Panel({
store: myStore, // Our store
renderTo: Ext.getBody(),
forceFit: true,
columns: [ // Grid columns
{ xtype: 'gridcolumn', width: 100, text: 'Id', dataIndex: 'Id', flex: 1 },
{ xtype: 'gridcolumn', width: 100, text: 'Nom', dataIndex: 'FirstName', flex: 1 },
{ xtype: 'gridcolumn', width: 100, text: 'Mail', dataIndex: 'LastName', flex: 1 },
{ xtype: 'gridcolumn', width: 100, text: 'Phone', dataIndex: 'BirthDate', flex: 1 }
]
});
and this is my viewport:
Ext.create('Ext.container.Viewport', {
layout: "border",
items: [{
region: "north",
height: 50,
title: "Nord"
}, {
region: "south",
height: 200,
title: "sud",
bodyStyle: 'background: #fffff;',
border: false
}, {
region: "center",
title: "centre",
bodyStyle: 'background: #00000;',
border: false,
items: gridTest
}, {
region: "west",
width: 100,
title: "ouest"
}, {
region: "east",
width: 100,
title: "est"
}]
});
and this is RESPONSE FROM FIREBUG MOZILLA FIREFOX:
{"d": [{
"__type":"WebService4ExtJS.Model.Person",
"Id":0,
"FirstName":"sami",
"LastName":"samibizani#gmail.com",
"BirthDate":"23188219"
}, {
"__type":"WebService4ExtJS.Model.Person",
"Id":1,"FirstName":"admin",
"LastName":"admin#gmail.com",
"BirthDate":"1111111"
}, {
"__type":"WebService4ExtJS.Model.Person",
"Id":2,
"FirstName":"user",
"LastName":"user#gmail.com",
"BirthDate":"2222222"
}]
}
Your Store reader is not defined:
reader: {
type: 'json',
root: 'd',
idProperty: 'Id'
}
You can find the working code here.
And one little mistake: in the fields array, you wrote FistName instead of FirstName.
I try to explain my problem. I have a tab panel. In one tab I have a form panel and a grid panel, both collapsable. When I collapse the form panel it will collapse, when I collapse the gridpanel both are collapsed. Now when I uncollapse one of the two panels the other one disappears. What could this be?
Ext.define('MyApp.view.TMS', {
extend: 'Ext.container.Viewport',
id: 'tmsViewport',
layout: {
type: 'border'
},
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'tabpanel',
id: 'mainTab',
activeTab: 0,
region: 'center',
items: [{
xtype: 'panel',
id: 'configurationTab',
title: 'Configuration',
items: [{
xtype: 'tabpanel',
id: 'configurationVehicles',
title: 'configuration',
activeTab: 0,
items: [{
xtype: 'panel',
id: 'configurationDrivers',
collapsed: false,
title: 'Drivers',
items: [{
xtype: 'form',
floating: false,
height: 400,
id: 'configurationDriversConfiguration',
itemId: 'configurationDriversConfiguration',
bodyPadding: 10,
animCollapse: false,
collapsed: false,
collapsible: true,
title: 'Driver Configuration',
items: [{
xtype: 'button',
id: 'configurationDriversAdd',
text: 'Add'
}, {
xtype: 'button',
id: 'configurationDriversDelete',
text: 'Delete'
}, {
xtype: 'textfield',
id: 'configurationDriversCode',
fieldLabel: 'Driver Code'
}, {
xtype: 'textfield',
id: 'configurationDriversName',
fieldLabel: 'Driver Name'
}, {
xtype: 'textfield',
id: 'configurationDriversLicense',
fieldLabel: 'Driver License nr'
}, {
xtype: 'textfield',
id: 'configurationDriversGivenName',
fieldLabel: 'Driver Given Name'
}, {
xtype: 'textfield',
id: 'configurationDriversFamilyName',
fieldLabel: 'Driver Familiy Name'
}, {
xtype: 'textfield',
id: 'configurationDriversPhone',
fieldLabel: 'Driver Phone Nr'
}, {
xtype: 'textfield',
id: 'configurationDriversEmail',
fieldLabel: 'Driver Email'
}, {
xtype: 'combobox',
id: 'configurationDriversProvider',
fieldLabel: 'Provider',
displayField: 'name',
store: 'comboProviders',
valueField: 'id'
}, {
xtype: 'textareafield',
id: 'configurationDriversMemo',
fieldLabel: 'Memo'
}, {
xtype: 'button',
handler: function (button, event) {
var form = document.forms;
Ext.MessageBox.alert('Submitted Values', form.getValues(true));
},
height: 37,
id: 'configurationDriversSave',
text: 'Save'
}]
}, {
xtype: 'gridpanel',
height: 300,
id: 'configurationDriversGrid',
itemId: 'configurationDriversGrid',
animCollapse: false,
collapsible: true,
title: 'Drivers',
store: 'gridDrivers',
viewConfig: {
},
columns: [{
xtype: 'gridcolumn',
dataIndex: 'id',
text: 'Id'
}, {
xtype: 'gridcolumn',
dataIndex: 'version',
text: 'Version'
}, {
xtype: 'gridcolumn',
dataIndex: 'driverId',
text: 'DriverId'
}, {
xtype: 'gridcolumn',
dataIndex: 'firstName',
text: 'FirstName'
}, {
xtype: 'gridcolumn',
dataIndex: 'middleName',
text: 'MiddleName'
}, {
xtype: 'gridcolumn',
dataIndex: 'lastName',
text: 'LastName'
}, {
xtype: 'gridcolumn',
dataIndex: 'email',
text: 'Email'
}, {
xtype: 'gridcolumn',
dataIndex: 'workPhone',
text: 'WorkPhone'
}, {
xtype: 'gridcolumn',
dataIndex: 'note',
text: 'Note'
}, {
xtype: 'gridcolumn',
dataIndex: 'licenseNumber',
text: 'LicenseNumber'
}, {
xtype: 'gridcolumn',
dataIndex: 'providerId',
text: 'ProviderId'
}]
}]
}]
}]
}]
}]
});
me.callParent(arguments);
}
});
It's hard to say anything without having a fiddle or some simpler sample, but looking at your code I noticed one interesting thing:
You have layout: border only on the top level and then you have many nested panels inside. Try to define border layout in the container that contains your two panels that are collapsing.
If you are going to use a border layout you may want to refer to this: http://docs.sencha.com/ext-js/4-0/#!/example/layout/border.html I've only ever used this for the east and west panels to hiding and showing additional information on an event trigger. Since you already have IDs it would probably be better to manually trigger those specifically.
var settingForm = Ext.create('Ext.form.Panel', {
frame: false,
bodyStyle: 'padding:5px 5px 0',
modal: true,
resizable: false,
draggable: true,
forceSelection: true,
fieldDefaults: {
labelAlign: 'right',
//msgTarget: 'side',
labelWidth: 140
},
items: [{
xtype: 'fieldset',
anchor: '100%',
title: 'Some Information',
layout: 'column',
items: [{
xtype: 'container',
columnWidth: .5,
layout: 'anchor',
items: [{
xtype: 'hiddenfield',
name: 'txtHiddenId',
id: 'txtHiddenId'
}, {
xtype: 'textfield',
fieldLabel: 'Host Name',
name: 'txtHostName',
id: 'txtHostNameId',
allowBlank: false,
anchor: '96%',
disabled: true,
enableKeyEvents: true,
listeners: {
keypress: function() {
manageUpdate();
},
specialkey: function(field, e) {
if (e.getKey() == "46" || e.getKey() == "8")
manageUpdate();
}
}
}
Remove draggable: true and forceSelection: true. See if it helps.