<![CDATA[Curl Global Community - Try 3: Displaying Data in a Grid]]> https://communities.curl.com/ Wed, 29 Apr 2026 07:20:20 +0000 MyBB <![CDATA[Page 8: Extra Practice]]> https://communities.curl.com/showthread.php?tid=62 Thu, 16 Jun 2011 07:39:21 +0000 https://communities.curl.com/showthread.php?tid=62 Extra Practice

Practice Problem 1: Application

In the "Application" sample, add a button whose function is to delete a selected line.

Hint: To delete a selected line, use {RecordGrid.delete-selection}.

Solution

Solution Program: c:\Curl\Try3\04_exercise1\start.curl

Code:
{value
    let data:RecordSet =
        {RecordSet
            {RecordFields
                {RecordField name, domain = String},
                {RecordField age, domain = int},
                {RecordField score, domain = int},
                {RecordField city, domain = String},
                {RecordField tel, domain = String}
            },
            {RecordData name = Matt, age = 33, score = 88, city = Cambridge, tel = 555-1567},
            {RecordData name = Sarah, age = 27, score = 79, city = Seattle, tel = 555-5692},
            {RecordData name = Jacob, age = 26, score = 90, city = Chicago, tel = 555-7259},
            {RecordData name = Miles, age = 23, score = 98, city = Miami, tel = 555-2644},
            {RecordData name = Anna, age = 27, score = 81, city = San Diego, tel = 555-9968},
            {RecordData name = Paul, age = 28, score = 86, city = Denver, tel = 555-6389},
            {RecordData name = Diana, age = 25, score = 85, city = Atlanta, tel = 555-4712}
        }
    let rg:RecordGrid = {RecordGrid
                            record-source = data,
                            height = 3cm,
                            width = 10cm
                        }
    let sort-button:CommandButton = {CommandButton
                                        label = Sort score in descending order,
                                        {on Action do
                                            set rg.sort = score DESC
                                        }
                                    }
    let filter-button:CommandButton = {CommandButton
                                          label = Display data of city 'Miami',
                                          {on Action do
                                              set rg.filter = {RecordData city = Miami}
                                          }
                                      }
    let reverse-button:CommandButton = {CommandButton
                                           label = Cancel the filter,
                                           {on Action do
                                               set rg.filter = null
                                           }
                                       }
    let delete-button:CommandButton = {CommandButton
                                          label = Delete the selected line,
                                          {on Action do
                                              {rg.delete-selection}
                                          }
                                      }
    {rg.set-frozen-region 0, 1}
    {VBox
        rg,
        {HBox
            sort-button,
            filter-button,
            reverse-button,
            delete-button
        }
    }
}


]]> Extra Practice

Practice Problem 1: Application

In the "Application" sample, add a button whose function is to delete a selected line.

Hint: To delete a selected line, use {RecordGrid.delete-selection}.

Solution

Solution Program: c:\Curl\Try3\04_exercise1\start.curl

Code:
{value
    let data:RecordSet =
        {RecordSet
            {RecordFields
                {RecordField name, domain = String},
                {RecordField age, domain = int},
                {RecordField score, domain = int},
                {RecordField city, domain = String},
                {RecordField tel, domain = String}
            },
            {RecordData name = Matt, age = 33, score = 88, city = Cambridge, tel = 555-1567},
            {RecordData name = Sarah, age = 27, score = 79, city = Seattle, tel = 555-5692},
            {RecordData name = Jacob, age = 26, score = 90, city = Chicago, tel = 555-7259},
            {RecordData name = Miles, age = 23, score = 98, city = Miami, tel = 555-2644},
            {RecordData name = Anna, age = 27, score = 81, city = San Diego, tel = 555-9968},
            {RecordData name = Paul, age = 28, score = 86, city = Denver, tel = 555-6389},
            {RecordData name = Diana, age = 25, score = 85, city = Atlanta, tel = 555-4712}
        }
    let rg:RecordGrid = {RecordGrid
                            record-source = data,
                            height = 3cm,
                            width = 10cm
                        }
    let sort-button:CommandButton = {CommandButton
                                        label = Sort score in descending order,
                                        {on Action do
                                            set rg.sort = score DESC
                                        }
                                    }
    let filter-button:CommandButton = {CommandButton
                                          label = Display data of city 'Miami',
                                          {on Action do
                                              set rg.filter = {RecordData city = Miami}
                                          }
                                      }
    let reverse-button:CommandButton = {CommandButton
                                           label = Cancel the filter,
                                           {on Action do
                                               set rg.filter = null
                                           }
                                       }
    let delete-button:CommandButton = {CommandButton
                                          label = Delete the selected line,
                                          {on Action do
                                              {rg.delete-selection}
                                          }
                                      }
    {rg.set-frozen-region 0, 1}
    {VBox
        rg,
        {HBox
            sort-button,
            filter-button,
            reverse-button,
            delete-button
        }
    }
}


]]> <![CDATA[Page 7: Summary]]> https://communities.curl.com/showthread.php?tid=61 Thu, 16 Jun 2011 07:37:08 +0000 https://communities.curl.com/showthread.php?tid=61 TRY 3 Summary

