Borders

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.

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.

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

Borders for column moving

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

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.

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

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

<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.

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

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

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.

@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.