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.

Paginating Data Grids

With Justinmind, you can paginate your Data Grid. You might want to do this when if you have lots of data Records.paginate data grid
Follow the next steps to learn how to paginate your Data Grid:

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

    Name it “Product”. Create three Fields: Product name, Price 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 six product Records. 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 (“Product_Data_Grid” to match our example), and move the “Product” Data Master Fields from the left to the right. Click “OK” and position your Data Grid in the center of the canvas.
  4. Remove the “Product name”, “Price” and “Image” text elements from within the Data Grid. To select those elements, you can either double click on them or change to the “Direct Selection Tool” (keyboard shortcut A).
  5. Select the Data Grid in the Layers palette and go to the Properties palette.
  6. Then, change the number of Rows to one and the number of “Cells per Page” to three. This means that only three Records will be listed per page in your Data Grid.
  7. Next, go to Toolbar – plus sign icon – Dynamic Content – click on ‘Index’, click in the canvas and link it to your Data Grid by choosing the “Product” Data Grid from the Data Grid drop-down in the Properties palette. The Index element will automatically show the number of listed pages based on the number of rows per page established (in our example, the number is four).

Now let’s add some buttons to the prototype to allow the user to navigate to different pages within your Data Grid:

  1. Go to the Toolbar – plus sign – Button or press B to create two buttons and label them “Next”, “Previous”.
  2. Select the Button named “Next” and go to the Events palette. Add an ‘”On Click” + “Paginate Data Grid” event, selecting the Data Grid from the Layers palette.
  3. Below, select the “Next page” action from the drop-down list, and click “OK”.
  4. Repeat step two for the remaining Button, updating the action to “Previous Page”. Click “Simulate” and click between the pages in your Data Grid. The Data Grid’s values should change when you click the “Next” and “Previous” buttons.

You can download our example here.