Skip to content

Row Selection Templating (Grid feature)

Boris Penkov edited this page Aug 19, 2019 · 12 revisions

Row Selection Templating Specification

Contents

  1. Overview
  2. User Stories
  3. Functionality
  4. Assumptions and Limitations
  5. References

A user should be able to template the default selector elements in the igx-grid.

Objectives

The igx-grid should provide API for templating any HTML element as an entity that handles row-selection both in the grid's row elements and in the grid's header.

<igx-grid #grid [data]="gridData" [primaryKey]="'ProductID'" 
    [rowSelectable]="true" (onRowSelectionChange)="handleRowSelection($event)">
    <igx-column [field]="'ProductID'" [editable]="true"></igx-column>
    <igx-column [field]="'ProductName'"></igx-column>
    <igx-column [field]="'UnitsInStock'"></igx-column>
    <ng-template igxHeadSelector let-headContext>
        <igx-checkbox
            [checked]="isChecked(headContext)"
            [indeterminate]="isIndeterminate(headContext)"
            (change)="handleHeadSelection($event, headContext)">
        </igx-checkbox>
    </ng-template>
    <ng-template igxRowSelector let-rowContext>
        <igx-switch
            [checked]="rowContext.selected"
            (change)="handleRowSelection($event, rowContext)">
        </igx-switch>
    </ng-template>
</igx-grid>

As an end user, I want to:

  • be able to determine if the current row is selected or not
  • be able to determine the index of the data record for the current row
  • be able to select a row using the grid's row-selection element
  • be able to deselect a row using the grid's row-selection element
  • be able to select all rows using the grid's header selection element
  • be able to deselect all rows using the grid's header selection element

Developer Stories

As a developer, I want to:

  • be able to template the grid's row selection element
  • be able to template the grid's header selection element
  • be able to handle the states of the grid's row selection element
  • be able to handle the states of the grid's header selection element

With the grid's row-selection, you can bind to the rows' and headers' contexts and use the members that they expose.

igxRowSelector

With the igxRowSelector directive you can bind to the grid's row context and access the following members:

Name Type
index property
rowID property
selected property
select method
deselect method

Index

index can be used to access the indexes of data records for related rows:

<ng-template igxRowSelector let-rowContext>
    {{ rowContext.index }}
</ng-template>

rowID

rowID can be used to get a reference of a grid's row, this could be useful if you want to apply custom row-selection:

<ng-template igxRowSelector let-rowContext>
    <igx-switch
        (change)="handleRowSelection($event, rowContext.rowID)">
    </igx-switch>
</ng-template>

In this example we provide the context's rowID to a function which handles row-selection in the grid.

selected

selected is a boolean property that shows whether the current row is selected or not.

<ng-template>
     <ng-template igxRowSelector let-rowContext>
        <igx-switch 
            [checked]="rowContext.selected">
        </igx-switch>
    </ng-template>
</ng-template>

In the above example we are using an igx-switch and we bind the rowContext.selected property to the switch's checked property. By doing so, we ensure that every time we select the row, the switch will also update its state and will be either selected or deselected depending on the current row's state.

select

The select method allows you to set the state of a single row as selected. Note that this method does not toggle selection.

<ng-template igxRowSelector let-rowContext>
    <igx-switch 
        [checked]="rowContext.selected"
        (change)="rowContext.select()">
    </igx-switch>
</ng-template>

deselect

The deselect method allows you to set the state of a single row as not selected. Note that this method does not toggle selection.

<ng-template igxRowSelector let-rowContext>
    <igx-switch 
        [checked]="rowContext.selected"
        (change)="rowContext.deselect()">
    </igx-switch>
</ng-template>

igxHeadSelector

With the igxHeadSelector directive you can bind to the grid's header context and access the following members:

Name Type
selectedCount property
totalCount property
selectAll method
deselectAll method

selectedCount

The selectedCount property shows how many rows are currently selected.

<ng-template igxHeadSelector let-headContext>
    {{ headContext.selectedCount }}
</ng-template>

totalCount

The totalCount property shows how many rows are there in the grid in total.

<ng-template igxHeadSelector let-headContext>
    {{ headContext.totalCount }}
</ng-template>

selectAll

The selectAll method sets the states of all rows, in the grid, to selected.

<ng-template igxHeadSelector let-headContext>
    <igx-switch 
        (change)="headContext.selectAll()">
    </igx-switch>
</ng-template>

In the above example we explicitly select all rows of the grid. Note that this method does not toggle selection.

deselectAll

The deselectAll method sets the states of all rows, in the grid, to not selected.

<ng-template igxHeadSelector let-headContext>
    <igx-switch 
        (change)="headContext.deselectAll()">
    </igx-switch>
</ng-template>

In the above example we explicitly unselect all rows of the grid. Note that this method does not toggle selection.

<ng-template igxHeadSelector let-headContext>
    <igx-checkbox
        [checked]="isChecked(headContext)"
        [indeterminate]="isIndeterminate(headContext)"
        (change)="handleHeadSelectionChange($event, headContext)">
    </igx-checkbox>
</ng-template>

Here we use the igxHeadSelector directive to template the grid's head selector to be an igx-checkbox element. In the headContext we have the selectedCount and the totalCount properties which can be used to determine the state of the head selector.

Custom template for selection checkbox issue.

Clone this wiki locally