ASP.NET Core MVC Controls | ComponentOne
In This Topic
    Selector Class
    In This Topic
    File
    wijmo.grid.selector.js
    Module
    wijmo.grid.selector
    Derived Classes
    BooleanChecker

    Class that modifies a FlexGrid Column by adding checkboxes that can be used to select or de-select rows and groups.

    The FlexGrid has a selectionMode property that allows users to select multiple rows or row ranges using the mouse or the keyboard.

    But in some cases you may prefer to provide this functionality by adding a column with checkboxes instead. This will allow users to select rows easily on mobile devices and may provide a more intuitive interface on desktop systems as well.

    The Selector class allows you to do this by creating an instance of the Selector class and setting its column property to the column where you want the checkboxes to appear. For example:

    ```typescript // add a SelectorColumn to the first row header column let selector = new SelectorColumn(theGrid, { itemChecked: () => showCheckedCount() }); ```

    This will add checkboxes to cells in the first row header column. The checkboxes are bound to each row's isSelected property, so toggling the checkbox toggles the row's selected state.

    By default, the Selector also adds checkboxes to the top header cell and to cells in group rows. These cells can be used to select or de-select all rows on the grid and on each group.

    You may use the showCheckAll property to turn off the checkbox at the top header cell.

    The Selector can also be added to non header columns. For example:

    ```typescript // add a SelectorColumn to the first row data column let selector = new SelectorColumn(theGrid.columns[0], { itemChecked: () => showCheckedCount() }); ```

    In this case, the Selector will add the selection checkboxes to regular grid cells preserving their original data content.

    ** Note **: When you attach a Selector to a FlexGrid, it will automatically set the grid's selectionMode property to Cell, since that is the selection mode that makes most sense for the type of selection provided by the Selector. (The ListBox mode would cause the grid to interfere with the selector's behavior.)

    Constructor

    Properties

    Methods

    Events

    Constructor

    constructor

    constructor(column?: FlexGrid, options?: any): Selector
    

    Initializes a new instance of the Selector class.

    Parameters
    • column: wijmo.grid.Column | wijmo.grid.FlexGrid
    Optional

    The Column that this Selector should customize, or a reference to a FlexGrid whose first column will be customized.

    An object containing initialization data for the object.

    Returns
    Selector

    Properties

    column

    Gets or sets the Column to be used by this Selector.

    Type
    Column

    showCheckAll

    Gets or sets a value that determines whether to show a 'Check All' items checkbox on the column header.

    The default value for this property is **true**.

    Type
    boolean

    Methods

    onColumnChanged

    onColumnChanged(e?: EventArgs): void
    

    Raises the columnChanged event.

    Parameters
    Optional
    Returns
    void

    onColumnChanging

    onColumnChanging(e: CancelEventArgs): boolean
    

    Raises the columnChanging event.

    Parameters
    Returns
    boolean

    onItemChecked

    onItemChecked(e?: EventArgs): void
    

    Raises the itemChecked event.

    Parameters
    Returns
    void

    Events

    columnChanged

    Occurs after the value of the column property changes.

    Arguments
    EventArgs

    columnChanging

    Occurs before the value of the column property changes.

    Arguments
    CancelEventArgs

    itemChecked

    Occurs when the user checks an item on this column.

    Arguments
    EventArgs