Editing Overview for Grid Component

This article contains a general overview of editing in the Grid for React, Angular and Vue:

• Different Modes for Editing in the Grid
  • Batch Editing
  • Form Editing
  • Inline Editing
  • Custom Editing
• Built-in Editors
• Available Events to Detect Changes to Grid Data

Different Edit Modes in Grid

IntegralUI Grid component provide different ways to edit grid data. You can use one of the following edit modes: batch-editing, edit cells with a form, inline cell editing or create your own custom editing.

Batch Editing

With Batch editing you can edit one or multiple rows at the same time using built-in editors depending on column editor type.

Form Editing

Form editing in Grid component allows you to edit rows one by one using a Form, which is automatically generated list of editors for all editable cells for specified row.

Inline Editing

Inline editing in Grid component allows you to edit rows one by one using built-in editors. You can choose from several editors available to edit grid cells, depending on data type.

Custom Editing

If custom edit mode is active, you are free to create your own editing process. Each cell has a template to which you can attach a different editor. You can share the same editor for all cells in the same column or add a different one based on some conditions. These can be either built-in editors or you can add/create your own custom editor.

Here is an example: How to Add and Edit Rows to the Grid Dynamically.

Available Built-In Cell Editors in Grid

The easiest way to edit grid cells is using a built-in editor. Depending on the cell value, you can choose among several different types of cell editors:

• Button - represents a button, with specific command actions
• CheckBox - represents a check box, use it to edit Boolean values
• DatePicker - represents a dropdown editor with a calendar for editing Date values
• DropDownList - represents a simple dropdown list, use it to select an item from a list
• ImageList - use it to display one or more images in single cell
• Numeric - use it to edit numeric values
• ProgressBar - use it to display progressions of an operation
• Rating - for visualizations of ratings
• Slider - you can change progression on demand
• Text - represents a text box, use it to edit text values

To enable a built-in editor, you need to specify the column (which will include the editor in its cells) and set the editor behavior and appearance. The column object uses the following fields for editor settings:

• editorType - specifies the type of the editor in use
• editorSettings - specifies the editing behavior

The settings for each editor type are different. For example for DatePicker editor the column object should include the following settings:

import { IntegralUIEditorType } from './integralui/components/integralui.enums.js';

let column = { 
    id: 10, 
    title: "Order Date", 
    editorType: IntegralUIEditorType.Date,
    editorSettings: {
        allowAnimation: true,
        calendarSize: { width: 275, height: 225 },
        locales: "en-GB",
        firstDayOfWeek: "Monday",
        format: "Custom",
        formatOptions: {
            year: "numeric",
            month: "short",
            day: "2-digit"
        }
    }
}
                

The editorType is set to IntegralUIEditorType.Date, which presumes that a DatePicker is displayed for editing of the cell value. The IntegralUIEditorType is an enumeration with different values for each editor type.

The editorSettings in this case, specifies whether localization of Date values is in use, the Date format and if custom the way in which the Date value is displayed. These settings are compatible with standard settings for Date objects.

The link between the cell and its editor is by cell value field. The value field of the cell object can contain any custom object, basic string or numeric value. In case of DatePicker, the cell value needs to contain a Date object.

Related: Grid Data Structure

With date editor enabled, each cell in specified column will display a dropdown button. Whenever a cell is clicked, a dropdown popup will appear showing a calendar where you can change the date value. Once date is selected, the dropdown will close and the cell value will change to the new date.

How to Detect Changes to Grid Data

Depending on current edit mode in use: Batch, Form or Inline, whenever grid data changes additional events are fired:

• dataChanging - occurs before data changes to specified row are confirmed
• dataChanged - occurs after data changes are confirmed

Using these events, you can review any changes to the row and cancel or proceed with saving. A more detailed information about this events with an example on how to handle them is available in articles for each editing mode (see above).

In addition, whenever a cell value changes using a built-in editor, the valueChanging and valueChanged events are fired. The data in these events includes the new value and the cell object that is changed. You can handle these events in your code and provide further operations. For example, you can:

• validate the new value prior its confirmation in valueChanging event
• confirm the change in valueChanged event

The Grid is a native Web Component, part of IntegralUI Web that you can use in Angular, React, Vue and any other JavaScript framework .