Overview

In RealGrid2, fields and columns are used to display data.

DataField: An object that is responsible for a logical location for storing data.
DataColumn: An object that contains properties for displaying the information of DataField on the screen.

Field Definition

When defining a field, it must be in the form of an object array, and each object consists of one field.

gridView.setFields([
  {
    fieldName: "KorName",
    dataType: "text",
  },
  {
    fieldName: "Gender",
    dataType: "text",
  },
  {
    fieldName: "Age",
    dataType: "number",
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
  },
]);

Basic settings

fieldName: Specify the same name as the key value of the data to be imported.
dataType: Define the data type of the data to be imported.
Data type type:

text: Text (default)

number: Number

datetime: Date

boolean: Boolean

Frequently used options

booleanFormat: Format when the value is in Boolean format
datetimeFormat: Format when the value is in date format
valueExpression: Formula to be used when it is a calculated field
valueCallback: Callback to be calculated by specifying the formula when it is a calculated field

Column definition

When defining a column, it must have an object array format, and each object consists of one column.

gridView.setColumns([
  {
    name: "KorName",
    fieldName: "KorName",
    width: "60",
    header: { text: "Name" },
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "40",
    header: { text: "Gender" },
  },
  { name: "Age", fieldName: "Age", width: "40", header: { text: "B This" } },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "100",
    header: { text: "Phone number" },
  },
]);

Frequently used properties

name: Set the column name to use.
fieldName: Set the field name to be linked to the column.
checked : Whether the header checkbox is checked
fillWidth : Width within the column group
footer : Column footer (first item if there are multiple)
footers : Column footer collection object
groupFooter : Group footer (first item if there are multiple)
groupFooters : Group footer collection object.
header : Column header
headerSummaries : Header Summary collection object.
headerSummary : Header Summary (first item if multiple)
width : Column width
visible : Whether to display the column
renderer : Renderer
styleName : Style class name
editButtonVisibility : How to display the cell editor button

gridView.setColumns([
  {
    fieldName: "field1",
    name: "column1",
    editor: {
      type: "dropdown",
    },
    editButtonVisibility: "always", //always: Always display
  },
]);

editor : Editor
exportStyleName : Style name to be used when exporting to Excel
numberFormat : Format displayed when a value in the numeric format specified in the column is changed. Specify by separating the thousands symbol and decimal point with ;.
popupMenu: Popup menu
button: Button to display on the right side of the data cell
buttonVisibility: How to display the column button
datetimeFormat: Format to display when the value is in the date format specified in the column. If undefined, the numberFormat specified in GridBase.formatOptions is applied.
labelField: Field that specifies the list of values to be displayed in the column cell
labels: List of values to be displayed in the column cell
lookupData: Sets values and labels.
lookupDisplay : Whether to display the value of the labels item in the position corresponding to the cell value in the values list in the column cell
lookupKeyFields : lookupKeyFields
lookupSourceId : id of the registered lookupSourceTree
readOnly : Whether to use readOnly

gridView.setColumns([
  {
    fieldName: "field1",
    name: "column1",
    readOnly: true, // read-only
  },
]);

values : List of actual values in the column cell
editable: : Whether it is editable

How to use buttons in the grid

The grid provides various buttons.

You can set the visibility for each button, and refer to the types and guides for each button below.

editButtonVisibility : Grid drop-down button, date button, etc.

gridView.setColumns([
  {
    fieldName: "field1",
    name: "column1",
    editor: {
      type: "dropdown", // or "date"
    },
    editButtonVisibility: "always", // Always display
  },
]);

Option types of editButtonVisibility property

always: always visible
default: visible only when the mouse is over the cell or when the cell is selected
hidden: not visible
rowfocused : Show when row is selected
visible : Show when cell is selected

buttonVisibility : Cell button, popup button

gridView.setColumns([
  {
    fieldName: "field1",
    name: "column1",
    button: "action", // Apply cell button
    // button : "popup" // Apply popup button
    buttonVisibility: "always", // Always display
  },
]);

Option types of buttonVisibility property

always: always visible
default: visible only when the mouse is over the cell or the cell is selected
hidden: not visible
rowfocused: visible when the row is selected
visible: visible when the cell is selected

Renderer Button You can use the button renderer by specifying renderer.type = "button".

gridView.setColumns([
  {
    fieldName: "field1",
    name: "column1",
    editable: false,
    renderer: {
      type: "button", // Apply renderer button
    },
  },
]);

When the button renderer is clicked, the onCellItemClicked event occurs. Please implement the desired behavior through this event.

