Ngx-Datatable Access rowIndex in columns

Question

HERE'S A STACKBLITZ FOR THIS PROBLEM:

https://dynamic-ng-grid.stackblitz.io

I have to access the rowIndex or row data where I have used ngFor, I tried using rowIndex and went through the docs but unable to find out how it could work. Any help would be great thank. Let me know if any further information is required. Here's the code:

<ngx-datatable
    style="height: 450px; cursor: pointer;"
    class="material"
    [rows]="rows"
    [rowHeight]="70"
    [footerHeight]="50"
    columnMode="force"
    [scrollbarV]="true"
    [scrollbarH]="true">

    <!-- months col -->
    <ngx-datatable-column 
        *ngFor="let month of getMonths(rows, rowIndex)" // THIS IS THE PLACE WHERE I HAVE TO ACCESS THE ROWINDEX OR ROW BUT UNABLE TO ACCESS IT 
        [name]="month.name"
        [width]="465">

        <ng-template let-value="value" let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template>

            <span *ngIf="!month.detail; then avgTemp; else ratingTemp;"></span>
            <!-- average score -->
            <ng-template #avgTemp>{{ month.value | json }} MV</ng-template>
            <!-- monthly rating -->
            <ng-template #ratingTemp>
            <span *ngIf="month.detail.rating.isNA === 'Y'; then isNaTemp; else notNaTemp"></span>
            <!-- N/A -->
            <ng-template #isNaTemp>N/A</ng-template>
            <!-- Non-N/A -->
            <ng-template #notNaTemp>
                <span *ngIf="month.detail.rating.hrRating !== null; then hrRatTemp; else otherRatTemp"></span>
                <!-- Hr Rating -->
                <ng-template #hrRatTemp>{{ month.detail.rating.hrRating }} HR</ng-template>

                <ng-template #otherRatTemp>
                    <span *ngIf="month.detail.rating.lmRating !== null; then lmRatTemp; else otherRatTemp"></span>
                    <!-- Lm Rating -->
                    <ng-template #lmRatTemp>{{ month.detail.rating.lmRating }} LM</ng-template>

                    <ng-template #otherRatTemp>
                        <span *ngIf="month.detail.rating.empRating !== null; then empRatTemp; else zeroTemp"></span>
                        <!-- Emp Rating -->
                        <!-- <ng-template #empRatTemp>{{ month.detail.rating.empRating }} Emp</ng-template> -->
                        <ng-template #empRatTemp>{{ row.months | json }} Emp</ng-template>
                        <ng-template #zeroTemp>
                        <span *ngIf="(rowIndex + 1) != rows.length">0</span>
                        </ng-template>
                    </ng-template>
                </ng-template>
            </ng-template> <!-- Non-N/A -->
            </ng-template> <!-- monthly rating -->

        </ng-template>
    </ngx-datatable-column>

</ngx-datatable>

Are you still facing the issue? Just to understand your question, where exactly do you need to access `rowIndex`? — wentjun, Mar 25 '19 at 09:01
@wentjun thanks for reaching out. Yes I am still having this issue. I need to access it where I have used ngFor in ngx-datatable-column. You can see that in the code too, I have made it a comment. — Immad Hamid, Mar 25 '19 at 09:15
yes, I am unable to send rowIndex in the method. It shows undefined — Immad Hamid, Mar 25 '19 at 09:24
You can use index of array(the array will be returned from getMonths) into ngfor. An index there is when you loop into array!!! — Morteza Ebrahimi, Mar 25 '19 at 09:31
@MortezaEbrahemi, my friend this is not how it is, if I'll do this then I would iterating through the index continuously. When I actually need the index of the row and not an index when looping. I have made a stackblitz, check this out: https://stackblitz.com/edit/angular-7dgk8e — Immad Hamid, Mar 25 '19 at 09:52
If I have understood what you mean correctly, look at my answer. — Morteza Ebrahimi, Mar 25 '19 at 11:19

score 2 · Answer 1 · answered Mar 25 '19 at 11:21

2

Base on your stackblitz:

app.component.ts

@ViewChild(DatatableComponent) table: DatatableComponent;

public getRowIndex(row: any): number {
    return this.table.bodyComponent.getRowIndex(row); // row being data object passed into the template
}

app.component.html

...
<ngx-datatable  ....  #table> 
   <ngx-datatable-column>
        {{ getRowIndex(row) }}
   </ngx-datatable-column>
...

I hope this helps you.

answered Mar 25 '19 at 11:21

Morteza Ebrahimi

740
1
8
20

Thanks for the answer Morteza, I have been trying out different things on stackblitz, I thought people aren't looking at it. Please check now and you would be able to see what I am trying to acheive – Immad Hamid Mar 25 '19 at 11:33
Please check line number 13 in HTML and line number 15 in TS file – Immad Hamid Mar 25 '19 at 11:35

score 1 · Accepted Answer · answered Mar 25 '19 at 19:34

1

It's a good question as I wasn't able to find any relevant solution to achieve this, but instead try to solve it in a different way.

I think you wouldn't be able to access the rowIndex where you are trying to access it. Here's a stackblitz which surely solves your problem. It's not the best way of doing it but it will solve the problem.

https://stackblitz.com/edit/angular-hpm8k9

answered Mar 25 '19 at 19:34

Faraz Sarwar

238
1
9

Thanks for the answer, I'll check it in a while and will get back to you. – Immad Hamid Mar 25 '19 at 19:41
This works. This was actually the last thing that I had in my mind, if I am unable to get the rowIndex in my method. Thanks – Immad Hamid Mar 25 '19 at 21:47

score 1 · Answer 3 · answered Jun 07 '19 at 03:11

After (insert swear word here)ing around with this stupid component for many hours, it turns out that on the methods that are bound to the ngx-datatable root tag, such as [rowClass]="getRowClass", the context of the function call, i.e. "this", is the datatable itself, not the component. Thus if you look for this.rowIndex while in the body of your getRowClass function you may find this.rowIndex. But here's the rub: Your TypeScript won't compile unless you add a local rowIndex property to your component.

I sure as heck hope this helps someone after all the searching and experimenting I did. I was in the process of using the method Morteza posted above/below but when I struggled to duplicate his/her results, I found out about this context switch at runtime. The only thing left is figuring out whether I want to keep using such a goofy component or look at something else like maybe PrimeNG...or good old Datatables.js.

Ngx-Datatable Access rowIndex in columns

3 Answers3