How Do I Create A Custom Header With A CheckBox?
Sometimes a data grid has a column consisting of checkboxes to enable a user to select an option one or more rows of the displayed table.
In situations where there could be many such rows a ‘master’ checkbox to select all rows (or un select all) can be useful.
Using DGH we can add such ‘master’ checkbox to the header of a data grid column.
Open the Column Builder
In a stack, add a fresh data grid and double-click on it to open the DGH's Table Properties view. Once DGH has opened, expand the Columns topic, then click on the Edit.. button for the Columns Builder... entry.
Add The Required Column Header Controls
Inside the Column Builder add some columns by using the + button (1)
Select one of the columns (for example column 2) and open the Column Header Controls topic in the Property list. (2)
Open Template Area by either double-clicking onto the column 2 header (3) or using the reveal arrow icon (4)
Choose Header in the Column Content popup menu.
We are now able to drag and drop a Checkbox Header control (1) inside the header template area (2) The change is immediately visible inside the Columns Builder Preview (3)
Set Header Parameters
DGH can help us setting the appearance of the checkbox inside the header.
Expand the Checkbox Header Parameters topic in the properties list.
Here we can:
- center the checkbox (1)
- display its label (2)
- input a label (3)
Looking at the Preview we can see that our checkbox's label is overwriting the column's label. We can fix this by hiding the column's label.
To hide the column label, expand the Columns topic, double-click in the Value text entry area of the Label property and type a space character.
We can test the result of our ‘master’ checkbox by checking it inside the Preview. (1) DGH changes the column content accordingly (2).
It will do same for the final data grid.
Click the Apply button to save the changes to the selected data grid.
That's it!
The column header is ready.
To learn how to add a checkbox inside a column, you could also follow this lesson:
0 Comments
Add your comment