Borders

The DikeGrid itself draws a border through its primary container. However, Borders concept is essential for column moving.

DikeGrid Border

When you disable the material elevation for the DikeGrid, it draws a line in its primary internal container.

Open the Floating Configuration Panel, go to the Appearance section, and uncheck the MatElevation checkbox.

Floating Configuration Panel - Appearance

DikeGrid Border

By default, the border is one-pixel in width.

Border width

You can change the border width by providing an Injection Token called BORDER_WIDTH.

Let us give the DikeGrid instance this Injection Token at the module level.

structure.module.ts

@NgModule({
  providers: [
    { provide: BORDER_WIDTH, useValue: 3 }
  ]
})
export class StructureModule { }

DikeGrid with a thicker border.

Borders for column moving

If we inspect the DikeGrid instance through the Chrome DevTools, we see the following structure:

DikeGrid Border Gap

The inner container highlighted with yellow is the primary container for the DikeGrid. However, there is another outer container highlighted with pink color.

The outer container creates a space between the DikeGrid definition and its external boundary. When a column moves and tries to add to the left or right panel, this space draws a line with the accent color.

Internally, the space between the DikeGrid and its external boundary is called Border Gap.

To see how the DikeGrid draws this line, let us allow column dragging for the DikeGrid instance.

Remember that Age and Gender columns are draggable, but the DikeGrid instance that contains them must allow column dragging. See the Column Moving section for more details.

Let us bind the related property from the gridProperties object to allow column dragging.

grid-structure.component.html

<dike-grid id="grid-structure"
    [allowColumnDragging]="gridProperties.allowColumnDragging">
</dike-grid>

Open the Floating Configuration Panel, go to the Dragging section, and check the Allow Column Dragging checkbox.

Floating Configuration Panel - Dragging

Now you can grab the Gender column, for example, and drag it to the left or right panel.

DikeGrid - Left Border

See how the column icon changes to a pin icon, indicating that the user will add the column to the left panel.

The drawn line is 5 pixels in width. Nevertheless, if the provided border width exceeds 5 pixels, the drawn line will be the same as the border.

Changing the Border Gap width

The Border Gap has 15 pixels in width by default. However, you can reduce or increase this gap by providing an Injection Token called BORDER_GAP.

Let us give the DikeGrid instance this Injection Token at the module level.

structure.module.ts

@NgModule({
  providers: [
    { provide: BORDER_WIDTH, useValue: 3 },
    { provide: BORDER_GAP, useValue: 35 }
  ]
})
export class StructureModule { }

We gave the DikeGrid an exaggerated value of 35 pixels to see the difference.

Border Gap with 35 pixels in width

Be aware that the drawn line when a column is dragging must fit in the Border Gap.