Create the data to be displayed with RecordSet

Data creation

Code:
{RecordSet
    {RecordFields
        {RecordField field name 1, [option 1 = value, …] } ,
        || Describe field value
        {RecordField field name x, [option x = value, …] } ,
    },
    {RecordData field name 1 = data, …},
    || Describe record value
    {RecordData field name 1 = data, …},
}

Display the data using a Grid with RecordGrid

Grid display

Code:
{RecordGrid
    record-source = RecordSet
    || ,
    || Option = value
}

Options for modifying RecordGrid Functionality



Options for modifying RecordGrid appearance



Sorting and Filtering

Data sorting

Code:
set RecordGrid-name.sort = field name

Data filtering

Code:
set RecordGrid-name.filter = {RecordData field name = value}

Note: By using RecordSort and RecordFilter, you can specify more complex sorting and filtering.



.png   3-5.PNG (Size: 13.32 KB / Downloads: 1377)

.png   3-6.PNG (Size: 14.11 KB / Downloads: 1463) ]]> TRY 3 Summary

Create the data to be displayed with RecordSet

Data creation

Code:
{RecordSet
    {RecordFields
        {RecordField field name 1, [option 1 = value, …] } ,
        || Describe field value
        {RecordField field name x, [option x = value, …] } ,
    },
    {RecordData field name 1 = data, …},
    || Describe record value
    {RecordData field name 1 = data, …},
}

Display the data using a Grid with RecordGrid

Grid display

Code:
{RecordGrid
    record-source = RecordSet
    || ,
    || Option = value
}

Options for modifying RecordGrid Functionality



Options for modifying RecordGrid appearance



Sorting and Filtering

Data sorting

Code:
set RecordGrid-name.sort = field name

Data filtering

Code:
set RecordGrid-name.filter = {RecordData field name = value}

Note: By using RecordSort and RecordFilter, you can specify more complex sorting and filtering.



.png   3-5.PNG (Size: 13.32 KB / Downloads: 1377)

.png   3-6.PNG (Size: 14.11 KB / Downloads: 1463) ]]> <![CDATA[Page 6: Structure of a Program that Sorts and Filters the Data]]> https://communities.curl.com/showthread.php?tid=60 Thu, 16 Jun 2011 07:32:17 +0000 https://communities.curl.com/showthread.php?tid=60 Structure of a Program that Sorts and Filters the Data

The RecordGrid data can be sorted and filtered.


1. Sorting data: sort

Code:
set rg.sort = score DESC

We can use sort to sort the data displayed by RecordGrid. To do so, we specify the names of the fields to be sorted as character strings. As in this example, when we want to sort the data into descending order, we add DESC after each field name. We can specify multiple fields by delimiting their names with a comma (,).

Code:
set rg.sort = score DESC, age DESC

By using RecordSort, we can specify more complex types of sorting.

2. Filtering data: filter

Code:
set rg.filter = {RecordData city = Miami}

To filter the data to be displayed, we use the filter field. To specify the fields and data to be filtered, we use RecordData. Using RecordFilter, we can specify relatively complex filtering. If we specify null, then no filtering is performed.

3. Fixing the display region: set-frozen-region

Code:
{rg.set-frozen-region 0,1}

Using set-frozen-region, we can fix the position of the RecordGrid window frame. This prevents the scrolling of the specified lines and columns. There are several other APIs for managing fixed lines and columns. These are described in the Curl API documentation.

