Check Bar

CheckBar is used to select a specific row in the grid. Specific rows selected by CheckBar can be used to batch process commands such as copy or delete.

How to set up checkbar

To change the checkbar settings, use setCheckBar(). To check the currently set state, use getCheckBar().

Specifies whether to display the check bar on the screen

visible: Specifies whether the check bar area is displayed on the screen.

gridView.setCheckBar({
    visible: false,
});

gridView.setCheckBar({
    visible: true,
});

Only one row can be checked (radio button)

If you set the exclusive property of the check bar to true, you can check only one row like a radio button.

exclusive: Specifies whether only one row can be checked.

gridView.setCheckBar({
    exclusive: true,
});

gridView.setCheckBar({
    exclusive: false,
});

Check all

By default, a v mark is placed in the head area of the check bar. When you click this area, all rows will be checked.

showAll: Specifies whether to display v in the check bar head area. If false, clicking on the head area will not check all rows.

gridView.setCheckBar({
    showAll: false,
});

gridView.setCheckBar({
    showAll: true,
});

Check

API that can check rows one by one: checkItem(), checkRow() API that can check multiple rows: checkItems(), checkRows() API that can check the entire row: checkAll()

gridView.checkItem(0, true);

gridView.checkItem(0, false);

Click any column or column header to sort, then click the button below.

gridView.checkRow(0, true);

gridView.checkRow(0, false);

The results are different because dataRow, itemIndex are different.

gridView.checkItems([1, 2], true);

gridView.checkItems([1, 2], false);

Click the header of any column to sort, then click the button below.

gridView.checkRows([1, 2], true);

gridView.checkRows([1, 2], false);

Head/Foot

You can display text in the head and foot areas of the check bar. To use the properties below, the value of the showAll property must be false.

headText: Specifies the text to be displayed in the head area.
footText: Specifies the text to be displayed in the foot area.

gridView.setCheckBar({
   showAll: false;
   headText: "H",
   footText: "F"
});

Checkable Control

You can control whether the check bar can be checked using the formula below.

values[] - Returns the value of each field in the row being displayed as values[“field name”] or values[fieldIndex].
row - Item index of the row being displayed.
datarow - Data row index of the row being displayed.
checked - checked status of the row being displayed. Returns true/false.
checkable - Checkable status of the row being displayed. Returns true/false.
state - The state of the data row referenced by the row being displayed. ‘c’: create, ‘u’: modify, ‘d’: delete, ‘x’: delete after creation.

relational operators

Equal is =, not ==.
not equal is <>, not !=.
greater then is >.
less then (smaller) is <.
not means ! It is not.
and is and, not &&.
or is || It is or, not .

ex) state = 'c': Only newly added rows can be checked values['Gender'] = 'Male': Only rows where the Gender field value is 'Male' can be checked. row < 10: Only rows with itemIndex of 10 or less can be checked. datarow < 10: Only rows with dataRow of 10 or less can be checked. (datarow < 10) and (state = 'c'): Only dataRow is less than 10 and newly added rows can be checked.

You can set these formulas in checkBar.checkableExpression and apply them to the grid using gridView.applyCheckable(). You can also use gridView.setCheckableExpression() to set and apply at once. To initialize the applied checkable state, use gridView.resetCheckables().

//Set only formula
gridView.checkBar.checkableExpression = "values['Gender'] = 'Male'";

//Actually apply the set formula
gridView.applyCheckables();

//Setting and applying the formula at the same time
gridView.setCheckableExpression("row < 5", true);

//Remove applied formula
gridView.resetCheckables();

Get selected row values

//The returned value is dataRow
var rows = gridView.getCheckedRows(true);
alert(rows);

//The returned value is itemIndex
var items = gridView.getCheckedItems();
alert(items);

Merge checkbars

You can merge the checkbar area according to the condition by adding the field of the condition to be merged into the checkbar as a condition.

gridView.checkBar.mergeRule = "value['Gender']"

Check, simultaneous use of text

You can set the checkbox and text to be displayed simultaneously in the checkbar header. Specify the location of the checkbox with the checkLocation property.

gridView.setCheckBar({headText: "Check", checkLocation: "bottom", width: 50});

How to hide a specific row checkbar depending on a condition 1

There may be a situation where the checkbar of a specific row is set to not be visible depending on a specific condition.

In a situation where the checkbar of a specific row is set to not be visible and not checked, you can implement it by hiding the disabled checkbar using checkableExpression or checkableCallback.

The following is an example of hiding the checkbox if the age is under 60.

// js
const f = function (dataSource, item) {
    if (gridView.getValue(item.itemIndex, "Age") < 60) {
        return false;
    }
    return true;
};
 
gridView.setCheckBar({ checkableCallback: f });
 
gridView.onDataLoadComplated = (grid) => {
    gridView.applyCheckables();
};
 
// css
.rg-checkbar-disabled>div {
  display:none
}

How to hide checkbars for specific rows based on conditions 2

If you need to check the entire checkbar but simply make it invisible, you can hide it using dynamic styles as shown below.

The following is an example of hiding the checkbox when the value of the gender column is "Female".

// js
var checkboxVisible = function (grid, type, index) {
    if (grid.getValue(index, "Gender") === "Female") {
        return "checkbox-dn"; // style class
    }
};
 
gridView.setCheckBar({ cellStyleCallback: checkboxVisible });
 
// css
.checkbox-dn input[type="checkbox"] {
  display: none !important;
}

Status Bar Link checkbar to data field