Forums Ignite UI for Angular
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
Close
Lance Tressler
605
Issue with grid row selector when changing from no records in the grid to records in the grid
posted

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.

Here is a partial screenshot after step 1

If the grid is reloaded with an empty array, the selector is removed:

The red arrow shows an additional anomaly where the set of fixed columns that is supposed to be on the right side is moved over by the width of the selector column.

Finally, if the grid is reloaded with one or more valid rows, all of the column configuration is lost:

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.

Parents
No Data
Reply
  • 605
    Offline posted

    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.

Children