Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
350
using custom components inside igx-grid
posted

Hello dear Infragistics Team,

i am currently having trouble using custom angular components inside of my igx-grid. For example, i created a paginator-component which contains the igx-paginator with a specific styling and configuration. This will help the consistency of our products. The component looks like this:

paginator.component.html

<ng-template [ngIf]="paginatorConfig && paginatorConfig.totalCount && paginatorConfig.totalCount > 0">
    <igx-paginator #paginator [hidden]="hidden"
                   [totalRecords]="paginatorConfig.totalCount"
                   [(page)]="paginatorConfig.page"
                   [(perPage)]="paginatorConfig.perPage"
                   [selectOptions]="paginatorConfig.selectOptions"
                   (pageChange)="paginate($event)"
                   (perPageChange)="perPageChange($event)">
        <igx-paginator-content class="paginator-content">
            <igx-page-size class="paginator-page-size" #pageSize></igx-page-size>
            <div class="custom-nav-text">{{ paginatorConfig.start }}-{{ paginatorConfig.end }} von {{ paginatorConfig.totalCount }}</div>
            <igx-page-nav class="paginator-page-nav"></igx-page-nav>
        </igx-paginator-content>
    </igx-paginator>
</ng-template>

and in the component i use the grid, it looks like this:

<igx-grid #grid1 [autoGenerate]="false" [data]="gridData" height="350px" width="100%" [clipboardOptions]="options" [pinning]="pinningConfig" [locale]="localeString">

            <ng-template [ngIf]="paginatorConfig">
                <lib-paginator [paginatorConfig]="paginatorConfig" [hidden]="false"></lib-paginator>
            </ng-template>

            <ng-container *ngFor="let gridColumn of gridColumns">

                <ng-container *ngIf="gridColumn.isEnabled">

                    <ng-container *ngIf="!isColumnAuto(gridColumn)">
                        <igx-column [width]="getWidthForGridColumn(gridColumn)" header="{{ gridColumn.translationKey | l }}" field="values.{{ gridColumn.dataSourceProperty }}.value">

                            <ng-template igxCell let-cell="cell">
                                <ng-template [ngIf]="hasCellCallback(cell, gridColumn.dataSourceProperty)" [ngIfElse]="spanTemplate">
                                    <a (click)="executeCellCallback(cell, gridColumn.dataSourceProperty)">{{ cell.value }}</a>
                                </ng-template>
                                <ng-template #spanTemplate>
                                    <span>{{ cell.value }}</span>
                                </ng-template>
                            </ng-template>

                        </igx-column>
                    </ng-container>

                    <ng-container *ngIf="isColumnAuto(gridColumn)">
                        <igx-column header="{{ gridColumn.translationKey | l }}" field="values.{{ gridColumn.dataSourceProperty }}.value">

                            <ng-template igxCell let-cell="cell">
                                <ng-template [ngIf]="hasCellCallback(cell, gridColumn.dataSourceProperty)" [ngIfElse]="spanTemplate">

                                    <a (click)="executeCellCallback(cell, gridColumn.dataSourceProperty)">{{ cell.value }}</a>
                                </ng-template>
                                <ng-template #spanTemplate>
                                    <span>{{ cell.value }}</span>
                                </ng-template>
                            </ng-template>

                        </igx-column>
                    </ng-container>



                </ng-container>

            </ng-container>

            <ng-container *ngIf="gridActions && gridActions.length > 0">

                <igx-column header="{{ 'base.action' | l }}" [cellStyles]="actionCellStyles" headerClasses="action-header" [pinned]="true" width="auto">
                    <ng-template igxCell let-cell="cell">

                        <button igxButton="flat" [igxToggleAction]="menu" [igxToggleOutlet]="outlet" [overlaySettings]="overlaySettings" [igxDropDownItemNavigation]="menu" (click)="resetSelection(menu)">
                            <span class="material-icons action-icon">more_horiz</span>
                        </button>

                        <igx-drop-down #menu>
                            <div class="context-menu-wrapper">
                                <igx-drop-down-item *ngFor="let action of gridActions" class="context-item">
                                    <div (click)="executeCallback(action.callback, cell.row.data, menu)">
                                        {{ action.name | l }}
                                    </div>
                                </igx-drop-down-item>
                            </div>
                        </igx-drop-down>

                        <div class="overlayOutlet action-dropdown-overlay" igxOverlayOutlet #outlet="overlay-outlet"></div>

                    </ng-template>
                </igx-column>
            </ng-container>

        </igx-grid>

as you can see, in row 4 i am using my custom paginator component. 

If i use the component like this, the grid will not show any pagination. If i use my component outside of the grid, it shows the paginator.

Is there any way i can make this work? Thanks for your help.

  • 2580
    Offline posted

    Hi Michael,

    Thank you for posting to Infragistics Community!

    The observed is due to the fact that the paginator component is projected in the grid with the "igx-paginator" selector.

     <ng-content select="igx-paginator"></ng-content>

    Therefore, only the built-in paginator would be rendered in this position. In general, the grid does not allow projecting arbitrary elements.

    Having this in mind, I am afraid the approach you have adopted would not be applicable. Nevertheless, the Paginator component does allow further customization as explained in its dedicated topic here.

    Here is also a demo with an entirely customized paginator content.

    While I can see that the customization of the paginator component from your snippet is rather related to binding a config object, my current suggestion is to directly bind the igx-paginator properties in the grid template to it.

    If you require any further assistance on the matter, please, let me know.

    Best regards,
    Bozhidara Pachilova
    Associate Software Developer