How Do I Create A Column Using A SVG Icon Widget As A Sort Icon?
The data grid control uses classical sort icons. But now with the introduction of widgets and more especially the SVG Icons Widget, we can use a SVG icon to display a more descriptive image. In this example, we will see how to use DGH to create a custom header sort icon using a “SVG Icon Widget” instead of the classical sort icon.
Preparation
Begin with a data grid on your stack and then double-click on it to open DGH.
Expand the Columns topic and click the Edit... button for the Columns Builder... Item to open the Column Builder view.
Add three columns to it using the + button (1) next to the Columns Builder Preview area. While still in the Column Builder expand the Column Header Controls topic (2) in the DGH’s Property's list.
Double-click on column Col1's header (3) to expand the Template Area. (4)
Then, in the Template Area, using the Column Content type popup, select the Header template (5).
Create A Custom Header
Drag the Label Header + SVG Sort Icon control from the property palette's Value column (1), and drop it inside the template header area (2).
Now we need some SVG Icons. For this example we will select from the default set of SVG icons provided by LiveCode.
Open the Column Header Parameters topic (1) in the properties list and then click the modify ... button for the Ascending Sort Icon property (2).
Now we need some SVG Icons. For this example we will select from the default set of SVG icons provided by LiveCode.
Open the Column Header Parameters topic (1) in the properties list and then click the modify ... button for the Ascending Sort Icon property (2).
For the needs of this example, we have selected the A to Z icon for ascending sort and the Z to A icon for descending sort.
The column header and its new SVG Icon widget sort icons is now ready to use! Click the Apply button to apply these modifications to the data grid.
Test The Result
Click on the "Browse" tool and click on the header for column 1.
Click again to see the descending sort.
Customizing the sort icon per column also allows for an alphabetical sort icon for column 1 and a numeric sort icon for column 2, matching the column's contents in both cases.
Compare this with with the classical icons by clicking on column 3's header.
0 Comments
Add your comment