With the initial configuration, we have the following:
The Employee Id column does not define its width nor its resizable property.
You can change the Surname column width through the UI because the configuration sets the resizable property and the minWidth and maxWidth properties have a different value of width property.
The Name column is resizable, and the minWidth and maxWidth properties will take the same value as the width property because this configuration does not set their values. Therefore, you will not be able to change the Name column width.
Finally, for the Email column, only the width property is set.
As you can see in the following gif, you can only change the Surname column width but not for the Name column.
When a column is resizable, the cursor changes to col-resize, and when you start resizing it, the DikeGrid draws a vertical line. The color of the line will be the accent color.
Changing the width through the vertical row lines
If the vertical lines per row are visible, you can resize a column using them.
Let us make the vertical lines per row visible. First, open the Floating Configuration Panel, then check the Vertical Row Lines checkbox from the Appearance group.
In the following gif, you can see how dragging a vertical line changes the size of the column.
Remember, columns displayed in the left or center panel have their gutter-line at their right. See the Grid Structure - Gutters section.
Columns in the right panel
Columns displayed in the right panel have their gutter-line at their left. Therefore, these columns change their size in an inverse direction compared to columns displayed in the left or center panel.
When you resize a column in the right panel to increase its width, you must move its gutter-line to the left.
If you want to decrease the column width, move the gutter-line to the right.
Let us create two more columns in the right panel, Hire Date and Age columns.
onColumnDefInstance(columnDef: DikeGridColumnDef<Employee>): void {// Define the Email column:constemailColumn=newDikeTextColumnDef<Employee>('email','Email');emailColumn.width =300;emailColumn.order =3;// Then, add the colums to the DikeGridComponent instance:columnDef.addColumns(emailColumn);// Define the Age column to be displayed in the right Panel:constageColumn=newDikeTextColumnDef<Employee>('age','Age');ageColumn.width =85;ageColumn.maxWidth =150;ageColumn.order =2;ageColumn.resizable =true;ageColumn.panel ='rightPanel';// Add the Age column:columnDef.addColumns(ageColumn);// Grab the DikeGridColumnDef<T> instance:this.columnDef = columnDef;// Once all the columns have been added:Promise.resolve().then(() => {// Find the Employee Id column:constemployeeId=this.columnDef.findColumn(column =>column.fieldName ==='employeeId');// Set the initial values in the text boxes:if (!!employeeId &&isDikeDataColumnDef(employeeId)) {this.columnSizingForm.patchValue({ width:employeeId.width, minWidth:employeeId.minWidth, maxWidth:employeeId.maxWidth, resizable:employeeId.resizable }); } });}
Dragging the panel division line
When you drag the line that divides two adjacent panels, all columns resize evenly. The resizing operation finishes until all columns reach their minimum or maximum width.
The same occurs for columns displayed in the left panel.
You can change the width of the panel division line when the panel is being resized by providing an Injection Token called DIVISION_PANEL_LINE_WIDTH_RESIZING. By default, the width is 5 pixels in width.
DikeGrid Column API
You can change the size properties using the API from the DikeGridColumnDefservice instance.
Since the Employee Id column is not resizable and its width property is not defined, let us add the UI controls and the corresponding code to change its width using the DikeGrid API.
The previous form is added above the dike-grid selector generating the following output:
Now, you can change the Employee Id column's width, min-width, and max-width. If you click on the checkbox next to the Apply button, you can mark the Employee Id column as resizable.
onChangeColumnSize(): void {// Search the employeeId column:consttargetColumn=this.columnDef.findColumn(column =>column.fieldName ==='employeeId');if (!!targetColumn &&isDikeDataColumnDef(targetColumn)) {// If the column is found:constwidth:number=this.columnSizingForm.get('width').value asnumber;constminWidth:number|null=this.columnSizingForm.get('minWidth').value;constmaxWidth:number|null=this.columnSizingForm.get('maxWidth').value;// Change the column size:this.columnDef.changeColumnWidth(targetColumn, { width, minWidth, maxWidth }); }}
Once the input elements pass the validators, the button can invoke the callback method. Inside the callback definition:
Firstly, you must find the column to be modified.
Notice how the found column instance is narrowing to a reference of type DikeDataColumnDef, due to the findColumn() method returns a reference of type DikeColumnDef.
The code uses the changeColumnWidth() method to pass the column instance and the size properties, where only the width is mandatory.
Internally, the DikeGridComponent validates the width, minWidth, and maxWidth arguments. For instance, if minWidth is greater than the width, the width value is assigned to minWidth.
Despite the resizable property for the Employee Id column is not set, the size properties of the column can be changed using the API.
Setting the resizable property
Remember that the resizable property allows the user to change the width of a column or column group.
The following code snippet is the callback attached to the checkbox change Event.
column-sizing.component.ts
onResizableChange(value: MatCheckboxChange): void {// Search the employeeId column:consttargetColumn=this.columnDef.findColumn(column =>column.fieldName ==='employeeId');if (!!targetColumn) {// If the column is found, change its resizable property:this.columnDef.setColumnResizable(targetColumn,value.checked); }}
Once again, the target column must be found, in this case. The method setColumnResizable() marks the Employee Id column as resizable.
The previous output shows how the Employee Id column is resized after setting it as resizable. We must have changed the minWidth, or maxWidth properties as well.
Even though a column is marked as resizable, if the minWidth and maxWidth properties have the same value as the width property, the column will not resize using the UI.
Column Sizing Event
If you notice, the last output reports the changes in the width property of the Employee Id column when this one is being resized.
The DikeGridComponent emits an Event called columnSizeChange. This event is emitted every time a data column changes its size.
Column groups marked as resizable can change in width only from the UI.
As you can see in the previous output:
When resizing the Personal Info group, the operation draws a vertical line with an accent color until the columns.
The resize process draws the line only into the column's boundary for the Surname column.
Remember, for resizing a column or a group, you must grab the gutter-line for the column. See the Grid Structure - Gutters section for more details.
Summary
Once you define a column at the creation phase, you can change its width at execution time, either from the UI or the API. Columns that are resizing through the UI must be resizable.
The DikeGrid instance only sends the changed data columns when the resizing operation occurs, not column groups.