4. Displaying the layout: VBox

Code:
{VBox
    rg,
    {HBox
        sort-button,
        filter-button,
        reverse-button
    }
}

As explained above, the final expression specified in the value block is displayed on the screen. In the current example, this VBox is the final expression. Therefore, the screen layout will appear as shown in the figure.



]]> Structure of a Program that Sorts and Filters the Data

The RecordGrid data can be sorted and filtered.


1. Sorting data: sort

Code:
set rg.sort = score DESC

We can use sort to sort the data displayed by RecordGrid. To do so, we specify the names of the fields to be sorted as character strings. As in this example, when we want to sort the data into descending order, we add DESC after each field name. We can specify multiple fields by delimiting their names with a comma (,).

Code:
set rg.sort = score DESC, age DESC

By using RecordSort, we can specify more complex types of sorting.

2. Filtering data: filter

Code:
set rg.filter = {RecordData city = Miami}

To filter the data to be displayed, we use the filter field. To specify the fields and data to be filtered, we use RecordData. Using RecordFilter, we can specify relatively complex filtering. If we specify null, then no filtering is performed.

3. Fixing the display region: set-frozen-region

Code:
{rg.set-frozen-region 0,1}

Using set-frozen-region, we can fix the position of the RecordGrid window frame. This prevents the scrolling of the specified lines and columns. There are several other APIs for managing fixed lines and columns. These are described in the Curl API documentation.

4. Displaying the layout: VBox

Code:
{VBox
    rg,
    {HBox
        sort-button,
        filter-button,
        reverse-button
    }
}

As explained above, the final expression specified in the value block is displayed on the screen. In the current example, this VBox is the final expression. Therefore, the screen layout will appear as shown in the figure.



]]> <![CDATA[Page 5: Sorting and Filtering Data]]> https://communities.curl.com/showthread.php?tid=59 Thu, 16 Jun 2011 07:27:04 +0000 https://communities.curl.com/showthread.php?tid=59 Application: Sorting and Filtering Data

Create the 'Try 3-3' Project

Close the Try 3-2 project . Next from the IDE 'File' menu, select 'New Project'. In the 'New Project' dialog box, select “Applet Project” (1), input “Try3-3” (2), specify c:\Curl\lesson\Try3\03_sort_filter in the “Directory” field (3), set the API Version to 6.0 (4), and then click OK (5).



Inputting the Program

Next, we’ll input the program. You can copy the program code below or use c:\Curl\Try3\03_sort_filter\start.curl and then paste it into the editor in the IDE.

Code:
{value
    let data:RecordSet =
        {RecordSet
            {RecordFields
                {RecordField name, domain = String},
                {RecordField age, domain = int},
                {RecordField score, domain = int},
                {RecordField city, domain = String},
                {RecordField tel, domain = String}
            },
            {RecordData name = Matt, age = 33, score = 88, city = Cambridge, tel = 555-1567},
            {RecordData name = Sarah, age = 27, score = 79, city = Seattle, tel = 555-5692},
            {RecordData name = Jacob, age = 26, score = 90, city = Chicago, tel = 555-7259},
            {RecordData name = Miles, age = 23, score = 98, city = Miami, tel = 555-2644},
            {RecordData name = Anna, age = 27, score = 81, city = San Diego, tel = 555-9968},
            {RecordData name = Paul, age = 28, score = 86, city = Denver, tel = 555-6389},
            {RecordData name = Diana, age = 25, score = 85, city = Atlanta, tel = 555-4712}
        }
    let rg:RecordGrid = {RecordGrid
                            record-source = data,
                            height = 3cm,
                            width = 10cm
                        }
    let sort-button:CommandButton = {CommandButton
                                        label = Sort score in descending order,
                                        {on Action do
                                            set rg.sort = score DESC
                                        }
                                    }
    let filter-button:CommandButton = {CommandButton
                                          label = Display data of city 'Miami',
                                          {on Action do
                                              set rg.filter = {RecordData city = Miami}
                                          }
                                      }
    let reverse-button:CommandButton = {CommandButton
                                           label = Cancel the filter,
                                           {on Action do
                                               set rg.filter = null
                                           }
                                       }
    {rg.set-frozen-region 0, 1}
    {VBox
        rg,
        {HBox
            sort-button,
            filter-button,
            reverse-button
        }
    }
}

