Panels

Panels are containers to accommodate columns.

Content Panels

There are three Content Panels in the DikeGrid structure definition. The Content Panels are left, center, and right panels. Every Content Panel can accommodate any number of columns, but only the center panel will be scrollable.

Let us rearrange and create the following columns:

1. First, add the Employee Id column in the left panel.

2. Then, add the Name, Surname, Gender, Age, and Email columns to the center panel.

3. Lastly, add the Hire Date column to the right panel.

grid-structure.component.html

<dike-grid id="grid-structure">
    <dike-grid-column
        fieldName="employeeId"
        headerText="Employee Id"
        dataType="Text"
        width="350"
        panel="leftPanel">
    </dike-grid-column>

    <dike-grid-column
        fieldName="firstName"
        headerText="Name"
        dataType="Text">
    </dike-grid-column>

    <dike-grid-column
        fieldName="lastName"
        headerText="Surname"
        dataType="Text">
    </dike-grid-column>

    <dike-grid-column
        fieldName="gender"
        headerText="Gender"
        dataType="Binary"
        width="110">
    </dike-grid-column>

    <dike-grid-column
        fieldName="age"
        headerText="Age"
        dataType="Numeric"
        contentAlign="center"
        width="85">
    </dike-grid-column>

    <dike-grid-column
        fieldName="email"
        headerText="Email"
        dataType="Text"
        width="300">
    </dike-grid-column>

    <dike-grid-column
        fieldName="hireDate"
        headerText="Hire Date"
        dataType="Date"
        panel="rightPanel">
    </dike-grid-column>

</dike-grid>

The following output shows the previous column definition:

Content Panels

You can define columns or column groups in a Content Panel.

As you can see, columns in the left and right panels are visible all the time.

Highlighting the cell definitions for the three panels, we can see that the Content Row is split into three template columns according to the CSS Grid Layout specification.

Cell definitions for a Content Row

Be aware of left and right panels' width. Since these panels are not scrollable, if the left and right panels exceed the grid's width, the center panel will not be visible.

Panel division line

A division line separates two adjacent panels when creating columns in the left or right panels. Every line belongs to the left and right panels, respectively.

All resizable columns in a panel change their width evenly when resizing the panel. For more details, see Column Sizing.

Space between two panels

There is a space between two adjacent panels. Then, the DikeGrid draws the division line at the center of this space.

By default, the space between two adjacent panels is 13 pixels in width. However, you can change the space width by providing an Injection Token called DIVISION_PANEL_GAP.

Panel division line width

The division line is a pixel width. Same as before, you can change this value by providing an Injection Token called DIVISION_PANEL_LINE_WIDTH.

The following code snippet shows custom values for the mentioned Injection Tokens.

structure.module.ts

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

The following screenshot shows the previous module configuration.

Custom panel division line

As we can see in the previous screenshot, the panel division line is thicker, and the space between panels is larger.

Group panel

Like any other panel in the DikeGrid definition, the group panel accommodates all the columns to group the DikeGrid data rows.

Let us allow row grouping in the DikeGrid instance to see how the group panel looks.

grid-structure.component.html

<dike-grid id="grid-structure"
    allowRowGrouping>
</dike-grid>

You can enable row grouping only at the creation phase of the DikeGrid.

The following screenshot shows the group panel. As you can see, the group panel is at the top of the column headers.

Group Panel

Rearrange the Age column to display it in the group panel.

grid-structure.component.html

<dike-grid id="grid-structure"
    allowRowGrouping>
    
    <dike-grid-column
        fieldName="age"
        headerText="Age"
        dataType="Numeric"
        contentAlign="center"
        width="85"
        groupable
        panel="groupPanel">
    </dike-grid-column>
</dike-grid>

After making the Age column groupable and creating it in the group panel, the output looks like the following:

A DikeGrid instance group by Age column

You can define data columns in the group panel, only; not column groups. For more details, see the Row Grouping section.

