Ag Grid Enterprise features

See also questions close to this topic

• React Native modules — Swift Frameworks

  I have created a new React Native library for iOS and with help of export methods, it can call any kind of function from react native apps. However I need to add Swift framework in react native library make link and work with any kind of react native apps. I am not getting point, how do I link my Swift framework with react native library.
• How to fix ' "X" is not defined no-undef' error in React.js

  Hello I am very new to React and coding in general. I am following an online tutorial to learn React and have encountered an error

  ./src/components/counter.jsx Line 24:  'product' is not defined  no-undef 
  

  Could you please explain what is going wrong in simple terms so I know how to fix this and can deal with it next time I encounter it.

  I have looked through all related questions I could find on stackoverflow and haven't been able to fix it, if I have missed one that answers this then please link it. I have had this error in the past but usually that was just because I had a typo (e.g. a capital instead of a lowercase) or did not import something correctly however that is not the case this time as far as I can tell. I can see no difference between my code to what is in the video.

  ===index.js===

  import React from "react";
  import ReactDOM from "react-dom";
  import "./index.css";
  //import App from "./App";
  import * as serviceWorker from "./serviceWorker";
  import "bootstrap/dist/css/bootstrap.css";
  import Counters from "./components/Counters";
  
  ReactDOM.render(<Counters />, document.getElementById("root"));
  serviceWorker.unregister();
  

  ===counter.jsx===

  import React, { Component } from "react";
  
  class Counter extends Component {
    state = {
      count: 0
    };
  
    handleIncrement = product => {
      console.log(product);
      this.setState({ count: this.state.count + 1 });
    };
  
    render() {
      return (
        <div>
          <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
          <button
            onClick={() => this.handleIncrement(product)} //this is the line with the error
            className="btn btn-secondary btn-sm"
          >
            Increment
          </button>
        </div>
      );
    }
  
    getBadgeClasses() {
      let classes = "badge m-2 badge-";
      classes += this.state.count === 0 ? "warning" : "primary";
      return classes;
    }
  
    formatCount() {
      const { count } = this.state;
      return count === 0 ? "Zero" : count;
    }
  }
  
  export default Counter;
  

  ===counters.jsx===

  import React, { Component } from "react";
  import Counter from "./counter";
  
  class Counters extends Component {
    state = {};
    render() {
      return (
        <div>
          <Counter />
          <Counter />
          <Counter />
          <Counter />
        </div>
      );
    }
  }
  
  export default Counters;
  

  The expected output is that when I run it and go to the webpage it has buttons which I can press and counters beside them which will display how many times they have been pressed.

  What actually happens is that when I go to the page it displays the following:

  Failed to compile
  
  ./src/index.js
  
  Cannot find file: 'Counters.jsx' does not match the corresponding name on disk: './src/components/counters.jsx'.
  This error occurred during the build time and cannot be dismissed.
  
• Cannot find module '../config/env Failed at 0.1.0 start script

  it was working fine yesterday i don't know what happened npm is not starting instead giving the above error. help me pls..

  npm start scripts not working pls someone help me i'm new to this field

  Husnains-Mini:~ husnaintahir$ cd ReactApp
  Husnains-Mini:ReactApp husnaintahir$ cd react-complete-guide
  Husnains-Mini:react-complete-guide husnaintahir$ npm start
  
  > react-complete-guide@0.1.0 st art /Users/husnaintahir/ReactApp/react-complete-guide
  > node scripts/start.js
  
  module.js:549
      throw err;
      ^
  
  Error: Cannot find module '../config/env'
      at Function.Module._resolveFilename (module.js:547:15)
      at Function.Module._load (module.js:474:25)
      at Module.require (module.js:596:17)
      at require (internal/module.js:11:18)
      at Object.<anonymous> (/Users/husnaintahir/ReactApp/react-complete-guide/scripts/start.js:15:1)
      at Module._compile (module.js:652:30)
      at Object.Module._extensions..js (module.js:663:10)
      at Module.load (module.js:565:32)
      at tryModuleLoad (module.js:505:12)
      at Function.Module._load (module.js:497:3)
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! react-complete-guide@0.1.0 start: `node scripts/start.js`
  npm ERR! Exit status 1
  npm ERR! 
  npm ERR! Failed at the react-complete-guide@0.1.0 start script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
  
  npm ERR! A complete log of this run can be found in:
  npm ERR!     /Users/husnaintahir/.npm/_logs/2019-05-22T04_42_05_832Z-debug.log
  Husnains-Mini:react-complete-guide husnaintahir$ 
  
