Edit Cells with DropDown List in Grid
In this article, you will learn how to apply a dropdownlist as editor to edit cells in Grid component for Angular, React and Vue. You can set the built-in editor to specific column and you can edit all cells that belong to it by simply clicking on a cell and choosing another item from the dropdown list.
You will find sample code that shows how to add dropdown list to edit grid cells in JavaScript, Angular, React and Vue, in following sections below.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In above demo, you can change the Ship Mode using different options from a dropdown list. The cells that have a dropdown editor attached have a down arrow icon, which when clicked will open a dropdownlist. Once the list opens, you can select a different option.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
IntegralUI Web
Native Web Components for Angular, React and Vue
How to Apply a DropDownList to Grid Cells
To apply a dropdown list as editor to grid cells is simple. You need to set the editorType field of specific column to DropList and provide an item list in editorSettings field.
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
The editorSettings field of column object, accepts the following settings:
- allowAnimation - determines whether animations are enabled in DatePicker
- dropDownAdjustment - an object that holds top and left position adjustments for the calendar
- dropDownSize - an object that holds the width and height of dropdownlist
- items - specifies a collection of items shown in dropdown list
- maxDropDownItems - specifies the maximum number of items displayed in the current view of the dropdown list, by default there are 5 items
- visible - determines when editor becomes visible: always, click, hover or none
The visible field is used only when editing mode is set to Custom. For other modes: Batch, Form or Inline this field is not used.
Related: Different Editing Modes in Grid Component
Once the list is available, you can add values to the cell that belong to the column with dropdown editor. In case of a dropdown list, the cell value field accepts any object or basic value set in the list items value field. For example:
As you can see, the cell value field is set to point to different items from the list. You can also set the cell value to null or not set it at all, which will result in showing a cell with blank space with only a dropdown icon.
How to Handle Data Changes from a DropDownList Editor
Whenever a new item is selected from the dropdown list, the cell value field changes. This change accompanies two events:
- valueChanging - fires just before the cell value changes
- valueChanged - fires after the cell value has changed
By handling these events in your code, you can change the default behavior. For example, you can set a validation in valueChanging event handler to check whether the chosen option from the list is acceptable by the cell that belongs to a specific row. If not, just cancel the event action.
In case of this example, the second row with customer 'Barry French' only accepts a Ship Mode set to 'Express Air'. If a different value is chosen from the dropdown list, the change is cancelled.
How to Change DropDownList Editor Appearance
In order to change the appearance of dropdown list, you can create a custom CSS file where you can set up how the dropdownlist will appear. Once this file is ready, you can apply it to the Grid customStyle property. Any changes to the built-in classes related to the DropDownList will be applied accordingly.
For example, if you want to have a list where even/odd items appear in different color, you can do it in this way:
Conclusion
In order to edit cells using a dropdown list, you can use the built-in editor of the Grid component. You can apply a dropdown editor to all cells that belong to a specific column, by changing the editor type and providing a list of options. Whenever a cell is clicked, a dropdown list will popup where you can choose a different option. In addition, you can change the overall appearance of the editor using custom CSS settings that will override default appearance.
A sample code is available in JavaScript, Angular, React and Vue that shows how to edit grid cells using a dropdown list. The Grid is a native Web Component, part of IntegralUI Web that you can use in any JavaScript framework.