gridView.onCellItemClicked = function (grid, index, clickData) {
  alert(clickData.value + " The button was clicked.");
  return true;
};

Frequently used callback functions

When you want to show cell buttons or pop-up buttons depending on conditions

If you want to hide or show cell buttons or pop-up buttons depending on conditions, you can use buttonVisibleCallback as shown below.

If you use buttonVisibleCallback, the buttonVisibility property is ignored, so you must set the conditions for showing the button directly within the callback function.

gridView.setColumns([
  {
    fieldName: "field1",
    name: "column1",
    button: "action", // Apply cell button
    buttonVisibleCallback: function (grid, index, focused, mouseEntered) {
      return (
        grid.getValue(index.itemIndex, index.fieldName) === "AAA" &&
        (focused || mouseEntered)
      );
    },
  },
]);

When applying styles to columns based on specific conditions

When applying CSS styles or properties such as editable to columns based on specific conditions, you can implement them through styleCallback.

gridView.setColumns([
  {
    fieldName: "field1",
    name: "column1",
    styleCallback: (grid, dataCell) => {
      if (dataCell.value === "AAA") {
        return { styleName: "font-theme", editable: false };
      }
    },
  },
]);

When setting the value displayed on the screen according to conditions

If you want to set the value displayed on the screen according to conditions, you can set it through displayCallback as follows.

gridView.setColumns([
  {
    fieldName: "field1",
    name: "column1",
    displayCallback: (grid, index, value) => {
      if (value === "AAA") {
        return "Ax3";
      }
    },
  },
]);

Click event

Callback that notifies that a grid cell has been clicked

You can get the clicked location (type) through the second parameter of the event. onCellClicked

gridView.onCellClicked = function (grid, clickData) {
  console.log("onCellClicked: " + JSON.stringify(clickData));
};

Callback that notifies that a grid cell has been double-clicked

You can get the clicked location (type) through the second parameter of the event. onCellDblClicked

gridView.onCellDblClicked = function (grid, clickData) {
  console.log("onCellDblClicked: " + JSON.stringify(clickData));
};

A callback that notifies that an element contained in a grid cell has been clicked

You can get the clicked location (type) through the second parameter of the event. onCellItemClicked

gridView.onCellItemClicked = function (grid, index, clickData) {
  console.log("onCellItemClicked: " + JSON.stringify(clickData));
  return true;
};

A callback that notifies that the user clicked the Header of the checkBar to select or deselect all, or entered checkAll true / false to select or deselect all onItemAllChecked

gridView.onItemAllChecked = function (grid, checked) {
  console.log("onItemAllChecked: " + checked);
};

A callback that notifies that the user clicked the checkbox of the checkBar or called checkItem to change the check onItemChecked

gridView.onItemChecked = function (grid, itemIndex, checked) {
  console.log("onItemChecked: " + checked + " at " + itemIndex);
};

A callback to notify that the user changed the check by clicking the checkbox in the checkBar or calling checkItem onItemsChecked

gridView.onItemsChecked = function (grid, items, checked) {
  console.log("onItemChecked: " + items.join() + " are checked as " + checked);
};

A callback to notify that the button was clicked in SearchCellEditor onSearchCellButtonClick

gridView.onSearchCellButtonClick = function (grid, index, text) {
  console.log("onSearchCellButtonClick: " + " button was clicked!");
};

How to set column order and direction

In RealGrid, setting column order and direction is called column layout (column grouping).

You can check detailed examples of layout here.

const layout = [
  {
    name: "companyGroup",
    direction: "horizontal", // horizontal or vertical
    items: ["Country", "CompanyName"],
    header: {
      text: "Company",
    },
  },
  "OrderID",
  "CustomerID",
  "EmployeeID",
  "OrderDate",
  "Phone",
];
 
gridView.setColumnLayout(layout);

layout

Frequently used properties when applying layouts

column : Column name
direction : Cell placement direction
header : Header layout setting information
hideChildHeaders : Whether to hide the header of the sub-layout
items : Sub-layout items
visible : Whether to display
width : width
name : layout name

How to change column information

There are several ways to change the set column information.

const columns = [
  {
    name: "KorName",
    fieldName: "KorName",
    width: "60",
    header: {
      text: "Name",
    },
    editable: true,
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "40",
    header: {
      text: "Sex",
    },
    editable: false,
  },
];

When the column is set as above

Change the column header text and editability with the column name (name)

gridView.columnByName("KorName").header.text =
  "Change the name column header text";
 
gridView.columnByName("KorName").editable = false;

Change the column header text and editability with the field name (fieldName)

