This Question is Assumed Answered

1 "correct" answer available (5 pts) 15 "helpful" answers available (3 pts)
4 Replies Last post: May 7, 2008 1:43 PM by mgordon

How to add images, checkboxes to a recordgrid column

May 7, 2008 5:21 AM

Click to view varshuj's profile Level 2 varshuj 29 posts since
Mar 6, 2008

Hi,

I want to add checkbox column and image column to recordgrid.

On check-event , Checkbox will select a particular record in recordgrid.

Image in each record will depend on database value for example - if database value is 1 then Image 'X' and if database value 2 then Image 'y'

How to do this in curl?

Thanks in advance.

  • Varsha
Click to view friedger's profile MVP friedger 95 posts since
Jan 13, 2008
1. Re: How to add images, checkboxes to a recordgrid column May 7, 2008 5:36 AM

There is a very nice example in the Developer Guide, section "Data Records and Grids", subsection "Creating a Custom Cell". See CurlDocs It shows how to customize a cell, i.e. show an checkbox or an image.

For the cell with the checkbox know about the column and record-index and therefore can also set the selection. Here you can use grid.select-region to select a cell.

I hope this helps, let me know if it is still unclear.


Friedger

Click to view varshuj's profile Level 2 varshuj 29 posts since
Mar 6, 2008
2. Re: How to add images, checkboxes to a recordgrid column May 7, 2008 6:40 AM
in response to: friedger

Thanks for your reply

but how can i handle event with the image in a RecorGridCell.


I want to do some database operation on imageclick event for that row.

Also can you please elaborate more on selecting a row on check-event of the checkbox in RecorGridCell.

Thanks

Varsha

Click to view phil's profile Curl phil 28 posts since
Oct 17, 2007
3. Re: How to add images, checkboxes to a recordgrid column May 7, 2008 12:11 PM
in response to: varshuj
There are a number of ways to create a clickable object with an image. Probably the simplest way is to create a button whose label is the image, e.g.:

{CommandButton label = {image source = "image.gif"}, {on Action do <...>}}}
Click to view mgordon's profile Curl mgordon 36 posts since
Oct 17, 2007
4. Re: How to add images, checkboxes to a recordgrid column May 7, 2008 1:43 PM
Here is another example adapted from the example that Friedger mentioned. I'm not exactly sure what you wanted so this example shows a few different things.

Note that when you use a boolean field, you automatically get a checkbox in the column. In this example, the picture is shown only if the checkbox is checked.

When you click on a record selector at the left, the "current" record changes. I added an event handler for CurrentRecordChanged and it increments the count field for the newly current record. These counts are displayed in the last column.

This example sets column-selection-enabled? = true, so you can select both columns and rows. The selection is captured by the SelectionChanged event handler and the number of rows and columns selected is displayed at the bottom. This shows that the "current" record is not the same as the "selected" record(s).

The custom image cell computes the url to use. You could just as easily use an int value for the "picture" field, and do some other kind of computation, such as looking it up in another table of some kind.

{curl 6.0, 7.0 applet}
{title RecordGrid Images and Checkboxes Example}

{import * from CURL.DATA-ACCESS.BASE}

{let dataset:RecordSet = 
    {RecordSet
        {RecordFields
            {RecordField "id", 
                caption = "ID", domain = int,
                index-type = RecordFieldIndexType.unique
            },
            {RecordField "count", domain = int},
            {RecordField "selected", 
                caption = "\u221a", domain = bool
            },
            {RecordField "picture", 
                caption = "Picture", domain = String
            }
        },
        {RecordData id = 1, picture = "default/images/a-icon.gif"},
        {RecordData id = 2, picture = "default/images/b-icon.gif"},
        {RecordData id = 3, picture = "default/images/c-icon.gif"},
        {RecordData id = 4, picture = "default/images/d-icon.gif"},
        {RecordData id = 5, picture = "default/images/e-icon.gif"}
    }
}

{define-class public open IdImageCell
  {inherits StandardRecordGridCell}
  
  field private image:Frame = 
      {Frame width={make-elastic}, height={make-elastic}}

  {constructor public {default}
    {construct-super}
    set self.height = 42px
    {self.add-internal self.image}
    set self.cells-take-focus? = self.can-update?
  }
  
  {method public open {refresh-data}:void
    let image-url:Url = {url "curl://install/docs/" & {self.get-data}}
    {if self.record["selected"] asa bool then
        set self.image.background = image-url
     else
        {unset self.image.background}
    }
  }
}

{let selections:Frame = {Frame}}
{let rg:RecordGrid = 
        {RecordGrid 
            width = 2in, height = 3in,
            record-source = dataset,
            editable? = true, column-selection-enabled? = true,
            automatic-columns? = false,
            {RecordGridColumn  width = 18pt, "id"},
            {RecordGridColumn  width = 18pt, "selected"},
            {RecordGridColumn  width = 53px, "picture",
                column-resizable? = false, cell-spec = IdImageCell
            },
            {RecordGridColumn  width = 36pt, "count"},
            {on CurrentRecordChanged at rg:RecordGrid do
                {if-non-null r = rg.current-record then
                    set r["count"] = r["count"] asa int + 1
                }
            },
            {on SelectionChanged at rg:RecordGrid do
                {type-switch rg.selection
                 case rgs:RecordGridSelection do
                    {selections.add replace? = true,
                        {format "Rows: %s  Columns: %s",
                            rgs.record-count, rgs.column-count
                        }
                    }
                }
            }
        }
}

{value rg}

{value selections}