Ag Grid Enterprise features

See also questions close to this topic

• Hardcoded expected string vs extracted variable in React shallow test

  I am having the following simple unit test in React:

  const prop = {name: '::name::'}
  const wrapper = shallow(<Component prop={prop} />)
  
  expect(wrapper.equals(
      <div>
          <div>::name::</div>
      </div>
  )).toEqual(true)
  

  And I am wondering if it is correct to extract the name variable and check the expected rendered result against it:

  const name = ::name::
  const wrapper = shallow(<Component prop={name: name} />)
  
  expect(wrapper.equals(
      <div>
          <div>{name}</div>
      </div>
  )).toEqual(true)
  

  I suppose <div>::name::</div> is better than <div>{name}</div>, but I need arguments why, anyone? :}
• Spring Boot 2.1.0 only serve index.html if resource not resolved (SPA, react-router)

  I am serving an SPA made with create-react-app and react-router using Spring Boot 2.1.0 with this configuration

  import org.springframework.context.annotation.Configuration;
  import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
  import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
  
  @Configuration
  public class WebMvcConfiguration implements WebMvcConfigurer {
  
      @Override
      public void addViewControllers(ViewControllerRegistry registry) {
          registry.addViewController("/**/{path:[^\\.]+}")
                  .setViewName("forward:/");
      }
  }
  

  Basically what it does is always serve index.html unless there's a period in the path. I would like to align this with create-react-app's provided .htaccess. How can I make Spring Boot match this functionality?

  RewriteEngine on
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
  
• Redux Saga - group similar (but not all) actions into takeLeading / takeLatest

  I am currently using redux-saga on a project and I want to use it to also prevent requesting the same resource multiple times.

  At the moment I have multiple components on the same page requesting a resource (i.e. dispatch {types: "REQUEST_POST_COMMENTS", postId: <postIdHere>})

  And I have this saga:

  export function* loadPostComments() { yield takeLatest("REQUEST_POST_COMMENTS", loadPostComments); }

  My page dispatches the following actions at the same time:

  • {types: "REQUEST_POST_COMMENTS", postId: 123}
  • {types: "REQUEST_POST_COMMENTS", postId: 321}
  • {types: "REQUEST_POST_COMMENTS", postId: 123}

  And my goal is to for loadPostComments to be called twice, once for post 123 and one for post 321.

  I have switched to takeLeading in the beta version - but this will only call loadPostComments once.

  Is there any way to define a saga using a pattern but takeLatest to group them by the action.type value? Or any way of achieving something similar?
• ag-grid header checkbox selection event

  Just want to know whether we can distinguish between all row selection and individual row selection in ag-grid(via header checkbox selection). Is there a method or property associated with ag-grid to tell this difference?
• Ag-Grid : Modify data in one grid while applying filter in another Grid

  I have 2 grids side by side as per design and both will have same no.of rows. i need to apply filter in one column of grid1 and same amount rows should be in both the grids after applying filter also.

  Component.ts

   GridOptions = <GridOptions>{
     enableFilter: true,
     rowSelection: 'multiple',
     enableSorting: false,
     enableColResize: true,
     singleClickEdit: true,
     animateRows: true,
     headerHeight: 50,
     rowClass: 'rowClass',
     headerClass: 'GridHeader',
     overlayNoRowsTemplate: " ",
     context: {
       componentParent: this
     },    
     onFilterModified: this.GridFilter
  };
  
  GridColumnDefs = [{
    headerName: "Student Name", field: "name", width: 90, editable: true, 
    filter: 'agTextColumnFilter'
  },];
  
  releaseFilter(params: any) {
    var data = params.api.getRenderedNodes()
  }
  

  I got the filtered rows of grid1 but dont know how to set the filtered index for the second grid. Thanks in advance
