Performance improvements

community-modules/core/src/ts/rendering/cellComp.ts

@@ -30,7 +30,7 @@ import { TooltipFeature } from "../widgets/tooltipFeature";
 import { TooltipParentComp } from '../widgets/tooltipFeature';
 import { setAriaColIndex, setAriaDescribedBy, setAriaSelected } from "../utils/aria";
 import { get, getValueUsingField } from "../utils/object";
-import { escapeString } from "../utils/string";
+import {escapeString, stringOrNull} from "../utils/string";
 import { exists, missing } from "../utils/generic";
 import { addOrRemoveCssClass, clearElement, addStylesToElement, isElementChildOfClass, isFocusableFormField } from "../utils/dom";
 import { last, areEqual, pushAll, includes } from "../utils/array";
@@ -181,7 +181,7 @@ export class CellComp extends Component implements TooltipParentComp {
  this.setupColSpan();
  this.rowSpan = this.column.getRowSpan(this.rowNode);
 
- this.setTemplate(this.getCreateTemplate());
+ this.setElement(this.getCreateElement());
 
  this.afterAttached();
 
@@ -191,6 +191,57 @@ export class CellComp extends Component implements TooltipParentComp {
  this.startEditingIfEnabled();
  }
  }
+ private getCreateElement() {
+ var isUnselectable = !this.beans.gridOptionsWrapper.isEnableCellTextSelection();
+ var templateParts = [];
+ var col = this.column;
+ var width = this.getCellWidth();
+ var left = this.modifyLeftForPrintLayout(this.getCellLeft());
+ var valueToRender = this.getInitialValueToRender();
+ var hasTemplate = get(this.column, 'colDef.template', null);
+ var value = hasTemplate ? valueToRender : stringOrNull(valueToRender);
+ this.tooltip = this.getToolTip();
+ var tooltip = stringOrNull(this.tooltip);
+ var colId = stringOrNull(col.getId());
+ var stylesFromColDef = this.preProcessStylesFromColDef();
+ var cssClasses = this.getInitialCssClasses();
+ var stylesForRowSpanning = this.getStylesForRowSpanning();
+ var colIdx = stringOrNull(this.beans.columnController.getAriaColumnIndex(this.column).toString());
+
+ const el = document.createElement('div');
+ el.setAttribute('tabindex', '-1');
+ if (isUnselectable) {
+ el.setAttribute('unselectable', 'on');
+ }
+ el.setAttribute('role', 'gridcell');
+ el.setAttribute('aria-colindex', colIdx!);
+ el.setAttribute('comp-id', this.getCompId() as unknown as string);
+ el.setAttribute('col-id', colId!);
+ el.className = cssClasses.join(' ');
+ if (this.beans.gridOptionsWrapper.isEnableBrowserTooltips() && exists(tooltip)) {
+ el.setAttribute('title', tooltip);
+ }
+ if (this.rangeSelectionEnabled) {
+ el.setAttribute('aria-selected', (this.rangeCount ? 'true' : 'false'))
+ }
+
+ el.setAttribute('style', "width: " + Number(width) + "px; left: " + Number(left) + "px; " + stringOrNull(stylesFromColDef) + " " + stringOrNull(stylesForRowSpanning))
+ if (this.usingWrapper) {
+ var wrapper = this.getCellWrapperElement(value, hasTemplate);
+ if (wrapper) {
+ el.appendChild(wrapper);
+ }
+ } else if (value != null) {
+ if (hasTemplate) {
+ el.innerHTML = value;
+ } else {
+ const childNode = document.createTextNode(value)
+ el.appendChild(childNode);
+ }
+ }
+
+ return el;
+ };
 
  private getCreateTemplate(): string {
  const unselectable = !this.beans.gridOptionsWrapper.isEnableCellTextSelection() ? ' unselectable="on"' : '';
@@ -243,6 +294,34 @@ export class CellComp extends Component implements TooltipParentComp {
  return templateParts.join('');
  }
 
+ private getCellWrapperElement(value: any, hasTemplate: any) {
+ if (value === void 0) {
+ value = '';
+ }
+
+ var isUnselectable = !this.beans.gridOptionsWrapper.isEnableCellTextSelection()
+ var el = document.createElement('div');
+ el.setAttribute('ref', 'eCellWrapper')
+ el.classList.add('ag-cell-wrapper');
+ el.setAttribute('role', 'presentation');
+ var child = document.createElement('span');
+ child.setAttribute('ref', 'eCellValue');
+ child.setAttribute('role', 'presentation');
+ child.className = CSS_CELL_VALUE;
+ if (isUnselectable) {
+ child.setAttribute('unselectable', 'on');
+ }
+ if (hasTemplate) {
+ child.innerHTML = value;
+ } else {
+ const textNode = document.createTextNode(value != null ? value : '');
+ child.appendChild(textNode);
+ }
+
+ el.appendChild(child);
+ return el;
+ }
+
  private getCellWrapperString(value: string | null = ''): string {
  const unselectable = !this.beans.gridOptionsWrapper.isEnableCellTextSelection() ? ' unselectable="on"' : '';
  const wrapper = /* html */
@@ -737,7 +816,11 @@ export class CellComp extends Component implements TooltipParentComp {
  const valueToUse = this.getValueToUse();
 
  if (valueToUse != null) {
- this.eCellValue.innerHTML = escapeString(valueToUse) || '';
+ var textNode = document.createTextNode(valueToUse || '');
+ while(this.eCellValue.firstChild) {
+ this.eCellValue.firstChild.remove();
+ }
+ this.eCellValue.appendChild(textNode);
  }
  }
  }

community-modules/core/src/ts/rendering/row/rowComp.ts

@@ -4,7 +4,7 @@ import { ICellRendererComp } from "../cellRenderers/iCellRenderer";
 import { Beans } from "../beans";
 import { RowNode } from "../../entities/rowNode";
 import { setDomChildOrder } from "../../utils/dom";
-import { escapeString } from "../../utils/string";
+import {escapeString, stringOrNull} from "../../utils/string";
 import { FullWidthKeys, FullWidthRenderers, RowController, RowType } from "./rowController";
 import { Column } from "../../entities/column";
 import { CellComp } from "../cellComp";
@@ -35,8 +35,7 @@ export class RowComp extends Component {
  this.pinned = pinned;
  this.controller = controller;
 
- const template = this.createTemplate();
- this.setTemplate(template);
+ this.setElement(this.createElement());
 
  this.afterRowAttached();
 
@@ -226,6 +225,42 @@ export class RowComp extends Component {
  return this.fullWidthRowComponent;
  }
 
+ private createElement() {
+ var con = this.controller;
+ var templateParts = [];
+ var rowHeight = this.rowNode.rowHeight;
+ var rowClasses = con.getInitialRowClasses(this.pinned).join(' ');
+ var rowIdSanitised = stringOrNull(this.rowNode.id!);
+ var userRowStyles = con.preProcessStylesFromGridOptions();
+ var businessKey = stringOrNull(con.getRowBusinessKey()!);
+ var rowTopStyle = con.getInitialRowTopStyle();
+ var rowIdx = this.rowNode.getRowIndexString();
+ var headerRowCount = this.beans.headerNavigationService.getHeaderRowCount();
+ var el = document.createElement('div');
+ el.setAttribute('role', 'row');
+ el.setAttribute('row-index', rowIdx);
+ el.setAttribute('aria-rowindex', (headerRowCount + this.rowNode.rowIndex! + 1) as unknown as string);
+ if (rowIdSanitised) {
+ el.setAttribute('row-id', rowIdSanitised);
+ }
+ if (businessKey) {
+ el.setAttribute('row-business-key', businessKey);
+ }
+ el.setAttribute('comp-id', this.getCompId() as unknown as string);
+ el.className = rowClasses;
+ if (con.isFullWidth()) {
+ el.setAttribute('tabindex', "-1");
+ }
+ if (this.beans.gridOptionsWrapper.isRowSelection()) {
+ el.setAttribute('aria-selected', this.rowNode.isSelected() ? 'true' : 'false');
+ }
+ if (this.rowNode.group) {
+ el.setAttribute('aria-expanded', this.rowNode.expanded ? 'true' : 'false');
+ }
+ el.setAttribute('style', "height: " + rowHeight + "px; " + rowTopStyle + " " + userRowStyles);
+ return el;
+ }
+
  private createTemplate(): string {
  const con = this.controller;
 

community-modules/core/src/ts/utils/string.ts

@@ -172,6 +172,10 @@ export function capitalise(str: string): string {
  return str[0].toUpperCase() + str.substr(1).toLowerCase();
 }
 
+export function stringOrNull(value: number | string | null) {
+ return value == null ? null : value.toString().toString();
+}
+
 export function escapeString(toEscape?: string | null): string | null {
  // we call toString() twice, in case value is an object, where user provides
  // a toString() method, and first call to toString() returns back something other

community-modules/core/src/ts/widgets/component.ts

@@ -204,6 +204,10 @@ export class Component extends BeanStub {
  }
  }
 
+ public setElement(eGui: any, paramsMap?: any) {
+ this.setTemplateFromElement(eGui, paramsMap);
+ }
+
  public setTemplate(template: string | null, paramsMap?: { [key: string]: any; }): void {
  const eGui = loadTemplate(template as string);
  this.setTemplateFromElement(eGui, paramsMap);