I built a grid using ag-grid,
for one of the column I sent custom cell editor to render my own date component,
this column have also valueGetter to format the value to display,
my problem is: the cell editor get the formmated value, that returned from valueGetter, I want to have there the source value, how can I do it?
here is the definition of my columns object:
const columnsObject = [
{
field: 'date',
colId: 'date',
headerName: 'date',
filter: true,
sortable: true,
unSortIcon: true,
resizable: true,
valueGetter: row => row.data.date && moment(row.data.date).format('YYYY-MM-DDTHH:mm'),
editable: true,
cellEditor: 'dateEditor',
cellEditorParams: {
name: 'startDate',
}
},
{
field: 'text',
colId: 'text',
headerName: 'text',
filter: true,
resizable: true,
editable: true,
},
];
My dateEditor should get the value with time (YYYY-MM-DDTHH:mm format), but in the view after stop editing it should be only time (YYYY-MM-DD format).
using valueFormatter instead of valueGetter solved my problem
Related
This is my second question in SO, so apologize for any error in asking and formatting my question. I've been trying to accomplish what the tile said. Basically I have the following example of an array that I use to define my columns:
[
{
field: 'name',
headerName: 'Name',
flex: 1,
editable: true
},
{
field: 'address',
headerName: "Address",
flex: 1,
editable: true
},
{
field: 'country',
headerName: "Country",
flex: 1,
editable: true,
type: 'singleSelect',
valueOptions:
[
// This should be dynamic
]
},
]
This is exported from a separate file, which is then imported in the React component that uses the DataGrid with these columns definitions.
The options are fetched from my REST API when a user logs in and they will be different for each user.
Is there anyway I could assign the valueOptions for the column country dynamically after the initial definitions?
Thank you!
P.S: I'm using the free version of Material-UI's DataGrid.
You could change the value of the "valueOptions" field after you have the answer of your REST service:
fetch("your endpoint").then(answer => {
columnsConfig.filter(column => column.field === "country").valueOptions = answer;
})
PS: you may have to transform the answer before setting the value of valueOptions
valueOpt accepts a function that you can use to dynamically reference the values you are looking for.
Relevant issue:
https://github.com/mui/mui-x/issues/3528
[{
field: 'country',
headerName: "Country",
flex: 1,
editable: true,
type: 'singleSelect',
valueOptions: ({id, row, field}) => {
//return valueOptions for the row here
}
}]
you can do by valueOptions field
const types = { // get value from services }
{
field: 'country', width: 180,
headerName: 'Country',
type: 'singleSelect',
editable: true,
valueOptions: ({ row }) => { const options = [];
types?.map((type) =>options.push(type.name))
return options
}
},
I have a ag-grid row group example setup here: https://plnkr.co/edit/lOOhfLcpuNbIgXO5e7Wy?p=preview
var columnDefs = [
{
headerName: 'country',
rowGroup: 'true',
showRowGroup: true,
cellRenderer:'agGroupCellRenderer',
field: 'country',
cellRendererParams: {
suppressCount: true,
checkbox: false,
innerRenderer: 'simpleCellRenderer',
suppressDoubleClickExpand: true,
suppressEnterExpand: true
}
},
{headerName: 'City', field: 'city', cellRenderer:'agGroupCellRenderer', cellRendererParams: {
suppressCount: true,
checkbox: false,
innerRenderer: 'simpleCellRenderer',
suppressDoubleClickExpand: true,
suppressEnterExpand: true
}}
];
In this example I am specifying suppressCount to be true, after which I expected to see the row count of only countries but the grid shows a total row count of 27. How do I make it count only the unique countries and ignore the rows for each city.
reference: https://www.ag-grid.com/javascript-grid-cell-rendering/#gsc.tab=0
I am using React-data-grid with Filter options in the table. For some column cells, i am passing a DOM object (not as a string). And for this column, the filter functionality is not working.
this._columns = [
{
key: 'date',
name: 'Shipment date',
width: 220,
sortable: true,
filterable: true,
},{
key: 'price',
name: 'Shipment Price',
width: 220,
sortable: true,
filterable: true,
}];
And here are the Rows...
let rows = [];
_.each(response, function(value, index){
rows.push({
date: value.date
price: <div>{value.currencySymbol} <span>{value.price}</span></div>
})
});
So, this is my Column Metadata , and Rows. I am passing this metadata to ReactDataGrid Component.
Now the date filter is working fine. However this price filter is not working well due to this inline DOM element.
Can Someone please help me to get this solved?
Resolved this by using 'formatter' or else we could use 'getRowMetaData'
formatter: an adaptor/middleware for rendering the value in DOM
getRowMetaData: it is used to get the adjacent cell values of the row. And, We could achieve using props.dependentValues where it will have all the column data of the row. I used this in 'Shipment Price' column, to get the other column values of that row.
this._columns = [
{
key: 'date',
name: 'Shipment date',
width: 220,
sortable: true,
filterable: true,
formatter: (props)=>(<div style={{border: '0px'}}>{props.value}</div>),
},{
key: 'price',
name: 'Shipment Price',
width: 220,
sortable: true,
filterable: true,
formatter: (props) => (this.getTrackingUrl(props.dependentValues.rawObj, props.dependentValues.indexVal)),
getRowMetaData: (row) => (row)
}];
I'm trying to get UI-Grid on my Angular App to filter dates properly but it doesn't seem to respond to any kind of filter change. I've tried going over the docs and using their example:
displayName: "Long Date", cellFilter: 'date:"longDate"', filterCellFiltered:true,
But nothing seems to change the format of the date, here is my code currently: (updated)
$scope.gridOptionsClaims = {
enableSorting: true,
enableFiltering: true,
showColumnFooter: true,
enableGridMenu: true,
columnDefs: [
{ field: 'date', name: 'Date', displayName: "Date", type: 'date', cellFilter: 'date:"MM-dd-yyyy"', filterCellFiltered: true },
{ field: 'transaction_id', name: 'Purchase Order', displayName: "Purchase Order" },
{ field: 'full_name', name: 'Salesperson', displayName: "Salesperson" }
]};
I've tried using filters 'date:MM-dd-yyy' and that didn't work either. Could anyone please tell me what I'm missing?
Did you enable filtering with enableFiltering: true property?
Also, try to define cellFilter with filters as you already mentioned:
cellFilter: 'date:"yyyy-MM-dd HH:mm"'
I have grid column:
{
header: "",
sortable: false,
id: 'value',
dataIndex: 'value',
hidden: false,
editor: {
xtype: 'textfield',
allowBlank: false
}
}
How to escape html entities only in renderer function for this column ?
The renderer property of a column definition can take either a function or the string name of one of Ext.util.Format's methods. In this case you can use the htmlEncode method by declaring the column as:
{
header: "",
sortable: false,
id: 'value',
dataIndex: 'value',
hidden: false,
editor: {
xtype: 'textfield',
allowBlank: false
},
renderer: 'htmlEncode'
}
There is a autoEncode property on the EditorGridPanel.
"True to automatically HTML encode and decode values pre and post edit (defaults to false)."
Just set it to true.
autoEncode: true
hi write this code in app.js file
//code for grid xss
Ext.override(Ext.grid.column.Column, {
defaultRenderer: Ext.util.Format.htmlEncode
});