Grid Conditional Row Selection
JavaScriptJavaScriptAngularAngularVueVueReactReact

Grid for Angular

Angular standalone version of this topic (compatible with Angular 17+). Import both the Smart UI component and module in the standalone component.

What this topic covers: practical setup, the framework-specific API access pattern, and copy-adapt guidance for the examples in this page.

import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { GridComponent, GridModule } from 'smart-webcomponents-angular/grid';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, GridModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  @ViewChild('grid', { read: GridComponent, static: false }) grid!: GridComponent;
}
<!-- app.component.html -->
<smart-grid #grid></smart-grid>

Use this.grid for API methods in this topic.

Select Grid Rows Based on Certain Condition

Rows in Smart.Grid component can be selected initially based on certain condition. To be able to select multiple rows, selection.enabled and selection.allowRowSelection have to be set to true; moreover, selection.mode has to be set to 'many' or 'extended'.

The recommended way to manipulate rows initially, including their selection, is in the Grid's onRowInit callback function, which is called once for each row when it is initializing.

Here are three sample implementations of onRowInit showing how to select Grid rows based on different conditions:

Select Rows Depending on Index

The following code selects all rows with even indexes:

onRowInit(index: number, row: GridRow) {
    if (index % 2 === 0) {
        row.selected = true;
    }
}

Select All Rows Depending on Cell Value

The following code selects all rows whose Quantity cells have value greater than 5:

onRowInit(index: number, row: GridRow) {
    if (row.data.quantity > 5) {
        row.selected = true;
    }
}

Select All Rows Based on Complex Condition

onRowInit(index: number, row: GridRow) {
    if (index >= 10 && index <= 20 && (row.data.lastName === 'Fuller' || row.data.price > 20)) {
        row.selected = true;
    }
}
For AI tooling

Developer Quick Reference

Topic: grid-conditional-row-select   Component: Grid   Framework: Angular

Main methods: (none detected)

Common config keys: (none detected)

Implementation Notes

Compatibility: Angular 17+ (standalone)   API access pattern: @ViewChild(...) + this.component.method()

Lifecycle guidance: Bind inputs declaratively and call imperative API through @ViewChild in/after ngAfterViewInit.

Common pitfalls:

  • Using @ViewChild API too early (before view init).
  • Omitting standalone imports for Smart modules in @Component.imports.
  • Type mismatches between configuration fields and template bindings.

Validation checklist:

  • Ensure module import exists in standalone component imports array.
  • Use typed @ViewChild(..., { read: ComponentType }).
  • Call imperative methods after view initialization.