Save the File, and then Execute the Program

After inputting the code, save the file, and then execute the program. The following result will appear in your browser.


]]> Application: Sorting and Filtering Data

Create the 'Try 3-3' Project

Close the Try 3-2 project . Next from the IDE 'File' menu, select 'New Project'. In the 'New Project' dialog box, select “Applet Project” (1), input “Try3-3” (2), specify c:\Curl\lesson\Try3\03_sort_filter in the “Directory” field (3), set the API Version to 6.0 (4), and then click OK (5).



Inputting the Program

Next, we’ll input the program. You can copy the program code below or use c:\Curl\Try3\03_sort_filter\start.curl and then paste it into the editor in the IDE.

Code:
{value
    let data:RecordSet =
        {RecordSet
            {RecordFields
                {RecordField name, domain = String},
                {RecordField age, domain = int},
                {RecordField score, domain = int},
                {RecordField city, domain = String},
                {RecordField tel, domain = String}
            },
            {RecordData name = Matt, age = 33, score = 88, city = Cambridge, tel = 555-1567},
            {RecordData name = Sarah, age = 27, score = 79, city = Seattle, tel = 555-5692},
            {RecordData name = Jacob, age = 26, score = 90, city = Chicago, tel = 555-7259},
            {RecordData name = Miles, age = 23, score = 98, city = Miami, tel = 555-2644},
            {RecordData name = Anna, age = 27, score = 81, city = San Diego, tel = 555-9968},
            {RecordData name = Paul, age = 28, score = 86, city = Denver, tel = 555-6389},
            {RecordData name = Diana, age = 25, score = 85, city = Atlanta, tel = 555-4712}
        }
    let rg:RecordGrid = {RecordGrid
                            record-source = data,
                            height = 3cm,
                            width = 10cm
                        }
    let sort-button:CommandButton = {CommandButton
                                        label = Sort score in descending order,
                                        {on Action do
                                            set rg.sort = score DESC
                                        }
                                    }
    let filter-button:CommandButton = {CommandButton
                                          label = Display data of city 'Miami',
                                          {on Action do
                                              set rg.filter = {RecordData city = Miami}
                                          }
                                      }
    let reverse-button:CommandButton = {CommandButton
                                           label = Cancel the filter,
                                           {on Action do
                                               set rg.filter = null
                                           }
                                       }
    {rg.set-frozen-region 0, 1}
    {VBox
        rg,
        {HBox
            sort-button,
            filter-button,
            reverse-button
        }
    }
}

Save the File, and then Execute the Program

After inputting the code, save the file, and then execute the program. The following result will appear in your browser.


]]> <![CDATA[Page 4: Structure of a Program for Setting the RecordGrid's Appearance and Functiona]]> https://communities.curl.com/showthread.php?tid=58 Thu, 16 Jun 2011 07:24:26 +0000 https://communities.curl.com/showthread.php?tid=58 Structure of a Program for Setting the RecordGrid's Appearance and Functionality



1. Setting function-modifying options such as 'cells-take-focus?'

Code:
cells-take-focus? = false,
column-movable? = false,
column-resizable? = false,
editable?  = false,
multiple-selection-enabled? = false,
record-selection-enabled? = false,
column-selection-enabled? = true,

As we found in Basics 1, RecordGrid has many actions that the user can perform. These can be modified by specifying options. Let’s take a brief look at these options.





Let’s take a look at what happens when we change the true/false settings.

2. Setting options that affect the appearance

Code:
display-filler-column? = true,
display-navigation-panel? = false,
alternate-row-background = #ddeeee,
grid-line-color = #aaaaaa,
horizontal-grid-line-width = 1px,
vertical-grid-line-width = 2px

In (1), we touched on the function-modifying options. Here, we’ll look at those options that are used to change the appearance.




Try changing the values of the above options to see how they affect the appearance.


.png   3-3.PNG (Size: 13.04 KB / Downloads: 1432)

.png   3-4.PNG (Size: 19.63 KB / Downloads: 1343) ]]> Structure of a Program for Setting the RecordGrid's Appearance and Functionality



1. Setting function-modifying options such as 'cells-take-focus?'