• My Observable not getting executed Asynchronously

  I am new to angular and I think I understand Observables but I am not sure any more.

  I have a code that applies filter to Ag-grid. I want to display the overlay while I am applying the filter as the gridApi.setRowData takes a long time as it applies a filter to over 12,000 records.

  initially when I apply the filter button I call a service that applies the filter and then use this.gridApi.setRowData

  this.gridOptions.api.showLoadingOverlay();
  this.gridApi.setRowData(this.filterService.applyGridFilters
  (this.gridFilters, this.gridData));
  this.gridOptions.api.hideOverlay();
  

  This overlay is not appearing and my UI freezes while applying the filter so I thought I would make the applyFilter method as an observable this way it will get executed asynchronously

  So I created this observable in the service

  apply(gridFiltersList: GridFilter[], gridData:any[]): Observable<any[]>
  {
       let simpleObservable= new Observable<any[]>((observer) => {
  
      // observable execution
      observer.next(this.applyGridFilters(gridFiltersList, gridData));
      //observer.complete()
    });
    return simpleObservable;
  }
  

  and now I am applying the filter using subscribe:

   this.gridOptions.api.showLoadingOverlay();
   this.filterService.apply(this.gridFilters, this.gridData).subscribe(data 
     =>{
         this.gridApi.setRowData(data);
         this.gridOptions.api.hideOverlay();
      })
  

  this still doesn't work I get the same results the overlay doesn't show and the UI freezes while applying the filter. I am under the impression that Observables will be executed asynchronously.

  What am I doing wrong?
• IHeaderAngularComp on changes params

  I am using ag grid / angular and I have successfully redefine a custom header from IHeaderAngularComp. Inside of the cusotm class I use agInit(params), as said in the documentation to get the custom param I set outside the grid. It works really well except that on data I use inside the params come from a http request, but at the time the request resolves, the headers are already created, and the call to agInit is long gone ... So I was curious about the use of a agChange or similar ?

  here is the custom class ( really classic ) :

  export class CustomMonthHeaderComponent implements IHeaderAngularComp  {
  
     private params: any;
  
    constructor() { }
  
    agInit(params) 
    {
       this.params = params; // this is not yet fully prepared at this time
    }
  
    // proposal / similar option : 
    agChange(params) 
    {
       this.params = params; // this is ok now yeah !
    }
  }
  
• ag-grid filter menu onDisplay function

  I am working on a custom filter menu for some columns in ag-grid, where user can click a filter menu icon, which shows a custom component for the filter menu, rather than the default. See below for an example from the documentation, here

  

  I need to perform some action when the filter menu opens. How can i achieve this? I thought to use agInit(params){....}, however, this initialization function only calls once, when the user first clicks the menu icon...

  The only idea I have is to put another component within an ngIf and put my initialization logic in there (I assume that when menuVisible is true, then ngOnInit within the second component will occur), however that seems awfully inefficient.

  <div *ngIf="this.params.column.menuVisible">
    <sub-component></sub-component>
  </div>
  
