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): Defines the name of the database field to which the component's data will be mapped and stored.
  2. Label Name (mandatory): Specifies the display name or title for a field or control in the user interface.
  3. Column Width: Specifies the width of a column in a layout or grid system, allowing control over how much space the column occupies relative to others.

2nd Step – API

  1. Data
    1. Data Source: Select the data source from the following options: HTTP, Workflow, No SQL, or RDBMS.
      1. HTTP: Configuration for using HTTP as the data source.
        1. Data Connection: Specify the data connection settings.
        2. Method (mandatory): Select the HTTP method from GET, PUT, POST, PATCH, DELETE, or POCO.
        3. API URL (mandatory): Enter the endpoint URL for the API.
        4. Query Parameters: Configure the query parameters for the API.
          1. Key: The parameter name.
          2. Value: The parameter value.
          3. Query Variable: Variable used in the query.
          4. Select Type: Specify the parameter type.
        5. Headers: Define the HTTP headers to include in the API request.
          1. Name: Header name.
          2. Value: Header value.
        6. Others: Additional settings for the API request.
          1. Enable raw query: Enable or disable raw query support.
    2. Response Attribute: Specify the attribute in the API response to bind data.
    3. Paging Type: Select the pagination type, either Server Side or Client Side.
      1. Server Side: Configure server-side pagination settings.
        1. From Param: Parameter to indicate the starting record.
        2. Page Size Param: Parameter for specifying the page size.
        3. API Field for Total Counts (Optional): Specify the API field that provides total record counts.
        4. Server Pagination View: Choose the server pagination style, either Load More or Number Type.
          1. Number Type: Settings for number-based pagination.
            1. Show Pagination: Enable or disable pagination display.
            2. Show Pagination Top: Show pagination controls at the top.
            3. Show Pagination Bottom: Show pagination controls at the bottom.
            4. Page Size Options: Define the available page size options.
        5. Show Total Count: Display the total record count.
        6. Total Count Label: Label for the total record count display.
    4. Page Size: Specify the number of records per page.
    5. Is API Result Nested: Indicate whether the API result is nested.
    6. Primary Key: Specify the unique identifier for each record.
  2. Mapping
    1. Field Mapping: Click on the "Add New" button to map the required number of fields in the grid. Use the refresh button to reload the API response, then configure the following fields:
      1. Binding: Define the data bindings for the fields.
        1. Header: The header text displayed for the column.
        2. Data Field: Specify the field name from the API response.
        3. Data Type: Select the data type, such as None, Date, Title, Image, or Link.
        4. Column Width: Set the width for the column.
        5. Text Alignment: Align text to the left, right, or center.
        6. Is Multi Row Text?: Specify if the text spans multiple rows.
      2. Advance: Additional column settings.
        1. Hide Column: Enable to hide this column from the grid.
    2. Is Nested Data: Specify if the data structure is nested within a collection.
      1. Nested Collection Field (mandatory): Define the field representing the nested collection.
      2. Field Mapping: Configure the mapping of nested fields to grid columns. Use the "Add New" button to add mappings and refresh the API response before proceeding. Map the following fields:
        1. Display Name: Set the display name for the mapped field.
        2. Binding Field: Specify the field in the nested collection to bind to the grid.
        3. Field Type: Choose the type of field (e.g., None, Email, Date, Title, Image).
    3. Card Type: Specify the layout or design type of the grid card.
  3. Action
    1. Action Header: Specify the header title for the action column.
    2. Is action on last column: Determine if the actions should be displayed in the last column.
    3. Action Button View At: Choose where the action button should appear: Popover or Inline.
    4. Actions: Configure the actions for the grid by clicking the “Add New” button. You can specify the following details:
      1. Action: Define the behavior and attributes of the action button.
        1. Button Text: The label displayed on the action button.
        2. Button Type: Select the button style from the dropdown menu.
        3. Action Type: Choose the type of action, such as Sidebar, New Tab, Same Tab, Popup Window, Submit, or Submit & Redirect.
        4. Primary Key: The unique identifier used for the action.
        5. Redirect URL: Specify the URL to redirect after the action.
        6. Primary Key Node (optional): An optional node to associate with the primary key.
        7. Bind Action with Column: Link the action to a specific column.
          1. Column Name: Name of the column to bind the action.
      2. Web View: Configure the appearance of the action button in the web view.
        1. Web Name Type: Choose the display style for web: Name Only, Name & Icon, or Icon Only.
      3. Mobile View: Configure the appearance of the action button in the mobile view.
        1. Mobile Name Type: Choose the display style for mobile: Name Only, Name & Icon, or Icon Only.
      4. Advance: Set advanced configurations for the action.
        1. Action: Choose the behavior for the action, such as Hide, Show, Enable, or Disable.
        2. Add Rule: Define rules to control the action.
          1. Api Field: Specify the API field to apply the rule.
          2. Operator: Define the operator for the rule condition.
          3. Value: Set the value for the rule condition.
          4. Action: Determine the action to take when the rule is triggered.
          5. Is Value From DataModel: Indicate if the value is fetched from a data model.
            1. Model Value From Another Form: Specify if the value comes from another form.

