Grid Column
- ejaramillo
- Matias
- Sergio Rodriguez
Overview
On this lesson, we will analyze the “Grid Column” control that allow us to create tables or grid tables in the page. There are multiple ways to use this control than just insert a new column on a table, we can insert an icon that will trigger an action (for example to delete an object, a datarow, etc.) or redirect to another place in our application. Normally, this control works in connection to Dataset that will help us to show or stored the values in our database. Let’s review how it works!
How to create a “Grid Column” control?
Turn to the page where we are going to include this object. Under the “Controls” section, choose the “Grid Column” option. Click on “New” button
A popup will be prompted to generate the control.
Let’s review the properties in “General” tab before creating the “Grid Column” control
General
Field | Description |
|---|---|
Type Control | GRID COLUMN / DYNAMIC |
Field | This field acts as control id. If we are connecting to the database, the name should have the same name than the field in Database Table. |
Description | This will be the label on the application view. |
Column Format | If we want to assign the format that the column will refer as Text, Data, Currency, Integer, etc. |
Total | If this column will display a total from different grid columns. |
Sorteable | Checkbox to group the column. |
Comment | Add an additional comment on the control. |
Tooltip | Label to display when mouseover the control. |
In this example, we won’t include a format because our column will be filled with “Delete” action icon. Turn to “Data Binding” tab and connect to a previously generated dataset.
Turn to “Layout” tab and indicate the order where we want to display this column. In our example, we have a table created and we want to add this new column at the right side.
Beside the information related to the place that we want to show the grid column, we need to focus on “Pictures” field. There we need to select the icon to display in column. This image will trigger an action that can edit a register in database table or redirects to another window/tab in case we want to show details for that specific row.
Click on “Submit” button to create the control
Now let’s check the new grid column in the table. Click on “Preview” button
Now we are able to remove any registry from the table using an action by the new column grid created.
Recap
Our application is making a good progress, we created different controls that give us a lot of possibilities and connecting our data with actions that we trigger directly in the app. In the following lessons, we are going to continue learning about the alternatives to work in grid tables. Stay tuned!