Code:
cells-take-focus? = false,
column-movable? = false,
column-resizable? = false,
editable?  = false,
multiple-selection-enabled? = false,
record-selection-enabled? = false,
column-selection-enabled? = true,

As we found in Basics 1, RecordGrid has many actions that the user can perform. These can be modified by specifying options. Let’s take a brief look at these options.





Let’s take a look at what happens when we change the true/false settings.

2. Setting options that affect the appearance

Code:
display-filler-column? = true,
display-navigation-panel? = false,
alternate-row-background = #ddeeee,
grid-line-color = #aaaaaa,
horizontal-grid-line-width = 1px,
vertical-grid-line-width = 2px

In (1), we touched on the function-modifying options. Here, we’ll look at those options that are used to change the appearance.




Try changing the values of the above options to see how they affect the appearance.


.png   3-3.PNG (Size: 13.04 KB / Downloads: 1432)

.png   3-4.PNG (Size: 19.63 KB / Downloads: 1343) ]]> <![CDATA[Page 3: Using Options to Modify the RecordGrid Appearance and Functionality]]> https://communities.curl.com/showthread.php?tid=57 Thu, 16 Jun 2011 07:20:42 +0000 https://communities.curl.com/showthread.php?tid=57 Basics 2: Using Options to Modify the RecordGrid Appearance and Functionality

Create the 'Try 3-2' Project

Close the Try 3-1 project . Next from the IDE 'File' menu, select 'New Project'. In the 'New Project' dialog box, select “Applet Project” (1), input “Try3-2” (2), specify c:\Curl\lesson\Try3\02_grid_option in the “Directory” field (3), set the API Version to 6.0 (4), and then click OK (5).



Inputting the Program

Next, we’ll input the program. You can copy the program code below or use c:\Curl\Try3\02_grid_option\start.curl and then paste it into the editor in the IDE.

Code:
{value
    let data:RecordSet = {RecordSet
                             {RecordFields
                                 {RecordField name, domain = String},
                                 {RecordField age, domain = int},
                                 {RecordField score, domain = int}
                             },
                             {RecordData name = Matt, age = 33, score = 88},
                             {RecordData name = Sarah, age = 27, score = 79},
                             {RecordData name = Jacob, age = 26, score = 90}
                         }
    
    {RecordGrid
        record-source = data,
        width = 10cm,
        height = 3cm
        || Additional options below
        ,
        || Modify functionality
        cells-take-focus? = false,
        column-movable? = false,
        column-resizable? = false,
        editable?  = false,
        multiple-selection-enabled? = false,
        record-selection-enabled? = false,
        column-selection-enabled? = true,
        || Modify appearance
        display-filler-column? = true,
        display-navigation-panel? = false,
        alternate-row-background = #ddeeee,
        grid-line-color = #aaaaaa,
        horizontal-grid-line-width = 1px,
        vertical-grid-line-width = 2px
    }
}

Save the File, and then Execute the Program

After inputting the code, save the file, and then execute the program. The following result will appear in your browser. Check that both the appearance and functions have been changed. You will see that the following standard RecordGrid functions cannot be used.
  • Edit data
  • Change column width
  • Change column sort order
  • Line select
  • Multiple selection


]]> Basics 2: Using Options to Modify the RecordGrid Appearance and Functionality

Create the 'Try 3-2' Project

Close the Try 3-1 project . Next from the IDE 'File' menu, select 'New Project'. In the 'New Project' dialog box, select “Applet Project” (1), input “Try3-2” (2), specify c:\Curl\lesson\Try3\02_grid_option in the “Directory” field (3), set the API Version to 6.0 (4), and then click OK (5).



Inputting the Program

Next, we’ll input the program. You can copy the program code below or use c:\Curl\Try3\02_grid_option\start.curl and then paste it into the editor in the IDE.

Code:
{value
    let data:RecordSet = {RecordSet
                             {RecordFields
                                 {RecordField name, domain = String},
                                 {RecordField age, domain = int},
                                 {RecordField score, domain = int}
                             },
                             {RecordData name = Matt, age = 33, score = 88},
                             {RecordData name = Sarah, age = 27, score = 79},
                             {RecordData name = Jacob, age = 26, score = 90}
                         }
    
    {RecordGrid
        record-source = data,
        width = 10cm,
        height = 3cm
        || Additional options below
        ,
        || Modify functionality
        cells-take-focus? = false,
        column-movable? = false,
        column-resizable? = false,
        editable?  = false,
        multiple-selection-enabled? = false,
        record-selection-enabled? = false,
        column-selection-enabled? = true,
        || Modify appearance
        display-filler-column? = true,
        display-navigation-panel? = false,
        alternate-row-background = #ddeeee,
        grid-line-color = #aaaaaa,
        horizontal-grid-line-width = 1px,
        vertical-grid-line-width = 2px
    }
}

