Issue with grid row selector when changing from no records in the grid to records in the grid

We are using row selection in the grid and have discovered a significant issue when the following steps are taken:

• The grid is initialized with an empty array.
• The grid is loaded with a new set of data in response to some user request (i.e. don’t just reload it while initializing). This data can either contain “real” records or be empty.

 

It appears that the cause is the removal and then re-addition of the selector column.

Is it possible for us to change the behavior so that the column is never removed? Or can the grid be fixed not to lose the column information in this scenario?

This is a fairly critical issue since we cannot release our updated application using this grid until the issue is addressed.

I realized that I forgot to mention some fairly critical information here: our grid columns are not fixed in HTML, they are configured dynamically based on the current view's needs.

Basically, we provide a plain array of column configuration information and then configure each type of column through templates that are picked based on the type of data the column represents.

Here is q quick example of the configuration (this is not complete):

<igx-grid #grid autoGenerate="false" [pinning]="pinningConfig" [primaryKey]="primaryKey" rowSelection="multiple" cellSelection="none">
    <igx-column *ngFor="let col of columns" [header]="col.caption" [headerClasses]="col.class" [field]="col.columnName" [resizable]="true" [sortable]="columnIsSortable(col)" [editable]="columnIsEditable(col)" [width]="col.widthPX" [hidden]="!col.visible" [pinned]="col.frozen" [dataType]="col.dataTypeAngular">
        <ng-template igxRowSelector let-rowContext>
            <div class="row-selector">
                <igx-checkbox [readonly]="true" [checked]="rowContext.selected" [disabled]="!gridIsEditable()">
                </igx-checkbox>
            </div>
        </ng-template>
        <!– Display –>
        <ng-template igxCell let-val let-cell="cell" *ngIf="col.formatAsDate">
            <div class="grid-cellContent {{col.class}}" [ngClass]="{'notoktoedit': !cellIsEditable(cell)}">{{formatDate(col, val)}}</div>
        </ng-template>
        <ng-template igxCell let-val let-cell="cell" *ngIf="col.formatAsNumber">
            <div class="grid-cellContent {{col.class}}" [ngClass]="{'notoktoedit': !cellIsEditable(cell)}">{{formatNumber(col, val)}}</div>
        </ng-template>

So, I think what happens is that when the grid decides to add or remove the rowSelector column, this column configuration is not re-examined.

I tried to look at which events might let me know when this happens and tried various method calls such as cdr.detectChanges and reflow, but nothing helps.

Hello,

Thank you for the provided code-snippet.

I have been looking into your question and prepared small sample with IgxGrid and two buttons. The first one would generate a non-empty data on click and the second – empty array.

On my side, everything seems to work as expected and the data is generated correctly.

Here could be found my sample for your reference. Please test it on your side and let me know how it behaves. If this is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me along with steps to reproduce.

Having a working sample on my side, which I can debug, is going to be very helpful in finding the root cause of this behavior.

Thank you for your cooperation.

Looking forward to hearing from you.

Sincerely,

Teodosia Hristodorova

Associate Software Developer

Thank you for the response and sample. Unfortunately, I am able to reproduce this at will using the sample once I set autogenerate to false.

I have updated the sample here

If that doesn't work, you should be able to set autogenerate to false, select load empty data first, then look at the column headers. They should display the name of the field, not the caption:

Is there any update on this issue? This is an absolutely critical problem for us.

Hello,

After an investigation I have determined that the reason for the issue came from missing brackets around the autoGenerate property:

[autoGenerate]="false"

Also, since the displayDensity is set to compact, the min-width of the rowSelectors column should be calculated as calc(1.25rem + (0.75rem * 2)) instead of calc(1.25rem + (1.5rem * 2)).

I have modified the previously provided sample and it could be found here.

Please test it on your side and let me know if I may be of any further assistance.

Sincerely,

Teodosia Hristodorova

Associate Software Developer

Ah, that is fantastic and does solve the problem, thank you!

Is there a general rule about when the brackets should be supplied and when they shouldn't? I have seen a wide variation and haven't really been able to figure out which usage is correct in which circumstances.

Hello,

The square brackets, [], cause Angular to evaluate the right-hand side of the assignment as a dynamic expression. Without the brackets, Angular treats the right-hand side as a string literal and sets the property to that static value. So, for example, if you set the autoGenerate property as autoGenerate = "false", the right side would be evaluated as True, since "false" would be treated as non-empty string. When you add a square brackets around the autoGenerate i.e. [autoGenerate] = "false" this would invoke an evaluation of the right expression to the value False.

More about Angular property binding could be found here. Also a useful topic could be the Angular template syntax which could be found here.

Let me know if I may be of any further assistance.

Sincerely,

Teodosia Hristodorova

Associate Software Developer