![]() Use unstacked grids when only a small amount of columnar data needs to be displayed. At the intersection of each column and row is one data item, for example, Contact Name is Jason Channing. The following example shows an unstacked grid with three columns: Contact Name, Relationship, and Preferred. It takes the form of a traditional table in which only one piece of data is contained in each cell. Unstacked GridĪn unstacked grid does not combine two or more columns of data into a single column. Use stacked grids when more columns of data need to be displayed than will fit on the page without introducing horizontal scrolling. In a stacked format, Name and Title occupy the same column with the Name data appearing above the Title data in each row. In the unstacked format, Name and Title would each have their own column. The first column in the grid is Name/Title this column is the combination of two grid columns, Name and Title. The following example shows an example of a stacked grid. A stacked grid allows more data to be displayed using less horizontal space. It is an unstacked grid with grid sort turned on, and it has an application-defined grid toolbar button, Add Service Request, above the grid on the right: Figure 4: Example of a complex grid with many columns Stacked and Unstacked Grids Stacked GridĪ stacked grid combines two or more columns of data into a single column. The following example shows a complex grid with many columns. It is considered a complex grid: Figure 3: Example of a complex grid with many rows and columns The following example grid has stacked columns with many rows and columns. The following example shows a more complex grid with stacked columns and an action button above the grid: Figure 2: Example of a complex grid with an action button When a page contains many grids stacked one on top of the other, this may be considered complex even if the individual grids are not complex. It may contain many action buttons within the grid, in the grid toolbar, above the grid, or below the grid. Complex GridĪ complex grid has a large quantity of data displayed in many rows and columns. Evaluate the information and include only the necessary columns in any grid only include data columns that are needed for performing the task. When functional requirements dictate the need to display larger amounts of data, however, use a complex grid. Simple grids are preferred over complex grids because they are easy to read and understand. This example shows a simple grid: Figure 1: Example of a simple grid with few columns and few rows It would not have stacked fields in columns or grid tabs. It has few action buttons within the grid and few action buttons below the grid that take action on the grid as a whole. Simple GridĪ simple grid is a grid that does not contain a lot of data. The two main types of grids are simple and complex. These sections also discuss when and how to use the grid constructs and design patterns. The following sections define simple and complex grids, stacked and unstacked grids, and describe the grid constructs that are available. Many List View constructs have been designed specifically for small form factor devices. The two main types of grids are simple and complex.ĭepending on the amount of data that must appear, grid data can be displayed in two ways: stacked and unstacked.Ī number of constructs can be used to display data in a grid. The answers to these questions will determine the type of grid and the grid header attributes that will be used in the grid. How will the grid reflect the use of responsive design?.When determining how grid data should appear on a page, consider these points: The overall look and feel of the page should be minimum clutter that allows the page to be read easily. Generally, the intent of a grid design is to present a simple, easy to understand page that does not overwhelm the user with data. The guidelines for selecting a grid construct and design pattern are discussed in the following sections. The designer may choose from several constructs and design patterns for grids, depending upon the type and amount of data to be displayed as well as the form factor. At its most complex form, it may have multiple columns divided into multiple tabs that contain many selectable items in each grid row, in addition to multiple grid actions available to the user. In its simple form, a grid may be a single column with a few rows. Grids display data in a tabular format of rows and columns. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |