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
Anonymous
Parents
  • Hi  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.

  • 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?

Comment
  • 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?

Children
  • 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.

  • Hi  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