Customize icons

Description

Many of the icons used with certain images (e.g. the Row Expander icon) in a grid can be customized.

The ' Customize icons ' property in the ' Customization ' section in the ' Properties ' pane is where you can alter icons using the Define Grid Icons dialog. To open this dialog click the button [dot_img] next to the Customize icons property. When icons in the Define Grid Icons dialog are changed from their default setting they appear in bold. If you have defined a icon map that you would like to use in a different Grid, click the Export hyperlink button. You can also import maps using the Import hyperlink.

The list of icons show here is not the exhaustive list of icons that can be customized. Many of the icons have explicit prompts in the Grid builder.

The Define Grid Icons Dialog:

images/1_icons.png
You can use icons instead of text for the 'Search' button and 'Clear Search' link. To customize the icon you can either define a mapping in the style-sheet editor (to affect a change across all components that use that style), or make a local change here in Grid, Properties, Customization, Icons.

The following example shows how to insert a customized icon into a grid placeholder using the Customize icons property. The placeholders being customized in this case are RowExpander.Open and RowExpander.Close. These instructions will also show how to create the RowExpander where the icons appear. Before proceeding it would be best to have at least one component pre-defined; to use with the row expander.

Customize a Grid Icon: 

  1. Create two simple icons using whatever paint or photoshop program works for you. These icons were created as 24 x 24 pixel png files.

    • images/01_duck.png
      duck icon
    • images/01_nest.png
      duck nest icon
  2. From the Web Projects Control Panel open the Grid builder . On the Design tab's Component Type page under Grid Layout: menu select a Tabular grid.

  3. On the Data Source page choose the type of data you want to display your grid. This example uses SQL .

  4. Under Query(DBF) or Query(AlphaDAO) , select the table that you want to draw data from.

  5. Go to Fields and add a number of fields to your grid by moving them from the Available Fields list to the Selected fields list.

  6. Go back to the Query page. Find the Select Primary Key button and click it. A primary key is what you use identify records uniquely. It must be one of the fields defined in your grid; preferably one with differing entries.

  7. The Select Primary Keys dialog will open. From the fields listed, check one that appears in your grid and click OK .

  8. Now go to the Properties page. Scroll down to the Row Expander properties section and check the Has row expander property.

    images/01_icon3.png
  9. A list of Row expander properties will open. Find the Row Expander linked content property and click the button next to it.

    images/01_icon4.png
  10. The Define Linked Content Dialog will open. Click the Add Object button and from the drop-down select Add Linked Component .

    images/01_icon5.png
  11. This will bring you to the Select Component Dialog, which will show you all of the components that you have created. Select a component from the list and click OK .

    images/01_icon6.png
  12. Click OK again to close the Define Linked Content dialog and scroll up the Properties page until you find the Customization properties section.

    images/01_icon7.png
  13. Find the Customize icons property and click the button [dot_img] next to it.

    images/01_icon8.png
  14. The Define Grid Icons dialog will open. In the list of icons find the images.RowExpander.Open Placeholder and click the button [dot_img] next to it.

    images/01_icon9.png
  15. The Specify image dialog will open. Click the Image in Web Project or Style radio button and then hit the Select button and choose the Select from Web Project Folder option.

    images/01_icon10.png
  16. A Select Image dialog will open. Click the Add Image to Project button.

    images/01_icon11.png
  17. The Add Image to Project dialog will appear. Click the 'up' button next to Source filename: and navigate to where you stored your first simple icon on you computer.

    images/01_icon12.png
  18. Click OK , OK , and OK again to get back to the Define Grid Icons page. The altered icon should appear in bold lettering.

    images/01_icon13.png
  19. Next Select the images.RowExpander.Close Placeholder and click the button [dot_img] next to it.

    images/01_icon14.png
  20. Repeat steps 17 through 19 for this placeholder only this time add a different icon in step 18. Your Define Grid Icons dialog should look something like this.

    images/01_icon15.png
  21. Click OK and go to Working Preview or Live Preview. You should now see your new Row Expander icon. Click on it and you should see it change to the second icon you defined.

    • New Row Expander Closed 'Duck' Icon

      images/01_icon.png
    • New Row Expander Open 'Nest' Icon

      images/01_icon2.png