Hello Walter,

Thank you for your feedback! Based on your requirements, I’ve created a solution that enables you to dynamically retrieve both column and row field names along with their respective values in the Pivot Grid.

Solution Overview

In the provided code, I implemented a method to ensure that we can access both row and column information from a clicked cell:

1. Retrieving Column Field Names and Values: The getColumnFieldNamesAndValues method is a recursive function that traverses the column hierarchy in the pivotConfigHierarchy.columns. This allows us to dynamically map each field name (like AllColors, Color, Coating) to the appropriate value from the clicked column, even if the hierarchy has varying levels of nesting.

Here’s an example of how it works:

 

public getColumnFieldNamesAndValues(cell) {
    const columnValues = cell.column.field.split('-');
    const columnFieldNames = [];
    
    // Recursive function to traverse the child levels in column hierarchy
        const traverseChildLevels = (level, names, index) => {
            names.push(level.memberName);
            if (level.childLevel && index {
            traverseChildLevels(column, columnFieldNames,1);
        });

        // Create a Map of field names to corresponding values
        const columnMap = new Map();
        columnFieldNames.forEach((fieldName, index) => {
            columnMap.set(fieldName, columnValues[index]);
        });

        console.log("Column Field Names and Values:", Array.from(columnMap.entries()));
        return columnMap;
    }

This function outputs a map of field names and values, making it easier to interpret which values belong to which fields in nested structures.

The code I provided is designed to handle complex and dynamic scenarios where there may be significant nesting, ensuring flexibility if your configuration changes frequently.

I have also prepared a sample on StackBlitz. Please feel free to test it, and don’t hesitate to reach out if there’s anything more you’d like to discuss.

Best Regards,
Arkan Ahmedov

Infragistics

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();
  }

2. 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

Hello,

Thank you for your feedback and for providing the screen recording to illustrate the issue. I have carefully reviewed the behavior you described and have revised the implementation to ensure that the checkbox in the cell editor accurately reflects the underlying value.

To address the issue where the checkbox did not initially show the correct value when editing a cell, I have made the following updates:

Utilized the cellEditEnter Event: This allows us to correctly update the checkboxModel property when a cell enters edit mode.

Updated the checkboxModel: Ensures that the checkbox accurately reflects the cell's value before any changes are made.

This updated implementation should resolve the issue where the checkbox did not accurately reflect the cell's value upon entering edit mode. Please review the revised implementation on StackBlitz and let me know if it meets your requirements.

Thank you for your patience and cooperation. If you have any further questions or need additional adjustments, feel free to reach out.

Best Regards,

Arkan Ahmedov

Infragistics

Hello,

After carefully reviewing your requirements, I have prepared a StackBlitz sample to demonstrate one way to achieve the desired functionality in IgniteUI for Angular. Below is a brief explanation of the solution implemented:

Solution Overview:

1. Grid Configuration:
   • The igx-grid is configured to handle a string field Status where the values '1' and '0' are used to represent checked and unchecked states respectively.
2. Cell Display Template:
   • A custom cell template displays a check icon when the value is '1' and a clear icon when the value is '0'. This is achieved using conditional rendering within the igxCell template.
3. Cell Editor Template:
   • A custom cell editor template includes an igx-checkbox. The checkbox's checked state is bound to the cell's edit value. When the checkbox state changes, an event handler updates the cell's edit value accordingly.
4. Styling:
   • Both the display and editor templates are styled using a CSS class checkbox-style to ensure the checkbox and icons are centered within the cell.
5. Handling Checkbox Changes:
   • A method onCheckboxChange updates the cell's edit value based on the checkbox state, converting the boolean state to '1' or '0'.

Here is a snippet of the code implemented:

 

You can view and interact with the full implementation on StackBlitz.

Please review the sample and let me know if you have any questions or need further adjustments. I'm looking forward to your feedback.

Best Regards,

Arkan Ahmedov

Infragistics