0

In angular slickgrid, I am using custom angular component to display the user info in a click action. custom angular component rendering takes some time when I scrolling slickgrid the custom angular component showing formatter content for that time. Is possible to reduce the custom angular component rendering time. My requirement is to render custom angular component instantly. Kindly provide the perfect solution

GRID OPTIONS:

public gridOptions: GridOption = {
    enablePagination : true,
    enableAutoResize: true,
    enableSorting: true,
    enableFiltering: true,
    i18n: this.translateService,
    gridMenu: {
        hideExportExcelCommand: true,
        hideExportCsvCommand: true,
        customItems: [{
            command: "cspfm-excel-export",
            titleKey: "EXPORT_TO_EXCEL",
            iconCssClass: "fa fa-file-excel-o",
            action: (event, callbackArgs) => {
                this.excelExport(event, callbackArgs)
            }
        }, {
            command: "cspfm-csv-export",
            titleKey: "EXPORT_TO_CSV",
            iconCssClass: "fa fa-download",
            action: (event, callbackArgs) => {
                this.excelExport(event, callbackArgs)
            }
        }, {
            command: "cspfm-toggle-pagination",
            titleKey: "Toggle pagination",
            iconCssClass: "fa fa-bookmark",
            action: (event, callbackArgs) => {
                this.togglePagination(event, callbackArgs)
            }
        }],
    },
    autoResize: {
        containerId: this.gridContainerId,
        calculateAvailableSizeBy: 'container'
    },
    exportOptions: {
        exportWithFormatter: true
    },
    excelExportOptions: {
        exportWithFormatter: true,
    },
    headerMenu: {
        hideColumnHideCommand: true
    },
    enableTranslate: true,
    presets: {
        sorters: [{
            columnId: this.tableColumnInfo['pfm147773']['pfm147773_employeeid']['prop'],
            direction: 'ASC'
        }],
    },
    enableAsyncPostRender: true, // for the Angular PostRenderer, don't forget to enable it
    asyncPostRenderDelay: 0,    // also make sure to remove any delay to render it
    params: {
        angularUtilService: this.angularUtilService // provide the service to all at once (Editor, Filter, AsyncPostRender)
    },
    checkboxSelector: {
        // you can toggle these 2 properties to show the "select all" checkbox in different location
        hideInFilterHeaderRow: false,
    },
    rowSelectionOptions: {
        // True (Single Selection), False (Multiple Selections)
        selectActiveRow: false,
    },
    enableCheckboxSelector: true,
    enableRowSelection: true,
};

COLUMN DEFINITIONS:

public columnDefinitions: Array<Column> = [
        {
            id: this.tableColumnInfo['pfm138993_cspfmaction']['prop'],
            nameKey: this.tableColumnInfo['pfm138993_cspfmaction']['label'],
            field: this.tableColumnInfo['pfm138993_cspfmaction']['prop'],
            minWidth: 100,
            type: FieldType.unknown,
            asyncPostRender: this.renderActionAngularComponent.bind(this),
            formatter: () => " ",
            params: {
                component: cspfmactionweb,
                angularUtilService: this.angularUtilService,
                actionInfo: this.tableColumnInfo['pfm138993_cspfmaction']['actionInfo'],
            },
            filterable: false,
            sortable: false,
            excludeFromExport: true,
            excludeFromHeaderMenu: true
        }
      ]

TABLE COLUMNINFO:

public tableColumnInfo: { [key: string]: FieldInfo } = {
        pfm138993_cspfmaction: {
            label: "Info",
            fieldName: "cspfmaction",
            prop: "cspfmaction1",
            fieldType: "ACTION",
            child: "",
            dateFormat: "",
            mappingDetails: "",
            currencyDetails: "",
            actionInfo: [
                {
                    actionIcon: "ios-information-circle-outline",
                    actionName: "Angular",
                    actionType: "cspfmaction2",
                    sourceId: "12345",
                    objectName: ""
                }
            ]
        }
      }

RENDER METHOD:

renderActionAngularComponent(cellNode: HTMLElement, row: number, dataContext: any, colDef: Column) {
        if (colDef.params.component) {
            const componentOutput = this.angularUtilService.createAngularComponent(colDef.params.component);

            Object.assign(componentOutput.componentRef.instance,
                { selectedItem: dataContext, actionConfig: colDef.params.actionInfo });

            componentOutput.componentRef.instance.OnAction.subscribe((info) => {
                console.log("Action:", JSON.stringify(info));
            })
            setTimeout(() => $(cellNode).empty().html(componentOutput.domElement));
        }
    }

CURRENT OUTPUT:

enter image description here

Software Version:

Angular : 7.3.5

Angular-Slickgrid : 2.17.10

TypeScript : 3.1.6

Operating System : Windows 10

Node : 10.16.3

NPM : 6.9.0

Rajkumar
  • 131
  • 5
  • That's the side effect of using Angular component, I always try to avoid them (I didn't use any yet) and you should focus on using/creating Custom Formatters instead, they are quick and instant. The reason why it's slower with an Angular component is because it needs to wait a full cycle (combined with the `asyncPostRenderer` which possibly adds an extra cycle) before being able to render the DOM while a Custom Formatter always return an html string and that is instant since it doesn't need to wait for any cycle, it's rendered right away. `asyncPostRenderer` cannot be cached either – ghiscoding Jun 30 '20 at 15:12
  • I added a note in the [Wiki](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Formatters#using-angular-component-with-asyncpostrenderer), that explain why it's slower and why you should always focus on using Custom Formatters as much as possible... also to give you a better idea of how slow it is, take a look at this [SlickGrid demo](https://6pac.github.io/SlickGrid/examples/example10a-async-post-render-cleanup.html) which is regular javascript and it's also slow. All that to say, you are stuck with the slowness, go with Custom Formatters instead ;) – ghiscoding Jun 30 '20 at 15:26

0 Answers0