GridPlus Component Plug-In

Overview

An editable grid that easily display up to 5,000 rows of editable record data at a time, without needing pagination or experiencing lag. Data is displayed in a flexible and modern interface, equipped with features such as drag & drop columns, column sorting and filtering, manually adjustable column sizes, freezable columns, and many others.

End user abilities include:

Quickly manipulate single items of data or large batches by way of multicell selection
Create new records by adding data into empty rows either in the middle or at the bottom of the grid
Delete records by the 'remove rows' button in a pop up context menu

Key Features & Functionality

Flexible presentation of record data
- Resize columns
- Drag & drop columns
- Display row headers
- Add borders around selected cells
- Hide or show columns
- Freeze or unfreeze columns
- Define column widths for each column
- Display links to record views
Export record data from grid: download to local storage a CSV file of your grid’s current data view
Sorting and filtering: rapid, server-side, multi-column
Data formatting: currency, percentages, date, dropdowns, checkboxes, etc.
Edit records: alter individual or many cell values to update existing records
Create records: create new records of a designer-specified record type
Delete records: remove rows of data to delete records from the data fabric
Excel-like behavior
- Range cell selection with mouse select and drag
- Copy, cut, and paste
- Keyboard manipulation of and navigation between data
- Intuitive context menus with complex functionality (insert new row, remove row, cut, copy, add border)
User based security: restrict editing by user and group with SAIL expressions
Column level data types (Auto-Wrapping Text, Numeric, Date, Dropdown, Checkbox)
- Specialized filtering, editing, and validation ability by type

Parents

Shahid 21 days ago

Hi Alex King i am facing one issue, suppose we have 4 columns on grid A,B,C & D.

my expectations: when i am updating values for column A, i want to change values for B,C & D too. But it is not happening on UI.

Data source variable value is changing because i've written code to update values for B,C & D in rowsSaveInto.
- Cancel
- Up 0 Down
- Reply
- More
- Cancel
Alex King 20 days ago in reply to Shahid

Hi Shahid!

Do the queried values in columns B, C, and D depend on the queried value of A? For example, column A is a field containing an ID of a related record (like a foreign key) and B, C, and D are fields of that related record?
- Cancel
- Up 0 Down
- Reply
- More
- Cancel
Alex King 19 days ago in reply to Shahid

Thanks for the explanation, I believe I understand what you are trying to do.

I'm not sure this is possible since the grid currently only reevaluates from changes made to the data from the UI and not from external changes (e.g. SAIL updates) made to the data.

There are a few potential feature enhancements that could enable this logic. I'll take this as feedback and update you if/when this is made possible in future versions of Grid+. In the meantime, I believe you could write the updated local!data somewhere persisting (like in a record or a file) and manually refresh the grid to view changes to isActive.

Sorry for any inconvenience! Let me know if you have other questions.
- Cancel
- Up 0 Down
- Reply
- More
- Cancel

Shahid 20 days ago in reply to Alex King

Hi Alex King please have look at the below code:

a!localVariables(
  local!changes: {},
  local!data: {
    a!map(
      id: 1,
      registeredOn: todate("1/1/2024"),
      name: "shahid",
      isActive: false
    ),
    a!map(
      id: 2,
      registeredOn: todate("2/11/2024"),
      name: "ankit",
      isActive: false
    ),
    a!map(
      id: 3,
      registeredOn: todate("5/14/2024"),
      name: "shahid",
      isActive: false
    ),
    a!map(
      id: 4,
      registeredOn: todate("12/11/2024"),
      name: "ankit",
      isActive: false
    )
  },
  {
    gridPlusLayout(
      label: "Grid+ Layout",
      labelPosition: "ABOVE",
      validations: {},
      height: "AUTO",
      rowsValue: local!data,
      rowsSaveInto: {

        a!save(

          local!data,a!forEach(
            items: local!data,
            expression: a!update(fv!item,"isActive",true))
        )
      },
      primaryKeyFieldName: "id",
      columnConfigs: {
        textcolconfig(
          field: "id",
          title: "ID",
          relationshipName: null,
          validator: null,
          readOnly: true,
          colWidth: 30
        ),
        checkboxcolconfig(
          field: "isActive",
          label: "",
          labelPosition: "BEFORE",
          checkedTemplate: true,
          uncheckedTemplate: false,
          title: "Is Active",
          relationshipName: null,
          validator: null,
          readOnly: true,
          colWidth: 50
        ),
        textcolconfig(
          field: "name",
          title: "Name",
          relationshipName: null,
          validator: null,
          readOnly: false,
          colWidth: 100
        ),
        datecolconfig(
          field: "registeredOn",
          dateFormat: null,
          correctFormat: false,
          title: "Date",
          relationshipName: null,
          validator: null,
          readOnly: true,
          colWidth: 100
        )





      },
      changeDataValue: local!changes,
      changeDataSaveInto: local!changes,
      /*deleteDataValue: local!deletions,*/
      /*deleteDataSaveInto: local!deletions,*/
      readOnly: null,
      rowHeaders: true,
      hiddenFields: null,
      showPrimaryKey: true
    )
  }
)

