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
605
Selection checkbox is not responsive when a new row is added using addRow
posted

We are adding new rows to the grid using the grid's addRow method. This grid is also set up for multiple row selection and no cell selection.

The row selector is defined as

                <ng-template igxRowSelector let-rowContext>
                    <div class="row-selector">
                        <igx-checkbox [readonly]="true" [checked]="rowContext.selected" [disabled]="snapshotSelected">
                        </igx-checkbox>
                    </div>
                </ng-template>

When we add a new row, the new row's selector checkbox is extremely unresponsive. If you click it, it will not show any changes until you move away from it. Existing rows in the grid respond immediately to the click.

We have tried a number of different things to get the checkbox to respond, including marking the grid for check and detecting changes, reflowing, etc. and nothing at all changes the behavior.

We are using version 16.1.3 of the grid.

  • 440
    Offline posted

    Hello,

    I have been looking into your question and I have created a small sample trying to reproduce the described behavior by using the information provided and your code snippet. I am using igx-grid component which has multiple row selection and none cell selection and I also use your template with the igxRowSelector directive and in it I put an igx-checkbox with the handled properties from your code snippet. I add a row with the addRow method when a button is clicked to reproduce the described behavior.

    <ng-template igxRowSelector let-rowContext>
          <div>
            <igx-checkbox
              [readonly]="true"
              [checked]="rowContext.selected"
              [disabled]="false"
            >
            </igx-checkbox>
          </div>
        </ng-template>

    <button igxButton="raised" (click)="addRow()">Add Row</button>

    public addRow(){
            let id = Math.floor(Math.random()*100);
            let row = {
                ProductID: id,
                ReorderLevel: 25,
                ProductName: "Grandmas Boysenberry Spread",
                UnitsInStock: 0,
                OrderDate: new Date("2017-12-17")
            };
            this.grid.addRow(row)
    }

    On my side everything works as expected and I am able to to add a line and then immediately select or deselect it as the checkbox is fully responsive and can be checked and unchecked.

    The described scenario could be observed here:

     

    Here you will find 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 and to give me more information about your specific scenario. Alternatively, if the behavior cannot be replicated, please feel free to provide your own sample.

    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.  

    Regards,
    Georgi Anastasov
    Entry Level Software Developer
    Infragistics