How Do I Change the Sort Arrow Icon Of My DataGrid?
There may be times when you require the data grid sort icons to appear different to the default ones supplied.
DGH makes this possible in only a few clicks.
Accessing The Image Picker
For this example we require a data grid with three columns and a couple of images (1) to use for our new sort icons.
First open DGH by double clicking onto the data grid group on your stack, then open the "Header" topic in the Table Properties view.
In the Table Properties view, DGH shows the default ID's used by the data grid library for displaying sort icons (2).
The Sort Ascending icon's ID is 103004. The Sort Descending icon's ID is 103005. Changing icons is simply providing new image IDs for these properties.
Select A New Icon With The Image Picker
We will use DGH's Image Picker to select our images for the new sort icons.
Click on the modify ... button in for the Sort Icon - Ascending value. (1) This will display a small window of an Image Picker. (2)
Click on the Choose button (the label will change to Cancel.)
Move the mouse over the image you want to become the ascending icon and click to select it. For the purpose of this example, images are on the same card as the data grid.
In this case the images were imported as a control and actually reside on the card. However you can place the image anywhere in your project. Just open the card where the image is located and select it with DGH's Image Picker.
Once you have selected the image, the Choose (now labelled Cancel) button in the Image Picker changes to Confirm.
DGH is awaiting confirmation before to applying the change.
Click on the Confirm button to apply the change to the Sort Icon - Ascending icon property.
The change is immediately applied. Inside DGH, the icon id has changed. (1)
Select the "Browse" tool from the LiveCode Tools Palette and click on the column header of the data grid.
And inside the data grid the new Sort Icon is used. (2)
You can now do same with the Sort Icon - Descending property.
To Return To The Default Icon
If you have not fully satisfied by the result, or if you want to revert back to the default icon, you can do it by clicking the “modify” ([…]) button and then click the "Default..." Image Picker window's button.
Click OK to confirm to DGH that you wish to proceed.
The default value is restored (1) and the change is applied immediately to the data grid on the card (2).
An important characteristic about sort icons provided by default with the datagrid library to consider before to select an icon, is the size of the image to use. The default header is using a sort icon button of size 9 width and 8 height. So for a better result you must use icons of this size or smaller. If you want bigger icons, you have to change the default header behavior yourself, or to build a Custom Header by using DGH.
0 Comments
Add your comment