igx-grid batchEdit boolean column always show checkboxes

[mikerentmeister]

Question

I am converting some grids from DevExtreme to IgniteUi, where on a per-column basis there is a [showEditorAlways] input on their columns. We are currently making use of this feature for our users to edit boolean values in our grid, without entering the full row edit mode. Is there a way that something similar can be achieved with an ignite grid to always render the igxCellEditor, and be able to edit boolean values with a single click?

• igniteui-angular version: 13.0.8
• browser: any

[ChronosSF]

Have you explored the option to template the column yourself and add an event handler for the checkbox so that you can then use the Editing API to submit values without the user entering edit mode in the first place?

There is some guidance on both of these ideas here: https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/cell-editing

Let me know if you encounter or have encountered issues with this approach.

[mikerentmeister]

Yes I did explore that option, and something really weird happened where whenever my mouse was anywhere within the column, I couldn't use my mouse scroll wheel to scroll the grid down (scroll up worked). As soon as I moved my mouse to a different column, then all was fine and I could scroll the grid with my mouse wheel.. I've been trying to repro it in a stackblitz outside of my app, but I can't repro it. I'll have to keep debugging, unless there is anything you guys can think of off-hand that might cause that behavior? If I don't provide an igxCell template, the scrolling works just fine.

[lalo-mx]

@mikerentmeister It looks like is the same issue as #10949

[mikerentmeister]

Thank you! I had not seen that issue. I will close this discussion. Thank you very much!

[ChronosSF]

I'd be interested to see the template you used that was causing igxForOf to behave erroneously if you have it somewhere. We can add it to our test scenarios in order to not break similar cases in the future.

[mikerentmeister]

@ChronosSF this is what it looked like:

<igx-column field="isAssigned" header="Assigned" i18n-header="@@assigned" dataType="boolean" [resizable]="true" [filterable]="false" [editable]="true">
  <ng-template igxCell let-val let-cell="cell">
    <igx-checkbox
      [checked]="val"
      (change)="handleChange($event)"
      [igxFocus]="true"
      [disableRipple]="true"
    ></igx-checkbox>
  </ng-template>
</igx-column>

I tried to re-create it in a StackBlitz, but was unable to. One thing to note that might be helpful is that my main app was using the grid from withing multiple nested css grid and flexbox elements. As you can see in the screenshot, the grid with the checkboxes are nested quite deep within the DOM:

[lalo-mx]

The samples from the main page are using 13.0.0. The scrolling issue happens with 13.0.8 and higher. See StackBlitz(Code based in sample from @mikerentmeister) https://stackblitz.com/edit/angular-x5qeru