gridView.columnByField("Gender").header.text =
  "Change the gender column header text";
 
gridView.columnByField("Gender").editable = true;

Changing column width and order

When changing general column information, use the columnByName() mentioned above, and for information related to screen composition, you can change the column layout setting information through layoutByName().

Changing column width

gridView.layoutByName("Column1").cellWidth = 150;

Changing column order

gridView.layoutByName("Column1").vIndex = 4;

How to change the style of a column, such as background color and font size

You can set the style of a column (font size, background color, etc.) through the styleName property.

You can apply the style class defined in the style sheet or style tag to styleName as follows.

// js
 gridView.setColumns([ { name: "Age", fieldName: "Age", width: "60", header: { text: "Age", }, styleName:'font-theme2' }, { name: "KorName", fieldName: "KorName", width: "60", header: { text: "Name", }, styleName:'font-theme1' }, ]);
 
// css
.font-theme1 {
    color: blue;
    text-align: right;
    background-color: pink;
}
.font-theme2 {
    color: red;
    text-align: left;
}

How to change the editability of a column, css style, etc. depending on conditions

You can use styleCallback to apply various conditions such as column style, editability, etc.

For detailed guide, refer to here.

gridView.setColumns([
  {
    name: "Gender",
    fieldName: "Gender",
    width: "60",
    header: {
      text: "성별",
    },
    styleCallback: (grid, dataCell) => {
      if (dataCell.value === "남") {
        return { styleName: "font-theme1", editable: false };
      }
    },
  },
]);
 
// css
.font-theme1 {
    color: blue;
    text-align: right;
    background-color: pink;
}

Change the displayed value of a column

You can use displayCallback to set the value displayed on the screen. However, if the dataType of the field is number, you must initialize the applied numberFormat before using it.

For detailed guide, refer to here.

If dataType is text

//
gridView.setColumns([
  {
    name: "KorName",
    fieldName: "KorName",
    width: "60",
    header: {
      text: "Name",
    },
    displayCallback: (grid, index, value) => {
      return value + " 님";
    },
  },
]);

If dataType is number

If you simply want to add a string before or after the data value, you can set it through the prefix and suffix properties.

//
gridView.setColumns([
  {
    name: "Amount",
    fieldName: "Amount",
    width: "60",
    header: {
      text: "금",
    },
    prefix: "$",
  },
]);

If you need to use displayCallback, you can initialize numberFormat to null as shown below and return it with the value you want to display.

gridView.setColumns(
    [
        {
            name: "Age",
            fieldName: "Age",
            width: "60",
            header: {
                text: "Age",
            },
            numberFormat: null,
            displayCallback: (grid, index, value) => {
                return '만' value + '세'
            }
        },
    ]
);

Adding fields and columns

If you add a column other than the ones that are set, you must also add the field of the column you want to add.

let field = {
  fieldName: "EmployeeID",
  dataType: "text",
};
 
dataProvider.addField(field);
 
let col = {
  name: "EmployeeID",
  fieldName: "EmployeeID",
  width: "90",
  header: {
    text: "Employee ID",
  },
};
 
gridView.addColumn(col);

Delete Column

In contrast to adding columns, you can also remove fields and columns using removeField() and removeColumn().

gridView.removeColumn("EmployeeID");
dataProvider.removeField("EmployeeID");

Get Column Information

If you want to get information on all created columns

gridView.getColumns();

If you want to get information on only the columns currently displayed on the screen

gridView.getDisplayColumns();

If you only get the column name

gridView.getColumnNames();

If you get specific column props

gridView.getColumnProperty("colName", "renderer");
 
// or
 
gridView.columnByName("colName").renderer;

Column header and data line break

To make a line break in the data cell area, you can set the line break as follows using white-space css. If the column header content is long, it will be automatically line broken.

// js
gridView.setColumns([
    {
    name: "KorName",
    fieldName: "KorName",
    width: "60",
    header: {
        text: "Name"
    },
    styleName: "multiline-pre-line"
    },
]);
 
// css
// Automatic line break when data is long
.multiline-pre-line {
    white-space: pre-line;
}
// Line breaks only when explicitly using \n
.multiline-pre {
    white-space: pre;
}

Hide column

You can set whether to show or hide the column using the visible property.

//Get the current visible property value of the name (KorName) column
var visible = gridView.columnByName("KorName").visible;
 
//Do not show the name (KorName) column.
gridView.columnByName("KorName").visible = false;
 
//Show the name (KorName) column.
gridView.columnByName("KorName").visible = true;

For more information, refer to the guide.

Grid Quick Start Fill in and Retrieve Data