Grid Column Moving Overview

The Grid component in Ignite UI for Angular provides column moving to allow columns reordering via standard drag/drop mouse or touch gestures.

Column moving works as well with pinned columns. Dragging an unpinned column and dropping it inside the pinned area makes that column pinned and vice versa, dragging a pinned column and dropping it outside the pinned area makes that column unpinned.

Note

If a header is retemplated and the corresponding column is movable (or groupable), you have to set the draggable attribute to false on the templated elements, so that you can handle any of the events that are applied!

<ng-template igxHeader>
    <igx-icon [attr.draggable]="false" (click)="onClick()"></igx-icon>
</ng-template>

Demo


Overview

Column moving feature is enabled on a per-column level, meaning that the igx-grid can have a mix of movable and immovable columns. This is done via the movable input of the igx-column.

<igx-column [field]="'Category'" [movable]="true"></igx-column>
Note

If the pinned area exceeds its maximum allowed width (80% of the total Grid width), a visual clue notifies the end user that the drop operation is forbidden and pinning is not possible. This means you won't be allowed to drop a column in the pinned area.

Events

There are several events related to the column moving to provide a means of tapping into the columns' drag and drop operations. These are onColumnMovingStart, onColumnMoving and onColumnMovingEnd. You can subscribe to the onColumnMovingEnd event of the igx-grid to implement some custom logic when a column is dropped to a new position. For example, you can cancel dropping the Category after the Change On Year(%) column.

<igx-grid #dataGrid [data]="data" [autoGenerate]="false" (onColumnMovingEnd)="onColumnMovingEnd($event)">
    <igx-column [field]="'Category'" [movable]="true"></igx-column>
    <igx-column [field]="'Change On Year(%)'" [dataType]="'number'" [movable]="true" ></igx-column>
</igx-grid>
public onColumnMovingEnd(event) {
    if (event.source.field === "Category" && event.target.field === "Change On Year(%)") {
        event.cancel = true;
    }
}

Styling

To get started with styling the Grid column moving headers, we need to import the index file, where all the theme functions and component mixins live:

// custom-grid-column-moving-style.component.scss
@import '~igniteui-angular/lib/core/styles/themes/index';

Following the simplest approach, we create a new theme that extends the igx-grid-theme and accepts the $ghost-header-background, $ghost-header-text-color and the $ghost-header-icon-color parameters.

// Define dark theme for the column moving
$dark-grid-column-moving-theme: igx-grid-theme(
    $ghost-header-text-color: #F4D45C,
    $ghost-header-background: #575757,
    $ghost-header-icon-color: #f4bb5c
);

The last step is to include the component mixins with its respective theme:

@include igx-grid($dark-grid-column-moving-theme);
Note

Depending on the component View Encapsulation strategy, it may be necessary to penetrate this encapsulation using ::ng-deep

:host {
    ::ng-deep {
        @include igx-grid($dark-grid-column-moving-theme);
    }
}

Defining a color palette

Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the igx-palette and igx-color functions.

igx-palette generates a color palette based on the primary and secondary colors that are passed:

$yellow-color: #F4D45C;
$black-color: #575757;

$dark-palette: igx-palette($primary: $yellow-color, $secondary: $black-color);

And then with igx-color we can easily retrieve color from the pallete.

$dark-grid-column-moving-theme: igx-grid-theme(
    $palette: $dark-palette,
    $ghost-header-text-color: igx-color($dark-palette, "primary", 400),
    $ghost-header-background: igx-color($dark-palette, "secondary", 200),
    $ghost-header-icon-color:  igx-color($dark-palette, "primary", 500)
);
Note

The igx-color and igx-palette are powerful functions for generating and retrieving colors. Please refer to Palettes topic for detailed guidance on how to use them.

Using Schemas

Going further with the theming engine, you can build a robust and flexible structure that benefits from schemas. A schema is a recipe of a theme.

Extend one of the two predefined schemas, that are provided for every component, in this case - light-grid.

// Extending the dark grid schema
$dark-grid-column-moving-schema: extend($_light-grid,
        (
            ghost-header-text-color:(
                igx-color: ("primary", 400)
            ),
            ghost-header-background:(
                igx-color: ("secondary", 200)
            ),
            ghost-header-icon-color:(
                igx-color:( "primary", 500)
            )
        )
);

In order to apply our custom schema we have to extend one of the globals (light or dark), which is basically pointing out the components with a custom schema, and after that add it to the respective component theme:

// Extending the global dark-schema
$custom-light-schema: extend($light-schema,(
    igx-grid: $dark-grid-column-moving-schema,
));

// Defining dark-grid-theme with the global dark schema
$dark-grid-column-moving-theme: igx-grid-theme(
  $palette: $dark-palette,
  $schema: $custom-light-schema
);

Don't forget to include the theme in the same way as it was demonstrated above.

Demo


API References

Additional Resources

Our community is active and always welcoming to new ideas.