Article to understand how to use the Table Grid control for tabular presentation
We have seen how to make use of different types of control on the form and also how to bind columns to the controls. There can be scenarios where you would rather display the data in a tabular format. You can make use of the Table Grid control in such scenarios.
The Table grid control provides several features, including one to view the data in a listview or detailed view. Moreover, it also has the option to provide a map view in case the sheet that you have bound to the control contains the geolocation values. They are reflected as map locations. The control also has on-click events like navigation, selection, or toggling to the detailed view, and so on.
Let us have a quick look at this video to understand how to use the Table Grid control.
Let us take a simple scenario to understand the different uses and features of the Table Grid control where we have a sheet Citymaster_docs with the city, state, zip code, and geolocation columns.
Let us take the form that we had created in another example of binding data to controls. The form has a drop-down for State and City, and LabelText for the State code and Zip code. Add a Table grid control to reflect the data from the sheet.
Let us understand the properties starting with those for setting label name, unique name, setting it as hidden label and so on which are the default properties. However, other extremely useful properties are listed out under Control properties .
Binding columns to table grid control
Now let us first see how to fetch data from the sheet to the table grid control. To bind the data to the control, now select the Formula option > select sheet name. From the list of available columns, select those fields that you want the data to be fetched and displayed in a tabular form.
In case you want to fetch data based on a certain condition like say for example the data for the state selected in the dropdown down control, then you can add formula accordingly. It is a simple filter that you would have to add as shown in the illustration below.
You would simply have to copy or insert the formula and it would then be applied to fetch data for the specific state.
In this case, only those records which match the selected state are fetched and displayed in the table grid.
Setting Control properties
Let us now have a look at the different control properties available that make your table grid a very useful control.
Display map option: This is a very useful feature to display records in a map view. It is a toggle to provide a map view using the table grid. This is used mostly when you want to display the data as geolocation on the form.
If you set the map toggle ON , then you need to set the Default view as a List view or Map view .
Click Event : This provides the three events as selection, navigation, and detailed view.
Detailed view : A detailed view of the selected row is provided if you have defined the click event as a Detailed view. The detailed view provides a wider area to view all the details of all columns, use the links if any.
So if you take a preview when you click on any of the records you would get the detailed view as follows:
Navigation : If you select the event as Navigation, you need to provide details for the navigation type as Navigate (without validation), Navigate (with validation), or navigate to a URL. You would then provide the screen to navigate to or the external URL link to navigate. You can also provide the transition style to slide from left to right or right to left. Now when you navigate to the other screen using the Navigate option, you can use or access the selected row by referencing it as “control’s <unique_name>.<column_name>”. The data for the specific column of the selected row is displayed.
Let us take an example here, in the table grid properties we have added the page to Navigate to as Product docs.
So when you click on any of the rows in the grid, you would be taken to the Product docs page. On the page, we have added a Text control for the Cities. You can bind the data from the control from the previous form. The selected cities will be displayed here. You can use Format Column Types feature to apply formatting to the different columns based on certain criteria. To know more refer this article.
Now let us take a preview of the table grid control bound to the text control on the navigated form. The data is fetched from the table grid and displayed in the text control.
Selection: When you select the event as Selection, it enables the selection of the record. You can also enable the selection of records as a single select or multiselect. On the current form, you can use or access the selected rows by referencing it as “control’s <unique_name>.<column_name>”. The data for the specific column of the selected row is displayed.
Let us see the example where we add a Text control to our form. You would set its properties as follows:
Now if you take a preview of the form and select two rows from the table grid, then the city names from the selected rows will be displayed.
Along with these properties, you can add the properties for the table grid like the color theme, a number of visible rows and columns, the maximum width of the table grid, and the placeholder. Along with these, you can also set the display properties which are used to define whether the searchbar, the refresh icon, the download icon, and the filter option would be enabled with the table grid.
Display Searchbar : toggle to display the search bar. You can use it to search the specific records.
Display Refresh: toggle to display the Refresh icon. You can refresh your table grid records. It re-evaluates the formula that is used to bind data in this control.
Display Download: toggle to display the Download icon. You can download the table that you can view on the table grid.
Display Filter Option: toggle to display the Filter button. The filter provides you with the necessary filter depending upon the data type of the different columns of the table grid.
Now let us take a preview of a simple form without Display Map Option ON.
This is a preview of the form, where we have a table grid bound to the data from the sheet and with the condition that it would be the data for the selected state in the above dropdown control.
Now let us have a preview of the form with the Display Map Option ON and with the same filter as records for the selected state.
You can thus make use of the table grid control with its different features, giving you several options to display data in a tabular format.