3rd Step – Advance

  1. Design
    1. Action Column Width: Specify the width of the action column in pixels or percentage.
    2. Enable Select Column: Enable a column for selecting rows in the grid.
    3. Enable Export Link (Csv): Allow users to export grid data in CSV format.
    4. Enable Manage Column: Allow users to customize the visibility of columns in the grid.
    5. Show Export Link (Pdf): Display an option to export grid data in PDF format.
    6. Enable Freeze Column: Lock specific columns in place when scrolling horizontally.
    7. Enable Client Side Filter: Enable filtering of data directly in the client-side grid.
      1. Filter Placeholder: Set a placeholder text for the filter input.
      2. Filter Columns Index: Specify the indexes of columns that can be filtered.
    8. Enable Group By: Enable grouping of data rows based on a selected field.
      1. Group By: Select the field to group the rows by.
      2. Default Group Expansion: Set whether groups are expanded or collapsed by default.
      3. Set Group Color: Assign custom colors to specific groups.
        1. Group Name: Specify the name of the group.
        2. Group Color: Define the color associated with the group.
    9. Is odd even color row: Enable alternate row coloring for better readability.
  2. Others
    1. Enable Update Link: Enable the ability to update a linked collection in the grid.
      1. Choose Update Form Id: Select the form ID to be used for updates.
      2. Enable Group Collection: Group updated collections into a specific field.
        1. Group Field (mandatory): Specify the field for grouping updated collections.
      3. Data Source: Select the data source for updates from HTTP, Workflow, No SQL, or RDBMS.
        1. HTTP: Configure HTTP settings for data updates.
          1. Data Connection: Specify the HTTP data connection.
          2. Method (mandatory): Select the HTTP method (GET, PUT, POST, PATCH, DELETE, POCO).
          3. API URL (mandatory): Provide the API endpoint URL.
          4. Query Parameters: Configure query parameters for the API request.
            1. Key: Specify the parameter key.
            2. Value: Specify the parameter value.
            3. Query Variable: Specify the variable for the query.
            4. Select Type: Choose the type of query parameter.
          5. Headers: Configure HTTP headers for the request.
            1. Name: Specify the header name.
            2. Value: Specify the header value.
          6. Others: Additional HTTP settings.
            1. Enable raw query: Allow the use of raw queries in the request.
      4. Response Attribute: Specify the attribute for capturing API responses.
    2. Enable Delete Link: Enable the ability to delete records via the grid.
      1. Data Source: Select the data source for deletions from HTTP, Workflow, No SQL, or RDBMS.
        1. HTTP: Configure HTTP settings for deletions.
          1. Data Connection: Specify the HTTP data connection.
          2. Method (mandatory): Select the HTTP method (GET, PUT, POST, PATCH, DELETE, POCO).
          3. API URL (mandatory): Provide the API endpoint URL.
          4. Query Parameters: Configure query parameters for the API request.
            1. Key: Specify the parameter key.
            2. Value: Specify the parameter value.
            3. Query Variable: Specify the variable for the query.
            4. Select Type: Choose the type of query parameter.
          5. Headers: Configure HTTP headers for the request.
            1. Name: Specify the header name.
            2. Value: Specify the header value.
          6. Others: Additional HTTP settings.
            1. Enable raw query: Allow the use of raw queries in the request.
      2. Response Attribute: Specify the attribute for capturing API responses.
    3. Enable Email Link: Enable linking of email forms for sending emails.
      1. Form Id: Specify the ID of the email form.
      2. Email Form Field (Model in Email Form) (mandatory): Provide the field in the email form to bind data.
      3. Email Field (Source Email Id Field) (mandatory): Specify the email ID field in the source.
      4. Add in Group: Group the email form under a specific category.
    4. Enable Advance Search: Enable advanced search functionality in the grid.
      1. API Method: Select the API method for the search (Get or Post).
      2. Advance Search Form: Specify the form used for advanced search.
      3. Advance Search API Mapping: Map the API parameters for advanced search.
        1. API Param: Specify the API parameter for mapping.
        2. Advance Search Field: Map the search field to the API parameter.
      4. Enable Search On-Load: Enable search execution when the grid loads.
      5. Is hide search button text: Option to hide the text on the search button.
      6. Search Button Class: Specify a CSS class for the search button.
      7. Search Button Icon: Set an icon for the search button.
    5. Enable Selection Submit: Enable submission of selected items in the grid.
      1. Selection Attribute: Specify the attribute used for selected items.
    6. No Data Configuration: Configure the display when no data is available.
      1. No Data Image URL: Provide the URL for the "no data" image.
      2. Background Color: Set the background color for the "no data" display.
      3. Image Width: Define the width of the "no data" image.
      4. Cover Height: Define the height of the "no data" container.
      5. Title: Specify the title displayed when no data is available.
      6. Message: Provide a message to display when no data is available.
    7. Refresh Component On Close: Refresh the grid or component when the current view is closed.

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