Integrate Shared agGrid Cell Editors in Convertigo Pages

📌 Overview

This article explains how to integrate shared agGrid cell editor components into Convertigo pages. It covers the use of shared components, class aliasing, and agGrid configuration for dynamic cell editing.

🎯 Use Case

You want to reuse custom cell editors across multiple Convertigo pages using agGrid. These editors are built as shared components and can be Convertigo Palette-based or HTML/CSS-based, depending on the context.

🛠️ Prerequisites

Convertigo Studio installed
agGrid integrated into your Convertigo project
Shared components created and available under src/app/components
Basic knowledge of TypeScript and Angular component structure

🧩 Page Setup

🔹 IonEditor Page

This page uses agGrid with two shared components:

IonTextEditor
IonListEditor

Both are built using Ionic components from the Convertigo palette.

🔹 HtmlEditors Page

This page uses agGrid with the shared component:

HtmlListEditor

This component is composed of:

A Fragment for the HTML template
A Style for the CSS rules

📦 Importing Shared Components

Each page must import the shared component class and create an alias for use in agGrid’s columnDefs.

Example: Import and Alias

CODE

/*Begin_c8o_PageImport*/
import { AgGridCellEditorsSample_HtmlListEditor } from "../../components/aggridcelleditorssample.htmllisteditor/aggridcelleditorssample-htmllisteditor";
/*End_c8o_PageImport*/

/*Begin_c8o_PageDeclaration*/
// htmlListEditor: alias to use as cellEditor in columnDefs
public htmlListEditor : typeof AgGridCellEditorsSample_HtmlListEditor = AgGridCellEditorsSample_HtmlListEditor;
/*End_c8o_PageDeclaration*/

Usage in agGrid

CODE

{
  headerName: 'Customer*',
  field: 'customer',
  cellEditor: htmlListEditor,
  ...
}

🧱 Component Structure

🔹 Required Imports

CODE

/*Begin_c8o_CompImport*/
import { ICellEditorAngularComp } from 'ag-grid-angular';
import { ICellEditorParams } from 'ag-grid-community';
...
/*End_c8o_CompImport*/

🔹 Component Declarations

CODE

/*Begin_c8o_CompDeclaration*/
params!: ICellEditorParams;
items: CheckListItem[] = [];
filteredItems: CheckListItem[] = [];
searchText: string = '';
/*End_c8o_CompDeclaration*/

🔹 Component Methods

CODE

/*Begin_c8o_CompFunction*/
agInit(params: ICellEditorParams): void {
  this.params = params;
  ...
}
getValue(): any {
  return this.items.filter(it => it.selected).map(it => it.value);
}
/*End_c8o_CompFunction*/

🧩 Creating a New Shared Component

To replicate the behavior of HtmlListEditor, create a new shared component named CheckboxSelectorEditor.

🔹 Component Path

CODE

src/app/components/projectname.checkboxselectoreditor

🔹 Generated Class Name

CODE

ProjectName_CheckboxSelectorEditor

Located in:

CODE

projectname-checkboxselectoreditor.ts

🔹 Page Integration

Import the class and create an alias:

CODE

/*Begin_c8o_PageImport*/
import { ProjectName_CheckboxSelectorEditor } from "../../components/projectname.checkboxselectoreditor/projectname-checkboxselectoreditor";
/*End_c8o_PageImport*/

/*Begin_c8o_PageDeclaration*/
public checkboxSelectorEditor : typeof ProjectName_CheckboxSelectorEditor = ProjectName_CheckboxSelectorEditor;
/*End_c8o_PageDeclaration*/

Use the alias in agGrid:

CODE

{
  headerName: 'Options',
  field: 'options',
  cellEditor: checkboxSelectorEditor,
  ...
}

Go get the sample demo project here: agGridCellEditorsSample