Nested Grid

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

1st Step – Design

1. Database Field Name (mandatory): These are the attributes of the form
2. Label Name (mandatory)
3. Column Width

2nd Step – API

1. Data
1. Data Source: Select data source from the following HTTP, Workflow, No SQL or RDBMS
   1. HTTP
      1. Data Connection
      2. Method (mandatory): Select method from the following GET, PUT, POST, PATCH, DELETE or POCO
      3. API URL (mandatory)
      4. Query Parameters
         1. Key
         2. Value
         3. Query Variable
         4. Select Type
      5. Headers
         1. Name
         2. Value
      6. Others
         1. Enable raw query
2. Response Attribute
3. Paging Type: Server Side or Client Side
   1. Server Side
      1. From Param
      2. Page Size Param
      3. API Field for Total Counts (Optional)
      4. Server Pagination View: Load More or Number Type
         1. Number Type
            1. Show Pagination
            2. Show Pagination Top
            3. Show Pagination Bottom
            4. Page Size Options
      5. Show Total Count
      6. Total Count Label
4. Page Size
5. Is API Result Nested
6. Primary Key

2. Mapping
1. Field Mapping: Click on “Add New” button depending on how many fields you want to map in the grid based on requirement. And click the refresh button to reload the API response. After that start mapping following fields:
   1. Binding
      1. Header
      2. Data Field: From API
      3. Data Type: Choose data type from the following None, Email, Date, Title, Image, Link, etc.
      4. Column Width
      5. Text Alignment
      6. Is Multi Row Text ?
   
   2. Advance
   1. Hide Column
   
2. Is Nested Data
   1. Nested Collection Field (mandatory)
   2. Field Mapping: Click on “Add New” button depending on how many fields you want to map in the grid based on requirement. And click the refresh button to reload the API response. After that start mapping following fields:
      1. Display Name
      2. Binding Field
      3. Field Type: Choose field type from the following None, Email, Date, Title, Image, etc.
3. Card Type
3. Action
1. Action Header
2. Is action on last column
3. Action Button View At: Popover or Inline
4. Actions: Click on “Add New” button depending on how many actions you want to configure on the card based on requirement. Then configure the following details:
   1. Action
      1. Button Text
      2. Button Type: Select option from the dropdown menu
      3. Action Type: Choose action type from the following Sidebar, New Tab, Same Tab, Popup Window, Submit, Submit & Redirect, etc.
      4. Primary Key
      5. Redirect URL
      6. Primary Key Node (optional)
      7. Bind Action with Column
         1. Column Name
   
   2. Web View
      1. Web Name Type: Choose web name type from the following Name Only, Name & Icon or Icon Only
   
   3. Mobile View
      1. Mobile Name Type: Choose mobile name type from the following Name Only, Name & Icon or Icon Only
   
   4. Advance
      1. Action: Choose action from the following Hide, Show, Enable or Disable
      2. Add Rule
         1. Api Field
         2. Operator
         3. Value
         4. Action
         5. Is Value From DataModel
            1. Model Value From Another Form
   

3rd Step – Advance

1. Design
1. Action Column Width
2. Enable Select Column
3. Enable Export Link (Csv)
4. Enable Manage Column
5. Show Export Link (Pdf)
6. Enable Freeze Column
7. Enable Client Side Filter
   1. Filter Placeholder
   2. Filter Columns Index
8. Enable Group By
   1. Group By
   2. Default Group Expansion
   3. Set Group Color
      1. Group Name
      2. Group Color
9. Is odd even color row

2. Others
1. Enable Update Link
   1. Choose Update Form Id
   2. Enable Group Collection: Updated Collection will be grouped into Group Field
      1. Group Field (mandatory)
   3. Data Source: Select data source from the following HTTP, Workflow, No SQL or RDBMS
      1. HTTP
         1. Data Connection
         2. Method (mandatory): Select method from the following GET, PUT, POST, PATCH, DELETE or POCO
         3. API URL (mandatory)
         4. Query Parameters
            1. Key
            2. Value
            3. Query Variable
            4. Select Type
         5. Headers
            1. Name
            2. Value
         6. Others
            1. Enable raw query
   4. Response Attribute
2. Enable Delete Link
   1. Data Source: Select data source from the following HTTP, Workflow, No SQL or RDBMS
      1. HTTP
         1. Data Connection
         2. Method (mandatory): Select method from the following GET, PUT, POST, PATCH, DELETE or POCO
         3. API URL (mandatory)
         4. Query Parameters
            1. Key
            2. Value
            3. Query Variable
            4. Select Type
         5. Headers
            1. Name
            2. Value
         6. Others
            1. Enable raw query
   2. Response Attribute
3. Enable Email Link
   1. Form Id
   2. Email Form Field (Model in Email Form) (mandatory)
   3. Email Field (Source Email Id Field) (mandatory)
   4. Add in Group
4. Enable Advance Search
   1. API Method: Get or Post
   2. Advance Search Form
   3. Advance Search API Mapping
      1. API Param
      2. Advance Search Field
   4. Enable Search On-Load
   5. Is hide search button text
   6. Search Button Class
   7. Search Button Icon
5. Enable Selection Submit
   1. Selection Attribute
6. No Data Configuration
   1. No Data Image URL
   2. Background Color
   3. Image Width
   4. Cover Height
   5. Title
   6. Message
7. Refresh Component On Close

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