• Ag-Grid - Tooltips (Bootstrap) when cell is rendered

  I am looking to trigger a specific Javascript on a cell as soon as it is rendered (Bootstrap tooltip to be specific). The table has >30 columns and >500 rows. I auto size the columns.

  I trigger the tooltip init onVirtualColumnsChanged and onViewportChanged as well as onGridReady (just to be sure ^^'). But autosize does not seem to trigger any of these. The columns which come into view after autosize do not have tooltips accordingly. Even if I trigger tooltips at the end of autosizing.

  Does anybody have any idea what would be the best to have Bootstrap tooltips inited on potentially each cell as soon as it is rendered?

  Thanks a lot in advance
• Ag-grid checkbox render based on column data?

      import React, { Component } from 'react';
      import ReactHighcharts from 'react-highcharts';
      import axios from 'axios';
      import { Link, browserHistory } from 'react-router';
      import { AgGridReact, AgGridColumn } from "ag-grid-react";
      import 'ag-grid/dist/styles/ag-grid.css';
      import 'ag-grid/dist/styles/ag-theme-material.css';
      class Payments extends React.Component {
          constructor(props) {
              super(props);
              this.state = {
  
                 rowSelection: "multiple",
                 columnDefs: [
                      {
                          headerName: "Paid For",
                          field: "paid_for",
                          width: 250
                      },
                      {
                          headerName: 'Amount',
                          field: 'amount',
                          width: 250
                      },
                      {
                          headerName: 'Payment Date',
                          field: 'payment_date',
                          width: 250
                      },
  
                      {
                          headerName: 'Reccurence',
                          field: 'recurrence_time',
                          width: 250
                      },
  
  
  
                      {
                          headerName: "Status",
                          field: "status",
                          checkboxSelection: true,
                          width: 250
                      },
  
                  ],
  
                  paymentsrequest: [],
                  rowData: []
              };
  
          }
              onGridReady(params) {
                  this.gridApi = params.api;
                  this.columnApi = params.columnApi;
                  this.gridApi.sizeColumnsToFit();
                  window.onresize = () => {
                      this.gridApi.sizeColumnsToFit();
                  }
  
  
              }
  
  
              onSelectionChanged() {
                  var selectedRows = this.gridApi.getSelectedRows();
  
                  let pendingpayments = selectedRows.filter(el => el.status == "Pending")
                  let paymentsrequest = [];
                  pendingpayments.forEach(function(selectedRow, index) {
  
                    let paymentslistobject = {
                      'payment_date': selectedRow["payment_date"],
                      'status': selectedRow["status"]
                    };
                    paymentsrequest.push(paymentslistobject);
                });
  
                  this.setState({
                      paymentsrequest
                  });
  
           }
  
  
  
  
          render() {
             return (
                  <AgGridReact
                  columnDefs={this.state.columnDefs}
                  rowSelection={this.state.rowSelection}
                  onGridReady={this.onGridReady.bind(this)}
                  groupSelectsChildren={true}
                  suppressRowClickSelection={true}
                  rowData={[{paid_for: 'Plan C + B', amount: '10000',payment_date: '2018-11-14',recurrence_time: 'Quarterly',status: 'Paid'}, {paid_for: 'Plan C + B', amount: '10000',payment_date: '2018-11-14',recurrence_time: 'Quarterly',status: 'Pending'}, {paid_for: 'Plan C + B', amount: '10000',payment_date: '2018-11-15',recurrence_time: 'Quarterly',status: 'Pending'}]}                                   
                  onSelectionChanged={this.onSelectionChanged.bind(this)}>
  
              </AgGridReact>
  
              )
          }
      }
  
      export default Payments;
  

  I am using react ag-grid component and I want the input box for the status pending alone instead of all the rows, I have make use of cell-rendered but it doesnot worked,

  How to render check box only for the status Pending, Check box should not be shown which has status Paid.

  Solution would help me alot,

  I have read all the documents but i am unable to make use of that, any one please guide me in this.
• How to batch select rows in ag-Grid

  Is there a way to batch select rows in ag-Grid?

  Specifically, when I first load data into my grid, I also get from the server a list of rows that should be initially selected. Right now, the only way I know of to select them is to:

  this.state.gridApi.forEachNode((node) => {
    if (isInitiallySelected(node.data) {
      node.setSelected(true);
    }
  });
  

  However, this fires an oneSelectionChange event for each iteration. This causes some problems in my UI, since I show feedback (a toast) when rows are selected/de-selected.

  Is there a way to tell the grid on initial load which rows should be selected?

  If not, is there a way via the API to batch-select rows?

  If not, is there a way to conditionally silence the onSelectionChange event when doing a node.setSelected() call?
• Using React with an existing application with JSX

  We are planning to switch new technologies like react for my CMS project which is under development for 10 years.

  Until now everything was simple and plain on the front end.

  First include jquery.js then if necessary include the components and third party scripts, then code and dance with the DOM.

  But now while trying to jump into a higher level of technology and different approach, things can easily get very complicated for me.

  After spending more than 10 hours with React documents and tutorials I have a very good understanding about what it is and how it works.

  But I realized that I am very unfamiliar with some popular concepts. I never used node.js, never used npm, babel, webpack, and may other many "new" things I have seen every where. I am face to face with these tools because of React and I am convinced that these are the inevitable for modern front end development.

  Now the question

  Our CMS runs on PHP and depends on MooTools heavily at the front end. Instead of a complete rewrite of a 10 years old CMS I just want to try new technologies partially for some cases. Decided to starting with React.

  For the case I want to integrate ag-Grid to React also.

  What I did not understand is that how to bring all these tools together.

  I won't be able to use the simply include js way of react because of ag-Grid.

  In the examples the code written has some JSX. Which means that we write JSX and run it translated for the browser to test if it is ok.

  • Each time before testing do I need to translate these files?
  • And more over if the files are translated does debugging become very complicated?
  • Can babel make it on the run time? If yes is it a good practice.
  • There are lots of file in the node_modules folder. Which of them should I include for production?

  All sources on the net are very theoretical and assumes a knowledge. Need some guidance for best practices.

  There are lots of questions and not a single step by step guide from beginning to production.