Recommended settings

//***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;

//***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
    },
];

//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;

//***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;

//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 = [","];

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"
    }
]

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",
        },
    },
];