Ag Grid Enterprise features

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>&ldquo;{content}&rdquo;</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.

  1. 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 the doClick function is to be expressed.

  Furthermore

  2. When create another object in doClick, the property obj.captain is still there (in the browser window), probably because the underlying HTML DOM elements are not destroyed. Adding new property country: 'Australia' seems to work OK.

  3. 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 property country: '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
• 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:

  1. Get filters currently applied, if any and house in a variable
  2. 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 calling api.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 the onGridReady 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 the columnDefs, but it seems the only way to access params.api is via a method passed to onGridReady - 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 to filterParams.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 ***************