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
130
IGX-Grid - Sorting Indicators Templates
posted

Hello

I currently have a problem with a sortable grid. I want to include individual icons like this Angular Grid Sorting | Data Sorting | Ignite UI for Angular | infragistics, but unfortunately I can't figure out where exactly to put the ng-template. I already have all the options that made sense to me, but the grid does not want to take my icons.

This is my grid:

<igx-grid #grid1    [data]="subordinatedUsersVm"
                                [emptyGridMessage]="emptyGridMessage"
                                [autoGenerate]="false"
                                [allowFiltering]="false"
                                [rowSelection]="'multiple'"
                                [cellSelection]="'none'"
                                [selectRowOnClick]="false"
                                [primaryKey]="'id'">

                <igx-column [sortable]="true" field="fullName" header="{{ 'usermanagement.user' | translate:l.locale.language }}">
                    <ng-template igxCell let-cell="cell">
                        <button
                            *ngIf="getProfilePicture(cell.row.data.id) != null; else initials"
                            style="background-image: url('{{ getProfilePicture(cell.row.data.id) }}')"
                            igxButton="fab"
                            class="lrnble-controlButton lrnble-controlButton-primary size-medium"
                            id="userProfilePictureBtn">
                         </button>
                        <ng-template #initials>
                            <button
                                igxButton="fab"
                                class="lrnble-controlButton lrnble-controlButton-primary size-medium h6"
                                id="userProfileBtn">{{ getUserInitials(cell.row.data.id) }}
                            </button>
                        </ng-template>
                        <span>{{cell.value}}</span>
                    </ng-template>
                </igx-column>
                <igx-column [sortable]="true" field="studyProgress" header="{{ 'usermanagement.studyProgress' | translate:l.locale.language }}">

                    <ng-template igxCell let-cell="cell">
                        <lib-progress-bar [config]="progressBarConfig" [progress]="cell.value"></lib-progress-bar>
                        <span>{{cell.value}}%</span>
                    </ng-template>
                </igx-column>
                <igx-column [sortable]="true" field="creationDate" header="{{ 'usermanagement.creationDate' | translate:l.locale.language }}"></igx-column>
                <igx-column [sortable]="true" field="learningGroups" header="{{ 'usermanagement.learningGroups' | translate:l.locale.language }}">
                    <ng-template igxCell let-cell="cell">
                        <span *ngIf="cell.value">{{ cell.value }}</span>
                        <span *ngIf="!cell.value">-</span>
                    </ng-template>
                </igx-column>
                <igx-column [sortable]="false" header="{{ 'grid.actions' | translate:l.locale.language }}">
                    <ng-template igxCell let-cell="cell">
                        <div class="lrnble-action-buttons__wrapper">
                            <!-- <button igxButton="fab"
                                    class="lrnble-controlButton lrnble-controlButton-primary size-small">
                                    <span class="material-icons-round">add</span>
                            </button> -->
                            <button igxButton="fab"
                                    class="lrnble-controlButton lrnble-controlButton-secondary size-small"
                                    (click)="navigateToStatistic(cell.row.data.id)">
                                    <span class="material-icons-round">bar_chart</span>
                            </button>
                            <!-- <button igxButton="fab"
                                    (click)="deleteUser(cell.row.data.id)"
                                    class="lrnble-controlButton lrnble-controlButton-secondary size-small">
                                    <span class="material-icons-round delete">delete</span>
                            </button> -->
                        </div>
                    </ng-template>
                </igx-column>

                <ng-template igxHeadSelector let-headContext>
                    <div class="lrnble-grid-head-selector__wrapper">
                        <igx-checkbox class="lrnble-checkbox" [checked]="mainCheckboxChecked" (change)="checkOrUncheckAll($event)"></igx-checkbox>
                    </div>
                </ng-template>
                <ng-template igxRowSelector let-rowContext>
                    <div class="lrnble-grid-row-selector__wrapper">
                        <igx-checkbox [class]="'lrnble-checkbox' + ' grid-checkbox-' + rowContext.index" [checked]="rowContext.selected" (change)="rowSelectionChangingEvent(rowContext, $event)"></igx-checkbox>
                    </div>
                </ng-template>

                <ng-template igxSortHeaderIcon>
                    <igx-icon class="material-icons-round">swap_vert</igx-icon>
                </ng-template>
                <ng-template igxSortDescendingHeaderIcon>
                    <igx-icon class="material-icons-round">arrow_downward</igx-icon>
                </ng-template>
                <ng-template igxSortAscendingHeaderIcon>
                    <igx-icon class="material-icons-round">arrow_upward</igx-icon>
                </ng-template>

            </igx-grid>

  • 260
    Offline posted

    Hello Michael,

    Thank you for posting in our community!

    I have been looking at your question and have prepared a small sample trying to reproduce the described behavior. However, on my side, everything works as expected and as could be observed in the attached GIF file, the sorting indicator icons are changed successfully. I have tested the behavior under version 13.1.15.

    Additionally, in order to be able to assist you further, I will need some additional information regarding your scenario. Could you please clarify under which version of Ignite UI for Angular you are experiencing this issue?

    I am asking this question, because as mentioned in our official change log notes here, directives for re-templating header sorting indicators are introduced in version 13.0.0 and in case the igniteui-angular version on your side is older, then it is expected the icons to remain the same.

    Here could be found my sample for your reference. Please test it on your side and let me know how it behaves.

    Thank you for your cooperation. Looking forward to hearing from you. 

    Sincerely,
    Riva Ivanova
    Entry Level Software Developer