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”.
    • new data master 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.
    • data master fields product
  3. Change the Type of the Image Field to “File Upload” and click “OK”.
    • file upload file type
  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, click on the Data Grid widget in the Dynamic Content section of the Basic Widget library.
    • 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.
    • Remember, you can also import real data from a database or Microsoft Excel
  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

data grid properties

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 two Fields: First name, Last name and Image.
    • Change the Type of the Image Field to “File Upload” and click “OK”.
    • Click “OK”.
    • data master users
  2. Back in the Data Masters palette, double click on your Data Master and select the View and edit records tab. Create four Records, each with a first name, last name and date of birth. Click “OK”.
    • data master four records
  3. Next, click on the Data Grid widget in the Dynamic Content section of the Basic Widget library.
    • 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.
    • user data grid
  4. Go to the Properties palette and add a third column to your Data Grid.
    • add third column
  5. Then, from the Outline palette, select the “Grid_cell_1” cell from within the Data Grid.
    • Go to the Properties palette and make sure the layout is set to “Free Layout” (it should be “Free Layout” by default).
    • grid cell 1
  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.
    • remove text elements
  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, drag an Input Text Field and a Button to the canvas.
    • Rename the button “Search”.
    • search button
  2. Create and populate a Data Master with one “Name” Field 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.
    • create data grid
  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:
    • Drag the “Filter” function to the term in the Conditional expression.
    • Drag your Data Master (from the Data Masters tab) to the next term.
    • Drag the Input Text Field to the final term and click “OK” twice.
    • 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”.
    • Click “OK”.
    • product data master
  2. Back in the Data Masters palette, double click on your Data Master and select the View and edit records tab. Create six product Records. Click “OK”.
    • six data master records
  3. Next, click on the Data Grid widget in the Dynamic Content section of the Basic Widget library.
    • In the dialog that appears, give your Data Grid a name (“Product_Data_Grid” to match our example), and move the “Product” Data Master Field from the left to the right. Click “OK” and position your Data Grid in the center of the canvas.
    • product data grid
  4. Remove the “Product name”, “Price” and “Imagen” Text elements from within the Data Grid in the Outline palette.
    • remove text elements price
  5. Select the Data Grid in the Outline palette and go to the Properties palette.
    • Change the Orientation to “Vertical”.
    • change orientation vertical
  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.
    • cells per page
  7. Next, drag an Index widget to 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).
    • link index element

To allow the user to navigate to different pages within your Data Grid, follow these steps:

  1. Drag two Button widgets and label them “Next”, “Previous”.
    • user navigate through pages
  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 Outline palette.
    • Below, select the “Next page” action from the drop-down list, and click “OK”.
  3. 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.