Search code examples
angularvmware-clarity

Update values in Colspan(Summary Row) in the Datagrid on filter

Hello and thank you in advance!

I'm using clarity UI(13.7.0) with angular(13). I've hacked out a summer row, but when the data has been filtered, the values don't update. So what's the best way to handle this issue?

<clr-dg-row id="total">
  <ng-container *ngFor="let column of display_columns.columns">
    <ng-container [ngSwitch]="column.value">
      <clr-dg-cell *ngSwitchCase="'key'"> Totals: </clr-dg-cell>
      <clr-dg-cell *ngSwitchCase="'estimated'" class="center-cell">
        {{ total_estimated | number: "1.1" }}
      </clr-dg-cell>
      <clr-dg-cell *ngSwitchCase="'remaining'" class="center-cell">
        {{ total_remaining | number: "1.1" }}
      </clr-dg-cell>
      <clr-dg-cell *ngSwitchCase="'logged'" class="center-cell">
        {{ total_logged | number: "1.1" }}
      </clr-dg-cell>
      <clr-dg-cell *ngSwitchCase="'estimateTimeDifference'" class="center-cell">
        {{ total_estimate_time_difference | number: "1.1" }}
      </clr-dg-cell>
      <clr-dg-cell *ngSwitchDefault>&nbsp;</clr-dg-cell>
    </ng-container>
  </ng-container>
</clr-dg-row>

Here is the js method that does the calculation.

public getTotals(): IssueContainer {
  this.issue_container.issues.forEach((_issue) => {
    const issue: Issue = { ..._issue
    };
    if (issue.estimated) {
      this.total_estimated += issue.estimated;
    }
    if (issue.logged) {
      this.total_logged += issue.logged;
    }
    if (issue.remaining) {
      this.total_remaining += issue.remaining;
    }
    if (issue.estimateTimeDifference) {
      this.total_estimate_time_difference += issue.estimateTimeDifference;
    }
  });

  this.issue_container.totalEstimated = this.formatToOneDecimalPlace(
    this.total_estimated
  );
  this.issue_container.totalLogged = this.formatToOneDecimalPlace(
    this.total_logged
  );
  this.issue_container.totalRemaining = this.formatToOneDecimalPlace(
    this.total_remaining
  );
  this.issue_container.totalEstimateTimeDifference =
    this.formatToOneDecimalPlace(this.total_estimate_time_difference);
  return this.issue_container;
}

Somehow, I need to call the getTotals() method when the data has been filtered. Which is using the default filtering from clarity. Although, I'm not sure if this will work because the data might still be the same, and it could just be hidden. I tried to find a way to see if clarity stores the filtered values into an accessible array somewhere, but I couldn't find anything.

This is what the Colspan looks like. enter image description here

Solution

  • So to make this happen I had to use a custom filter and track the values post a filter.

    public onFilterChangedHandler(selected_items: FilterColumnValues) {
  if (Object.keys(selected_items).length > 0) {
    // add the newly selected items to the total filtered items
    this.filter_column_values = Object.assign(
      this.filter_column_values,
      selected_items
    );

    // filter the data to match the applied datagrid filters
    this.rows_filtered = this.datagrid_service.filteredDatagridContent(
      this.datagrid_content,
      this.filter_column_values
    );
    this.getTotals()
  }
}

    Then simply call the getTotals() on filter change.