Changing the group panel height

By default, the group panel has 71 pixels of height. You can change this value by providing an input property called rowGroupingRowHeight.

grid-structure.component.html

<dike-grid id="grid-structure"
    allowRowGrouping
    [rowGroupingRowHeight]="gridProperties.rowGroupingHeight">
</dike-grid>

In the previous code snippet, we added the rowGroupingRowHeight property to the DikeGrid instance and was bound to the gridProperties object.

Open the Floating Configuration Panel, go to the Row Grouping section, and type 100 in the Row-Grouping Row Height textbox.

Floating Configuration Panel - Row Grouping

Changing the Group Panel height

You can also change the group panel height by providing an Injection Token called ROW_GROUPING_ROW_HEIGHT.

Changing the height of the columns in the group panel

By default, the columns contained in the group panel have a height of 36 pixels. However, you can change it by providing a value for the input property called rowGroupingColumnHeight.

Let us bind the gridProperties object to the rowGroupingColumnHeight input property.

grid-structure.component.html

<dike-grid id="grid-structure"
    allowRowGrouping
    [rowGroupingRowHeight]="gridProperties.rowGroupingHeight"
    [rowGroupingColumnHeight]="gridProperties.rowGroupingColumnHeight">
</dike-grid>

Open the Floating Configuration Panel go to the Row Grouping section, and type 80 in the Columns Height textbox.

Height of the columns in Group Panel

You can also change the height of the columns by providing an Injection Token called ROW_GROUPING_COLUMN_HEIGHT.

Changing the Row-Grouping indent width

When you open a group, you will see an indent between the most left side of the DikeGrid and the first column.

The Row-Grouping indent is visible by default. However, you can hide it if you want. You can show or hide this indent by providing an input property called displayRowGroupingIndent.

You can also change the indent width by providing an Injection Token called ROW_GROUPING_INDENT.

By default, this indent is 25 pixels in width. Nevertheless, you can change the indent width by providing an input property called rowGroupingIndentWidth.

You can also change the indent width by providing an Injection Token called ROW_GROUPING_INDENT_WIDTH.

Let us bind the related properties from the gridProperties object.

grid-structure.component.html

<dike-grid id="grid-structure"
    allowRowGrouping
    [rowGroupingRowHeight]="gridProperties.rowGroupingHeight"
    [rowGroupingColumnHeight]="gridProperties.rowGroupingColumnHeight"
    [displayRowGroupingIndent]="gridProperties.displayRowGroupingIndent"
    [rowGroupingIndentWidth]="gridProperties.rowGroupingIndentWidth">
    
    <dike-grid-column
        fieldName="gender"
        headerText="Gender"
        dataType="Binary"
        width="110"
        groupable
        draggable
        panel="groupPanel">
    </dike-grid-column>

    <dike-grid-column
        fieldName="age"
        headerText="Age"
        dataType="Numeric"
        contentAlign="center"
        width="85"
        groupable
        draggable
        panel="groupPanel">
    </dike-grid-column>
    
</dike-grid>

You can remove the columns from the group panel because the draggable input property is bound to the Gender and Age columns.

Open the Floating Configuration Panel go to the Row Grouping section, and type 100 in the Indent Width textbox. You can uncheck the Row-Grouping Indent checkbox to hide the Row-Grouping indent.

Changing the row grouping indent width

To apply an indent to every Content Row depends on the row belonging level.

We grouped the DikeGrid rows by two columns in the previous configuration: Gender and Age.

This configuration generates an output of three levels:

1. Level zero. This level is the first group, which corresponds to the Gener column. At this level, the indent is not visible.

2. Level one. This level is the second group, which corresponds to the Age column. At this level, the indent is 100 pixels in width.

3. Level three. This level corresponds to the data itself. At this level, the indent is 255 pixels in width.

The indent is equal to indent width * level + 55 pixels for a nested data row.

The 55 pixels in width corresponds to the group icon used to open and close the group.