Save the File, and then Execute the Program

After inputting the code, save the file, and then execute the program. The following result will appear in your browser. Check that both the appearance and functions have been changed. You will see that the following standard RecordGrid functions cannot be used.
  • Edit data
  • Change column width
  • Change column sort order
  • Line select
  • Multiple selection


]]> <![CDATA[Page 2: Structure of a Program that Displays a Table in a Grid]]> https://communities.curl.com/showthread.php?tid=56 Thu, 16 Jun 2011 07:16:43 +0000 https://communities.curl.com/showthread.php?tid=56 Structure of a Program that Displays a Table in a Grid

To display a table, we need the basic data (RecordSet), as well as the grid (RecordGrid) to be used to display that data. Let’s take a look at the source code:


1. Create the data to be displayed: RecordSet

Code:
let data:RecordSet =
    {RecordSet
        ...
    }

First, we have to create the data (RecordSet) that is to be displayed in a table (RecordGrid). In a RecordSet, the constituent data is organized into records and fields, allowing a client to manage the data in memory. Thus, a user can perform filtering and sorting on a client machine without having to access a database.


Next, let’s take a look at RecordFields and RecordData, which display fields and records, respectively.

2. Specifying fields: RecordFields

Code:
{RecordFields
    {RecordField name, domain = String},
    {RecordField age, domain = int},
    {RecordField score, domain = int}
}

RecordFields contains each instance of a RecordField that makes up a RecordSet. RecordField is used to specify the name and attributes of a field. In this example, the specified character strings like name and age are field names. A name must be specified for each field. This name is referenced whenever data is added or modified. The specification of attributes like domain is optional. Some examples of attributes are given below.



3. Adding data: RecordData
Code:
{RecordData name = Matt, age = 33, score = 88},
{RecordData name = Sarah, age = 27, score = 79},
{RecordData name = Jacob, age = 26, score = 90}

Using RecordData, we can add data to a RecordSet. RecordData is used to specify the data in each field.

4. Displaying data: RecordGrid

Steps (1) to (3) are used to create the data that we refer to as a RecordSet. While a RecordSet specifies data, it has no function for displaying that data on the screen. In Curl, separate APIs are provided to actually display a RecordSet. For example, RecordGrid allows you to easily display a RecordSet in a grid

RecordGrid incorporates multiple functions. Some examples are given below.



Also, right-clicking a cell enables operations such as of data filtering, copying, and pasting.


.png   3-1.PNG (Size: 14.24 KB / Downloads: 1415)

.png   3-2.PNG (Size: 9.42 KB / Downloads: 1393) ]]> Structure of a Program that Displays a Table in a Grid

To display a table, we need the basic data (RecordSet), as well as the grid (RecordGrid) to be used to display that data. Let’s take a look at the source code:


1. Create the data to be displayed: RecordSet

Code:
let data:RecordSet =
    {RecordSet
        ...
    }

First, we have to create the data (RecordSet) that is to be displayed in a table (RecordGrid). In a RecordSet, the constituent data is organized into records and fields, allowing a client to manage the data in memory. Thus, a user can perform filtering and sorting on a client machine without having to access a database.


Next, let’s take a look at RecordFields and RecordData, which display fields and records, respectively.

2. Specifying fields: RecordFields

Code:
{RecordFields
    {RecordField name, domain = String},
    {RecordField age, domain = int},
    {RecordField score, domain = int}
}

RecordFields contains each instance of a RecordField that makes up a RecordSet. RecordField is used to specify the name and attributes of a field. In this example, the specified character strings like name and age are field names. A name must be specified for each field. This name is referenced whenever data is added or modified. The specification of attributes like domain is optional. Some examples of attributes are given below.



