Maqetta GridX Configuration Wizard
tonyerwin 120000H3G0 Comments (4) Visits (11916)
Updated Sept 10, 2012 for Release 7.
Data-bound grids for the display of tabular data are a key building block of many applications. One option developers have to enable grids in their Dojo applications is the powerful GridX library. GridX features a compact core built for scalability and offers a plug-in architecture so modules for advanced features can be loaded on demand. It is hosted in its own GitHub repository and available under the same BSD/AFLv2 licensing as the Dojo Toolkit. Maqetta supports GridX 1.0.0 and includes an advanced GridX Configuration Wizard as a companion. Using the wizard, designers can easily bind a GridX widget to a data source, configure which columns to display, and set properties of the selected columns (e.g., order, width, label, etc.). This article will take a high-level walk through the process of adding a GridX widget to a page in Maqetta.
Adding GridX from Widgets PaletteGridX can be found in the Maqetta Widgets Palette in the Dojo Controls folder. When you drag GridX from the Widgets Palette onto your canvas, the GridX Configuration Wizard will be launched in a separate dialog.
Configuring the Data SourceThe first panel of the wizard is devoted to configuring the data source from which your GridX will retrieve its data. There are three types of data sources that can be used. (For the technically minded, in the end no matter which option you choose, either adoj
Choosing Which Columns to DisplayIf you click Next, the second panel of the wizard will be displayed. This panel presents the columns that are available from the data source in the Available columns list box on the left side, and allows you to choose which ones you want to show the end user by moving them to the Selected columns list box box on the right side. This is especially useful because many (if not most) data sources contain far more columns than you'd ever want to expose to an end user on their first viewing of a table. In the screen shot below, I had previously chosen the samp
Previewing the Grid and Modifying Column PropertieIf you click Next at this point, you will go to the third (and last) page of the wizard. This panel provides a live preview of the GridX widget based on your selections in the first two panels. Any changes made on this panel are reflected immediately within the preview and are persisted when you complete the wizard. The screen shot below shows the initial state of the preview panel using the five columns I selected above. By using the column headers in the preview, you can move and resize the columns directly within the GridX widget. In addition, if you select a column (using the column header), the fields in the Column properties section are enabled and you can use them to change column labels and widths. The next screenshot shows the state of things after all of the column labels have been changed to human readable strings (rather than the ids provided in the data source) and all of the columns have been resized to my desired widths.
Final ResultFinally, after clicking Finish, the dialog containing the wizard will go away and you will be left with a fully configured GridX widget in the Maqetta page editor. From there, you can continue designing the rest of your application. And, if later on you wish to modify the data source and/or columns used by the GridX widget, simply double-click on the GridX widget to invoke the GridX Configuration Wizard again. The wizard will be pre-populated with your current settings making it easy to tweak your design.