Data Grids

The Data Grid widget displays Data Master Records in grid format.
Data Grids are displayed as cells within a grid or table.display-data master records data grid
Upon creating your Data Grid, the top-left cell will display with your Data Master Field names. The additional cells will be displayed with a gray fill. When you simulate your prototype, the additional cells will be filled with your Data Master Records.

Displaying Data Master Records in a Data Grid

Learn how to display Data Master Records in grid form with a Data Grid in your interactive prototypes.

Let’s do it step by step:

  1. In a new web prototype, create a new Data Master by clicking the ‘+’ icon in the Data Masters palette. In the dialog that appears, give your Data Master a name. To match our example, name it “Product”.
  2. Add Fields to your Data Master by clicking the ‘+’ icon on the right-hand side. To match our example, create the following Fields: Name, Price and Image.
  3. Change the Type of the Image Field to “File Upload” and click “OK”.
  4. Back in the Data Masters palette, double click on your Data Master and select the View and Edit records tab in the dialog that appears.

    Create data Records, giving each a name, price and image. Click “OK”.

  5. Next, go to Toolbar – Plus icon – Dynamic Content – click on ‘Data Grid’.

    In the dialog that appears, give your Data Grid a name (“ID_ Data_Grid” to match our example). 

    Select your Data Master from the “Data Masters” drop-down.

    We want to include all Data Master Fields in the Data Grid. To move them all into the selection box, click the right double line arrow icon.

    Then, click “OK” and position your Data Grid in the center of the canvas.

    On the Canvas, the top-left cell will display sample Field names.

  6. Click “Simulate” again to simulate your Data Grid with the real data in place.simulate data grid

Data Grid properties

From the Properties palette, you can modify the following properties of your Data Grid:

  • Number of columns
  • Number of cells per page
  • Orientation – rotate your Data Grid horizontally or vertically
  • Spacing – modify the spacing between cells

Customizing a Data Grid

With Justinmind, you can customize the appearance of your Data Grid.
Follow the steps below to customize individual columns in your Data Grid:

  1. Create a Data Master in a new web prototype.

    Name it “Users” and create three Fields: First name, Last name and Image.

    Change the Type of the Image Field to “File Upload” and click “OK”.

  2. Back in the Data Masters palette, right click on your Data Master and select the View and edit records option. Create four Records, each with a first name, last name and an image. Click “OK”.
  3. Next, go to Toolbar – plus sign icon – Dynamic Content – click on ‘Data Grid’.

    In the dialog that appears, give your Data Grid a name (“User_Data_Grid” to match our example), and move all Data Master Fields from the left to the right (by clicking the right double line arrow icon).

    Click “OK” and position your Data Grid in the center of the canvas.

  4. Go to the Properties palette and change the number of columns of the Data Grid to three.
  5. Then, from the Layers palette, select the “Grid_cell_1” cell from within the Data Grid.
  6. On the canvas, remove the “First name” and “Last name” Text elements to match our example.

    Then, distribute the cell’s Input Text Fields and resize the cells to match our example or make it your own.

  7. Click “Simulate” to view your customized Data Grid.customized data grid

Creating a search filter for a Data Grid

You can prototype a searchable list using a Data Grid.searchable list data grid
Follow the steps below to learn how to do so:

  1. In a new web prototype, create an Input Text Field and a Button in the Canvas. And rename the button to “Search”.
  2. Create and populate a Data Master with one field called “Name” and 10 Records, to match our example.name field 10 records
  3. Then, create a Data Grid that contains all of your Data Master Fields. Click “OK” and place it on the canvas below the Input Text Field and Button.
  4. Select the Button and go to the Events palette.

    Add an “On Click” + “Set Value” event.

    Select the entire Data Grid, click the “Calculate” radio button below and then click the “Add Expression” link. The Expression Builder will appear.

  5. Build the following expression:
    1. Drag the “Filter” function to the expression.
    2. Drag your Data Master (from the Data Masters tab) to the first term of the new Filter function.
    3. Drag the Input Text Field to the second term and click “OK” and then “OK” again to close the Events dialog.
  6. Click “Simulate” and try to search for a Data Master Record in your Data Grid.

You can download our example here.