Grid

You have to go through a three-step form wizard to enable this Control, i.e., Design, Validation & Advance. Let’s explain these steps below:

1st Step – Design

This is the first step of the “Grid” layout form wizard. Here you are required to fill in the following details:

  1. Database Field Name (mandatory): These are the attributes of the form
  2. Label Name
  3. Column Width
  4. Select view: Select view from the following Form, Grid, Vertical, List, and Tree View
    1. Form
      1. Header Field Name
    2. Grid
      1. Enable Sorting
    3. Vertical
    4. List
    5. Tree View
      1. Header field
      2. Label CSS Class
      3. Label Color
      4. Border Color
      5. Header CSS Class
      6. Header Color

2nd Step – Validation

  1. Is Mandatory?: This button is set as “Yes” if you need to apply this Control as mandatory
  2. Maximum Row(s) allowed: Here you can mention maximum number of rows that you want allow for user input.
  3. Default Row(s) On First Load

3rd Step – Advance

  1. Design
    1. Bootstrap Column Class
    2. Add New Button Text
    3. Show Count
      1. Label
  2. Action

    3. If “Select view” is selected as “List”, then the following actions should perform as follows:

    1. API
      1. Choose Data Source
      2. Enable Encryption
      3. Response Attribute
    1. Form Behavior
      1. Select add/edit Form
      2. Select Card Form
      3. Add new Form show on page
    1. Message
      1. Success Message Icon
      2. Success Message Title
      3. Success Message Text
      4. Update Message Icon
      5. Update Message Title
      6. Update Message Text
      7. Error Message Icon
      8. Error Message Title
      9. Error Message Text
    1. Others
      1. Custom action
  3. Others
    1. Enable Refresh
    2. Add Attributes to Grid as child
      1. Root Attributes to Grid as child
    3. Read only
    4. Enable UpDown
    5. No Data Configuration
      1. No Data Image URL
      2. Background Color
      3. Image Width
      4. Cover Height
      5. Title
      6. Message

After the Grid is added on the screen we add controls in the grid like Text Box, Number, Email, Phone, etc. like shown below. Everytime we click on the “Add New” button the controls added with the Grid will get created for multiple entries.

Click “Confirm” and “Grid” control is configured.