now if you change value for Name column you will see local!data isActive proprty value will become true for all items. But on UI the check boxes are not updating.

Hope you got my point

Comment

Shahid 20 days ago in reply to Alex King

Hi Alex King please have look at the below code:

a!localVariables(
  local!changes: {},
  local!data: {
    a!map(
      id: 1,
      registeredOn: todate("1/1/2024"),
      name: "shahid",
      isActive: false
    ),
    a!map(
      id: 2,
      registeredOn: todate("2/11/2024"),
      name: "ankit",
      isActive: false
    ),
    a!map(
      id: 3,
      registeredOn: todate("5/14/2024"),
      name: "shahid",
      isActive: false
    ),
    a!map(
      id: 4,
      registeredOn: todate("12/11/2024"),
      name: "ankit",
      isActive: false
    )
  },
  {
    gridPlusLayout(
      label: "Grid+ Layout",
      labelPosition: "ABOVE",
      validations: {},
      height: "AUTO",
      rowsValue: local!data,
      rowsSaveInto: {

        a!save(

          local!data,a!forEach(
            items: local!data,
            expression: a!update(fv!item,"isActive",true))
        )
      },
      primaryKeyFieldName: "id",
      columnConfigs: {
        textcolconfig(
          field: "id",
          title: "ID",
          relationshipName: null,
          validator: null,
          readOnly: true,
          colWidth: 30
        ),
        checkboxcolconfig(
          field: "isActive",
          label: "",
          labelPosition: "BEFORE",
          checkedTemplate: true,
          uncheckedTemplate: false,
          title: "Is Active",
          relationshipName: null,
          validator: null,
          readOnly: true,
          colWidth: 50
        ),
        textcolconfig(
          field: "name",
          title: "Name",
          relationshipName: null,
          validator: null,
          readOnly: false,
          colWidth: 100
        ),
        datecolconfig(
          field: "registeredOn",
          dateFormat: null,
          correctFormat: false,
          title: "Date",
          relationshipName: null,
          validator: null,
          readOnly: true,
          colWidth: 100
        )





      },
      changeDataValue: local!changes,
      changeDataSaveInto: local!changes,
      /*deleteDataValue: local!deletions,*/
      /*deleteDataSaveInto: local!deletions,*/
      readOnly: null,
      rowHeaders: true,
      hiddenFields: null,
      showPrimaryKey: true
    )
  }
)

now if you change value for Name column you will see local!data isActive proprty value will become true for all items. But on UI the check boxes are not updating.

Hope you got my point

Children

Alex King 19 days ago in reply to Shahid

Thanks for the explanation, I believe I understand what you are trying to do.

I'm not sure this is possible since the grid currently only reevaluates from changes made to the data from the UI and not from external changes (e.g. SAIL updates) made to the data.

There are a few potential feature enhancements that could enable this logic. I'll take this as feedback and update you if/when this is made possible in future versions of Grid+. In the meantime, I believe you could write the updated local!data somewhere persisting (like in a record or a file) and manually refresh the grid to view changes to isActive.

Sorry for any inconvenience! Let me know if you have other questions.
- Cancel
- Up 0 Down
- Reply
- More
- Cancel