Grid Styles in Canvas Native App

Canvas Technology platform offers three ready-made styles for data grids for native mobile apps.

These three grid styles are available in the Canvas Enumerated TypeScript file, Canvas.enum.ts that is located in the following path in the Canvas platform library package:

<path-of-you-project>/src/GlobalEnums/Canvas.enum.ts

Let’s take a look at the three grid styles.

STYLE 1:

The first grid style displays the first character of the title column (first position) inside a circle.

Open

STYLE 2:

The second grid style displays the column headers at the top followed by the respective data.

Open

STYLE 3:

The third grid style is similar to second style, but without column headers. Choose this style for grids whose data is self-explanatory.

Instructions for using Grid Styles

To apply the grid style to a grid app (widget), perform the following steps:

1. Under the GridConfiguration enum in Canvas.enum.ts file, add an entry as follows:

   ACC_SUMMARY_SBI_VIEW_STYLE = "2" // ACC_SUMMARY_SBI_VIEW_STYLE is the grid widget ID // 2 is the grid style

2. Save the file and rebuild the mobile app.

Related articles