Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
335
PivotGrid - When I click a cell, i need to know the field names and and values for the row and column dimensions
posted

I am working in Angular v17 with the Pivot Grid, v17.2. I have a pivot grid with 2 nested columns (Color and Coating) and 2 nested rows (State and Material). I am showing the number of orders as my value in the pivot grid. I have configured the cellClick Event so that I can see the event properties after I click. How can I get the values for Color, Coating, State and Material from the event.cell object that is exposed by the cellClick event?

To clarify - once I click on a cell, I need to know Color = 'a', Coating = 'b', State = 'c', and Material = 'd', so that I can query my database with that where clause to pull up all of the orders that match that criteria. Also, I would need to know the column name and values in any filters which were specified.  So if I have a filter on Group and I filtered to Groups A & B, I need to know that the filter is active and what is the field name(s) of the active filter(s), and what are the list of values used in the filters.

I was able to pull a map out of grid that gave me the row dimensions (both field names and values), but I have not seen where I can get the column dimension field names and values.

I was able to see the column dimension values by interrogating the _header property of the IgxGridCell, but I don't see where I would find the field name to relate to the value.

cellClick(event: IGridCellEventArgs) {
  let cc: IgxGridCell = event.cell as IgxGridCell
  console.log({cc})
  this.cc = cc

  let tc: any = {};
  Object.assign(tc, this.cc.column);
  do {
    console.log(tc._header)
    tc = tc.parent
  }
  while (tc);

  let idx: number = cc['_rowIndex']

  let r = this.grid1.dataView[idx]
  console.log(r)

  let arr1 = Array.from(r.dimensionValues.entries());
  arr1.forEach((x:any) => {
    console.log(x[0],x[1])
  })
Finally, I don't know how I would iterate through all filters to get the field names for each filter, and the values that were selected in each filter.
I am thinking that there must be some simple solution to this that I am not able to see by poking around in the grid and clicked cell object.

Thanks in advance.

I also posted this question on Discord, but I am not sure whether Discord is monitored by IG Support.

Parents
  • 140
    Offline posted

    Hello Walter,

    As per your request, I’ve implemented the following solutions to help you retrieve column names, row names, and filter information from the clicked cell in the IgniteUI Pivot Grid.

    1. Retrieving Clicked Cell's Column and Row Names

    In the onCellClick event, I’ve written a method that retrieves the column and row names when a user clicks on a cell. Here is a brief summary of the implementation:

    • Column Names: We extract the clicked column’s field and split it to obtain the nested levels.
    • Row Names: We retrieve the row hierarchy by traversing the data view and capturing all the dimension values up to the top-level row.

      public onCellClick(event) {
          let cc: IgxGridCell = event.cell as IgxGridCell;
          let idx: number = cc['_rowIndex'];
        
          let r = this.grid1.dataView[idx];
          let rowValuesArray = [];
          rowValuesArray.push(r.dimensionValues.entries());
          
          for (let i = r.level; i > 1; i--) {
              while (i == r.level) {
                  r = this.grid1.dataView[--idx];
              }
              rowValuesArray.push(r.dimensionValues.entries());
          }
          rowValuesArray = rowValuesArray.reverse();
          let columnValues = cc.column.field.split('-').reverse();
      
          console.log(columnValues);
          console.log(rowValuesArray);
      
          this.processFilterExpressionTree();
      }
    1. Extracting Filtering Information

    To handle the filtering tree, I've implemented the following function which allows you to inspect the current filtering expressions applied to the grid. This function loops through the filter tree, and if any filtering has been applied, it will log the conditions, fields, and values.

    This will help you extract all the necessary information from the filtering tree, including the conditions and values of the filters that have been applied.

    public processFilterExpressionTree() {
        const filterTree = this.grid1.filteringExpressionsTree;
    
        if (filterTree && filterTree.filteringOperands.length > 0) {
            for (let i = 0; i < filterTree.filteringOperands.length; i++) {
                const operand = filterTree.filteringOperands[i];
    
                if (this.isFilteringExpressionsTree(operand)) {
                    console.log(`Filtering Field: ${operand.fieldName}`);
                    for (let j = 0; j < operand.filteringOperands.length; j++) {
                        const innerOperand = operand.filteringOperands[j];
                        if (!this.isFilteringExpressionsTree(innerOperand)) {
                            console.log(`Condition: ${innerOperand.condition.name}`);
                            console.log(`Field: ${innerOperand.fieldName}`);
                            console.log(`Values:`);
                            if (innerOperand.searchVal instanceof Set) {
                                for (const value of innerOperand.searchVal) {
                                    console.log(value);
                                }
                            } else {
                                console.log(innerOperand.searchVal);
                            }
                        }
                    }
                } else {
                    console.log("Unknown operand type detected.");
                }
            }
        } else {
            console.log("No filters are currently applied.");
        }
    }

    StackBlitz Sample

    I have also created a sample on StackBlitz for you to test and review. Please feel free to run the sample and see if it meets your requirements.

    Also, regarding future inquiries, if you encounter any issues similar to this one, please continue creating support cases as you've done here, rather than reaching out via Discord. This way, we can better track the status of your requests and provide more structured assistance.

    Looking forward to your feedback!

    Best Regards,

    Arkan Ahmedov

    Infragistics

Reply Children