3. Adding data: RecordData
Code:
{RecordData name = Matt, age = 33, score = 88},
{RecordData name = Sarah, age = 27, score = 79},
{RecordData name = Jacob, age = 26, score = 90}

Using RecordData, we can add data to a RecordSet. RecordData is used to specify the data in each field.

4. Displaying data: RecordGrid

Steps (1) to (3) are used to create the data that we refer to as a RecordSet. While a RecordSet specifies data, it has no function for displaying that data on the screen. In Curl, separate APIs are provided to actually display a RecordSet. For example, RecordGrid allows you to easily display a RecordSet in a grid

RecordGrid incorporates multiple functions. Some examples are given below.



Also, right-clicking a cell enables operations such as of data filtering, copying, and pasting.


.png   3-1.PNG (Size: 14.24 KB / Downloads: 1415)

.png   3-2.PNG (Size: 9.42 KB / Downloads: 1393) ]]> <![CDATA[Page 1: Displaying Data in a Grid]]> https://communities.curl.com/showthread.php?tid=55 Thu, 16 Jun 2011 07:11:09 +0000 https://communities.curl.com/showthread.php?tid=55 Displaying Data in a Grid

In this chapter, we’ll take the scores from the Try 2 game, and arrange them into a table. We’ll manage data on names, scores, and ages

Please download the Try3.zip file by selecting the following link: Try3.zip.

Unzip the contents to the C:\Curl directory. This is the working directory for all the examples and exercises contained within this tutorial. Note: If C:\Curl has not already been created, you can create it now.

Basics 1: Using RecordGrid to Display Data as a Table

Create the 'Try 3-1' Project

Close the Try 2 project and then, from the IDE 'File' menu, select 'New Project'. In the 'New Project' dialog box, select “Applet Project” (1), input “Try3-1” (2), specify c:\Curl\lesson\Try3\01_grid in the “Directory” field (3), set the API Version to 6.0 (4), and then click OK (5).


Inputting the Program

Next, we’ll input the program. You can copy the program code below or use c:\Curl\Try3\01_grid\start.curl and then paste it into the editor in the IDE.

Code:
{value
    let data:RecordSet = {RecordSet
                             {RecordFields
                                 {RecordField "name", domain = String},
                                 {RecordField "age", domain = int},
                                 {RecordField "score", domain = int}
                             },
                             {RecordData name = "Matt", age = 33, score = 88},
                             {RecordData name = "Sarah", age = 27, score = 79},
                             {RecordData name = "Jacob", age = 26, score = 90}
                         }
    
    {RecordGrid
        record-source = data,
        width = 10cm,
        height = 3cm
    }
}


Save the File, and then Execute the Program

After inputting the code, save the file, and then execute the program. The following result will appear in your browser.

]]> Displaying Data in a Grid

In this chapter, we’ll take the scores from the Try 2 game, and arrange them into a table. We’ll manage data on names, scores, and ages

Please download the Try3.zip file by selecting the following link: Try3.zip.

Unzip the contents to the C:\Curl directory. This is the working directory for all the examples and exercises contained within this tutorial. Note: If C:\Curl has not already been created, you can create it now.

Basics 1: Using RecordGrid to Display Data as a Table

Create the 'Try 3-1' Project

Close the Try 2 project and then, from the IDE 'File' menu, select 'New Project'. In the 'New Project' dialog box, select “Applet Project” (1), input “Try3-1” (2), specify c:\Curl\lesson\Try3\01_grid in the “Directory” field (3), set the API Version to 6.0 (4), and then click OK (5).


Inputting the Program

Next, we’ll input the program. You can copy the program code below or use c:\Curl\Try3\01_grid\start.curl and then paste it into the editor in the IDE.

Code:
{value
    let data:RecordSet = {RecordSet
                             {RecordFields
                                 {RecordField "name", domain = String},
                                 {RecordField "age", domain = int},
                                 {RecordField "score", domain = int}
                             },
                             {RecordData name = "Matt", age = 33, score = 88},
                             {RecordData name = "Sarah", age = 27, score = 79},
                             {RecordData name = "Jacob", age = 26, score = 90}
                         }
    
    {RecordGrid
        record-source = data,
        width = 10cm,
        height = 3cm
    }
}


Save the File, and then Execute the Program

After inputting the code, save the file, and then execute the program. The following result will appear in your browser.

]]>