
# Recommended settings

## Grid settings

This is a frequently used option.
Please refer to the comments and configure as needed.
This is a recommended and required setting if the comment begins with \*\*\*.

### Editing related settings

https://docs.realgrid.com/refs/Interface/EditOptions#editoptions

```js
//***When sorting or filtering, newly added or edited data is rearranged according to the criteria (sort, filter).
//***When you want to prevent that and keep the position until the user reorders or filters it.
gridView.sortMode = "explicit";
gridView.filterMode = "explicit";

//editable grid
gridView.editOptions.editable = true;

//***Commit immediately after cell editing is complete
gridView.editOptions.commitByCell = true;

//***Commit when clicking on an area outside the grid while editing
gridView.editOptions.commitWhenLeave = true;

//When moving columns using the tab key, when reaching the last column, focus moves to the first column of the next row
gridView.editOptions.crossWhenExitLast = true;

//***When a cell button is clicked, onCellButtonClicked() or onCellItemClicked() occurs by default.
//In addition to ***, onCellClicked() occurs additionally when you want to prevent this.
gridView.editOptions.exceptDataClickWhenButton = true;
```

### Related to editing merge cells

https://docs.realgrid.com/guides/editing/edit-merge  
https://docs.realgrid.com/guides/cell-components/cell-merging

```js
//***When you want to prevent merged cells from appearing separate when editing cells
gridView.displayOptions.editItemMerging = true;

//***When you want to change the values of merged cells in batches, set mergeEdit of the column to true.
//***To use this function, you must use at least one of the two options below.
//gridView.displayOptions.editItemMerging = true;
//gridView.editOptions.commitByCell = true;
var columns = [
    {
        name: "Gender",
        fieldName: "Gender",
        width: "40",
        header: {
            text: "Gender",
            styleName: "orange-column",
        },
        mergeRule: {
            criteria: "value",
        },
        mergeEdit: true, //*** Corresponding property true
    },
];
```

### Deletion-related settings

```js
//When deleting, the rowState is changed to “deleted” state without being deleted immediately from the provider.
dataProvider.softDeleting = true;

//Whether to display the rowState of 'deleted' on the screen, used in combination with dataProvider.softDeleting.
gridView.hideDeletedRows = false;
```

### Display-related settings

```js
//***Synchronize check bar and head check of check bar
//***ex) When all check bars are checked, the head is also checked
gridView.checkBar.syncHeadCheck = true;

//How to set the height of the header
gridView.header.height = 40;

//When you do not want to display the footer at the bottom of the grid
gridView.footer.visible = false;

//Set row height
gridView.displayOptions.rowHeight = 30;

//Allow the user to change the row height
//Adjustable at the beginning of the first row, the height of all rows changes to be the same
gridView.displayOptions.rowResizable = true;

// Allows individual row height to be adjusted
gridView.displayOptions.eachRowResizable = true;

//***When you want to fix a row while maintaining alignment
gridView.fixedOptions.exceptFromSorting = false;

//fix the heat
gridView.fixedOptions.colCount = 2;

//fix the row
gridView.fixedOptions.rowCount = 2;
```

### Copy/paste related

https://docs.realgrid.com/guides/editing/copy-and-paste

```js
//When copying a dropdown column, it is copied as a value value. If you want to copy it as a label value,
gridView.copyOptions.lookupDisplay = true;

//When pasting the label value, convert it to a value value and paste it.
gridView.pasteOptions.convertLookupLabel = true;

//Values not in the dropdown list cannot be pasted
gridView.pasteOptions.checkDomainOnly = true;

//Columns where readOnly or editable is false are excluded from paste
gridView.pasteOptions.checkReadOnly = true;

//***When pasting '1,000' into a number field, only 1 is pasted due to the ',' character.
gridView.pasteOptions.numberChars = [","];
```

### DropDown editor settings

This is an example of using dropdown (selectbox) in a column.

https://docs.realgrid.com/guides/cell-components/lookup-column
https://docs.realgrid.com/guides/editor/dropdown-editor
https://docs.realgrid.com/refs/Interface/DropDownCellEditor#dropdowncelleditor

```js
var lookupDatas = [
{value: "M", label: "Maeil Dairy Products"},
{value: "O", label: "Ottogi"},
{value: "S", label: "Seoul Milk"},
{value: "B", label: "Busan Milk"}
];
//If you want to change the property names of value and label, use as follows
//lookupData: {value:"code", label:"text", list:[{code: "M", text: "Maeil Dairy"}, {code: "S", text: "Seoul Milk"}] },

var columns = [
    {
        name: "FoodCompany",
        fieldName: "FoodCompany",
        width: 130,
        lookupDisplay: true;
        lookupData: lookupDatas,
        header: {
           text: "lookupDatas" 
        },
        editor: {
            type: "dropdown",
            textReadOnly: true, //*** When preventing the user from entering with the keyboard
            domainOnly: true, //*** When you want to allow only values in the dropdown list
            dropDownWhenClick: true //When you want the dropdown list to expand even when you click on the cell
        },
        styleName: "orange-column"
    }
]
```

### Check renderer settings

This is an example of using a checkbox in a column.

https://docs.realgrid.com/guides/renderer/check-renderer

```js
var columns = [
    {
        name: "UseYN",
        fieldName: "UseYN",
        width: 60,
        editable: false, //*** Must be set to false
        renderer: {
            type: "check",
            trueValues: "Y", //Value to use as true
            falseValues: "N", //Value to use as false
        },
        header: {
            text: "check",
            styleName: "orange-column",
        },
    },
];
```
