Ag Grid Enterprise features
I am using ag-grid-enterprise
app.js
import React from 'react'
import ReactDOM from 'react-dom'
import { LicenseManager } from "ag-grid-enterprise"
LicenseManager.setLicenseKey('<enterprisekey>')
...
DataGrid.js
import { AgGridReact } from 'ag-grid-react'
import 'ag-grid-enterprise'
import React from 'react'
class DataGrid extends React.Component {
onGridReady = params => {
this.gridApi = params.api
this.gridColumnApi = params.columnApi
console.log('params', params) // ag-grid enterprise features are null E.G.(aggFuncService, clipboardService)
}
render() {
return (
// Props omitted for brevity
<AgGridReact />
)
}
}
package.json
{
"ag-grid": "18.1.1",
"ag-grid-community": "^19.1.1",
"ag-grid-enterprise": "^19.1.1",
"ag-grid-react": "18.1.0",
}
Why ag-grid-react
enterprise features are null? It seems i am doing something wrong here.
1 answer
-
answered 2018-11-08 08:47
un.spike
First: remove obsolete npm package
ag-grid
Breaking Changes:
The NPM package name for the free module of ag-Grid is now
ag-grid-community
instead ofag-grid
. This means you install withnpm install ag-grid-community
and then you reference likeimport {Grid, GridOptions} from "ag-grid-community"
.Then: Update
ag-grid-react
to same version asag-grid-community
And the last one, not sure what exactly you are trying to find in
params
, but if your license is valid you should be able to use all features.simple check: just add
[enableRangeSelection]="true"
ingridOptions
and try to select range among rows+columns
See also questions close to this topic
-
Why is my JavaScript object property inaccessible, when it IS, in fact, defined?
Here is the object. It is a second-level object in the data tree:
user: { userId: 3, username: 'aragorn', },
My React component is destructuring its parent object and making it available to the entire component. When I render the full user object using this code:
<p className="small"> {`Submitted by ${JSON.stringify(user)}`} </p>
I get a complete stringified object with all of user's properties:
When I try to access only the 'username' property from the 'user' object:
<p className="small"> {`Submitted by ${JSON.stringify(user.username)}`} </p>
I get this error:
Have you ever faced this weird issue before?
For further study, here is the full data object. This is coming from a mock data object being exported from a neighboring file in the same app. No network requests to a backend or anything, so there shouldn't be any async stuff going on here (I may be wrong):
{ title: "The Hefalump's Tale", page: '32', line: '1', author: 'Joni E. Driskill', genre: 'Sci-fi', type: 'Motivational', content: 'The grass is greener on the other side, unless, in actuality and reality, it is not. I guess in that case, you can just give up on anything nice in life.', claps: 23, id: 4, user: { userId: 3, username: 'aragorn', }, comments: [ { commentId: 0, quoteId: 0, content: 'Comment content', userId: 'userId', claps: 2, date: 2, }, { commentId: 1, quoteId: 1, content: 'Comment content', userId: 'userId', claps: 4, date: 1, }, { commentId: 2, quoteId: 2, content: 'Comment content', userId: 'userId', claps: 12, date: 0, }, ],
},
And HERE is my React component, called 'Meta,' bringing in the 'quote' object as a prop. The primary line in question is toward the bottom, but feel free to look at my props destructuring, too, if you like:
import React from 'react'; import Clap from '../mechanics/Clap'; import Report from '../mechanics/Report'; const Meta = ({ quote: { content, title, author, page, line, genre, type, claps, id, user, }, }) => ( <div className="discussion-meta mb2"> <h1>“{content}”</h1> <hr /> <div className="columns is-spaced-around pb3 text-align-left"> <div className="column"> <h3>{title}</h3> <p> <small>by {author}</small> </p> {page ? <p> <small>page {page}{line ? `, line ${line}` : ''}</small> </p> : null } </div> <div className="column text-align-right"> <p> <span className="tag-purple small">{genre}</span> </p> <p> <span className="tag-green small">{type}</span> </p> </div> </div> <div className="columns"> <div className="column"> <p className="small"> {`Submitted by ${JSON.stringify(user.username)}`} </p> </div> </div> <div className="columns"> <div className="column"> <Clap claps={claps} /> </div> <div className="column"> <Report id={id} /> </div> </div> </div> ); export default Meta;
I've recreated in CodeSandbox, and it works! WTF! https://codesandbox.io/s/4q9nlywl1x
-
Several troubles making simple object inspector in React
I am javascript and React newbie, so I am still a little bit confused by thinking in React concept.
I am trying to make simple object inspector in React.
Here is property row element:
class PropertyRow extends React.Component { constructor(props) { super(props); this.state = { propertyName: this.props.propertyName, propertyValue: this.props.propertyValue }; alert(this.props.propertyName + " evoked in constructor"); } render() { return ( <div>{this.props.propertyName} = {this.props.propertyValue}</div> // <div>{this.state.propertyName} = {this.state.propertyValue}</div> ); } }
here in the component PropertyRows I am trying to read all properties of an object dynamically.
class PropertyRows extends React.Component { constructor(props) { super(props); this.createProRows = this.createProRows.bind(this); } createProRows(obj) { const propArr = []; for (const key of Object.keys(obj)) { const val = obj[key]; propArr.push(<PropertyRow propertyName={key} propertyValue={val} />); } return propArr; } render() { return <div>{this.createProRows(this.props.obj)}</div>; } }
And here I test this marvelous code
class Express extends React.Component { constructor(props) { super(props); this.state = { soldiers: 0, captain:'John Maverick' }; this.doClick = this.doClick.bind(this); } doClick() { const obj = { soldiers: this.state.soldiers + 1, country:'Australia' //add new property }; this.setState(obj); } render() { return ( <div onClick={this.doClick}> <PropertyRows obj={this.state} /> </div> ); } } ReactDOM.render(<Express />, document.getElementById("root"));
When you click on the text, you will see incrementing "soldiers" property by one. The code is buggy and I do not understand why, or perhaps I do, but I have not absolutely no idea, what how to solve it in React metalanguage.
- I would expect, that dynamically created array of
<PropertyRow propertyName={key} propertyValue={val}/>
would be nice way to browse object properties. But it seems, that the rendered HTML DOM objects are not destroyed and recreated. They are mysteriously reattached, when the new object in thedoClick
function is to be expressed.
Furthermore
When create another object in
doClick
, the propertyobj.captain
is still there (in the browser window), probably because the underlying HTML DOM elements are not destroyed. Adding new propertycountry: 'Australia'
seems to work OK.When I call
<PropertyRow propertyName={key} propertyValue={val}/>
the second time I would expect, that constructor would be fired, because it is created and pushed in the new array. But it is not. It is fired only for the new propertycountry: 'Australia'
It seems, that I have to somehow destroy rendered HTML DOM elements in order to force react to recreate them. But how? Or is there another way?
I deeply apologize for this long text. I hope it's not so complicated to read.
Thanx
- I would expect, that dynamically created array of
-
React - How can I make one time only rendering value in state
What I need to do is to setState with a value, then send data to a children by props, but I would like "state" to forget about that after doing this once.
this.setState({ animateId: 15 //or any number of id });
then later
if(this.state.animateId){ let idToSent = this.state.animateId; } <Items <...different props> animate={idToSent}/> //once after settingState - 15, // then undefined or whatever with every next time
and I would want to take this value once, send it via props, and forget about it, either way.
Is there any way to do that, beside just altering that one value in state again, because that would cause unnecesary rendering ??
-
AG-Grid: On Filter Menu Dismiss
Looking to track when the Column Menu > Filter Menu popup is dismissed... can't find any info in Grid Events, Context Menu, or Filters that do it.
Basically looking for something like
toolPanelVisibleChanged
I need on dismiss to reset the filters to what is currently applied.
So, what I am trying to do and I have in place (everything minus the on dismiss) is:
- Get filters currently applied, if any and house in a variable
- If user clicks the filter menu and changes the filter, but cancels or clicks bg (which dismisses the menu) re-apply the filters in the variable on menu dismiss.
What happens is when the user makes a filter change, without applying it and they close the menu... and reopen it, they think that the filters shown checked are applied, but they are not bc applied was not clicked.
Helpful links that I've looked at:
https://www.ag-grid.com/javascript-grid-events https://www.ag-grid.com/javascript-grid-column-menu https://www.ag-grid.com/javascript-grid-filtering
Using Angular 7, typescript, and ag-grid enterprise.
-
AgGrid custom filter not created until interaction
I have a custom filter component on a column in my grid. I've noticed that the filter component is not constructed until I click on the filter icon in the column header. This means that the data is not filtered according to my default settings (e.g., filter out records where
status == StatusEnum.Complete
).As a workaround, I've found that I can get a filter instance in the
onGridReady
event by callingapi.getFilterInstance('status')
, and this causes the filter component to be created and thereby apply default filtering.This workaround seems a bit clunky. The
filter
variable is unused in theonGridReady
event, which causes warnings in the IDE / build. Another developer may come along and delete this line of code, thinking it is unnecessary.Is there a better way to force my custom filter to be instantiated when the grid is created? I'm using AgGrid 17.1 and Angular 4.4.
The grid is configured like so:
gridOptions: GridOptions = { enableFilter: true, onGridReady: (event) => { let filter = event.api.getFilterInstance("status"); // forces the filter component to be constructed let data = this.loadAsyncData(); event.api.setRowData(data); }, columnDefs: [ ... { headerName: "Status", field: "status", filterFramework: MyCustomStatusFilterComponent, filterParams: { valueGetter: (obj) => { return obj.data.statusEnum; }, hideCompleteByDefault: true, ... } }, .... ] }
-
AG-Grid Single Selection Within RowGroup
I was wondering if it was possible to replicate AG-Grids's single selection within a rowGroup?
For example, If I had multiple rows within a group that are selectable, I want to be able to select a row within that group and have it automatically deselect the previously selected row. Mimicking the single selection.
Any help or insight would be greatly appreciated! Thank you!
-
Ag-Grid React: Row Flash instead of Cell Flash
In Ag-Grid, enableCellChangeFlash={true} will allow cells to flash when there is a change detected.
Is there any way to flash the whole row where a change is detected?
-
AG-Grid - how to access params.api for other grid options before `onGridReady` is triggered?
I'm using React.
I need access to
params.api
to create the required data for thecolumnDefs
, but it seems the only way to accessparams.api
is via a method passed toonGridReady
- this is obviously too late. Is there any way of doing this? -
Using Ag-Grid Enterprise license getting a 'ag-grid: Looking for component [agSetColumnFilter] but it wasn't found." error
I've been using Ag-Grid's Enterprise feature "agSetColumnFilter" for months with no problem.
I'm using the following versions:
"ag-grid": "^17.1.1", "ag-grid-enterprise": "^17.1.1", "ag-grid-react": "^17.1.0",
After a bit of refactoring, I'm starting to get this error after just clicking on the filter menu:
ag-grid: Looking for component [agSetColumnFilter] but it wasn't found. Array.concat.ComponentProvider.retrieve @ componentProvider.js?6ebb:209 Array.concat.ComponentResolver.resolveByName @ componentResolver.js?1587:159 Array.concat.ComponentResolver.getComponentToUse @ componentResolver.js?1587:155 Array.concat.ComponentResolver.newAgGridComponent @ componentResolver.js?1587:271 Array.concat.ComponentResolver.createAgGridComponent @ componentResolver.js?1587:236 Array.concat.FilterManager.createFilterInstance @ filterManager.js?d1c0:376 Array.concat.FilterManager.createFilterWrapper @ filterManager.js?d1c0:393 Array.concat.FilterManager.getOrCreateFilterWrapper @ filterManager.js?d1c0:343 Array.concat.StandardMenuFactory.showPopup @ standardMenu.js?505d:52 Array.concat.StandardMenuFactory.showMenuAfterButtonClick @ standardMenu.js?505d:45 Array.concat.HeaderComp.showMenu @ headerComp.js?f669:122 (anonymous) @ headerComp.js?f669:107 componentResolver.js?1587:274 Error creating component filter=>agTextColumnFilter Array.concat.ComponentResolver.newAgGridComponent @ componentResolver.js?1587:274 Array.concat.ComponentResolver.createAgGridComponent @ componentResolver.js?1587:236 Array.concat.FilterManager.createFilterInstance @ filterManager.js?d1c0:376 Array.concat.FilterManager.createFilterWrapper @ filterManager.js?d1c0:393 Array.concat.FilterManager.getOrCreateFilterWrapper @ filterManager.js?d1c0:343 Array.concat.StandardMenuFactory.showPopup @ standardMenu.js?505d:52 Array.concat.StandardMenuFactory.showMenuAfterButtonClick @ standardMenu.js?505d:45 Array.concat.HeaderComp.showMenu @ headerComp.js?f669:122 (anonymous) @ headerComp.js?f669:107 filterManager.js?d1c0:401 Uncaught TypeError: Cannot read property 'then' of null at FilterManager.Array.concat.FilterManager.putIntoGui (filterManager.js?d1c0:401) at FilterManager.Array.concat.FilterManager.createFilterWrapper (filterManager.js?d1c0:394) at FilterManager.Array.concat.FilterManager.getOrCreateFilterWrapper (filterManager.js?d1c0:343) at StandardMenuFactory.Array.concat.StandardMenuFactory.showPopup (standardMenu.js?505d:52) at StandardMenuFactory.Array.concat.StandardMenuFactory.showMenuAfterButtonClick (standardMenu.js?505d:45) at HeaderComp.Array.concat.HeaderComp.showMenu (headerComp.js?f669:122) at HTMLSpanElement.<anonymous> (headerComp.js?f669:107)
The refactoring work I did was to iterate over an array and create React-Bootstrap tab components that render the Ag-grid components when clicked. I place the array of tabs in a
<div>
to be rendered.For my row data, it's an array like so:
[{ id: 1, keyword: 'tv', projects: [{ id: 1, name: 'Project 1' }, {id: 2, name: 'Project 2' }] }, { id: 2, keyword: 'sofa', projects: [{ id: 3, name: 'Project 3' }] }]
My column definitions are returned from a function like this: (
lookup
is a hash where my filter options are stored, I iterate over the values and produce an array of strings to give tofilterParams.values
:function createColumnDefs = (lookup) => ([ { field: 'projects', headerName: 'Projects', filter: 'agSetColumnFilter', cellRenderer: 'ListRenderer', cellRendererParams: { accessor: 'name' }, filterParams: { values: _.get(lookup, 'projects', []).map(project => project.name), debounceMs: 200 } }, { field: 'keyword', headerName: 'Keyword', filter: 'agTextColumnFilter', sort: 'asc', filterParams: { debounceMs: 200 }, pinned: 'left', minWidth: 250 } ]);
Everything works fine including displaying rows, row selection, sorting, text filtering, the infinite scroll. ONLY when I click on the filter hamburger menu in the column header does it give the above error.
This filter has worked in the past and since then I have not altered row data structure or my column definitions or filter options.
*************** Screenshots for reference ***************