• Server side pagination using ag-grid with API calls when clicking on paginator buttons

  I'm looking for a good example with Ag Grid (for React) to work with an API which return only a portion of data. I don't found a good one in their documentation : example 1, example 2 ....

  Let's say that we are receiving this object from the server :

  {
     rows: [Array of 10 rows],
     page: 2,
     total: 100
  }
  

  rowData now contains only 10 rows. Is there a way to show the right paginator data ? It should be page 2 of 10, shows the buttons and when clicking on the paginator it make another API call with the selected page number and the page size.

  I know that I can call the API again when the page is changed using the onPaginationChanged event.

  Thanks !
• How to implement an ag-grid custom floating filter with material-ui withStyles HoC?

  Created an ag-grid custom floating filter with validation and need to style the filter when the validation fails with material-ui themed class using withStyles higher order component (HoC). However, when you wrap the custom floating filter with HoC onParentModelChanged doesn't get called at all.

  Used hard-coded style to set the element style property but this is not allowed in the themed project using @material-ui/core v1.4.0. Below is the custom floating filter that I created with validation and hard-coded style.

  import { PropTypes } from 'prop-types';
  
  import styles from './styles';
  
  const DEFAULT_MIN_CHARS = 3;
  const ENTER_KEY = 13;
  
  export class CustomFloatingFilter extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        currentValue: '',
        minChars: props.minChars ? props.minChars : DEFAULT_MIN_CHARS,
        invalidFilter: false,
        styles: styles()
      };
      this.keyPressed = this.keyPressed.bind(this);
      this.valueChanged = this.valueChanged.bind(this);
      this.onParentModelChanged = this.onParentModelChanged.bind(this);
      this.onFloatingFilterChanged = change => {
        const { minChars } = this.state;
        if(change && change.model && (!change.model.filter || change.model.filter.length >= minChars)) {
          return props.onFloatingFilterChanged(change);
        }
        return false;
      };
    }
  
    keyPressed(event) {
      this.setState(
        { enterPressed: event.which === ENTER_KEY },
        () => {
          const { enterPressed } = this.state;
          if(enterPressed) { //update filter only when enter. valueChanged will handle all other cases
            this.onFloatingFilterChanged(this.buildChanged());
          }
        }
      );
    }
  
    valueChanged(event) {
      const { minChars } = this.state;
      this.setState(
        {
          currentValue: event.target.value,
          invalidFilter: !!event.target.value && event.target.value.length < minChars
        },
        () => {
          this.onFloatingFilterChanged(this.buildChanged());
        }
      );
    }
  
    onParentModelChanged(parentModel) {
      this.setState({ currentValue: parentModel ? parentModel.filter : '' });
    }
  
    buildChanged() {
      const { currentValue, enterPressed, invalidFilter } = this.state;
  
      return {
        model: {
          filterType: 'text',
          type: 'equals',
          filter: currentValue
        },
        apply: !invalidFilter && (enterPressed || currentValue === '') //for applyButton:true case
      };
    }
  
    render() {
      const { currentValue, invalidFilter, styles } = this.state;
  
      return (
        <div style={invalidFilter ? styles.invalid : {} //eslint-disable-line
        //withStyles HoC doesn't work with ag-grid floating filter component
        }
        >
          <input className='ag-floating-filter-input' onKeyPress={this.keyPressed} onChange={this.valueChanged} value={currentValue} />
        </div>
      );
    }
  }
  
  CustomFloatingFilter.propTypes = {
    minChars: PropTypes.number,
    onFloatingFilterChanged: PropTypes.func
  };
  
  export default CustomFloatingFilter;
  
• How to multilevel sort row groupings in Ag-Grid

  How to you multilevel sort row groupings in Ag - Grid. If I had two column fields(A, B) that have been group together. First by A than more granular by B. How do I get the rows sorted by B?

  There is a one line documentation from Ag - Grid.

  var groupColumn = {
      headerName: "Group",
      comparator: [yourOwnComparator], // this is the important bit
      cellRenderer: {
          renderer: "agGroupCellRenderer",
      }
  };
  

  How do you use yourOwnComparator?