State Bar

The StateBar is a vertical bar that displays the state (RowState) of the data row. There are five row states: create, updated, createAndDeleted, deleted, and none.

How to set up the status bar

To change the status bar settings, use setStateBar(). To check the currently set state, use getStateBar().

Specifies whether to display the status bar on the screen

• visible: Specifies whether to display the status bar area on the screen.

gridView.setStateBar({
   visible: false
});

gridView.setStateBar({
   visible: true
});

Changing row status

RowState is changed by the user's key input, but can be set arbitrarily by the developer.

var curr = gridView.getCurrent();
var rowState = $(":input:radio[name='rowState']:checked").val();
dataProvider.setRowState(curr.dataRow, rowState);

Changing display format

By default, the status of each row is indicated by an icon. However, there are times when you want to display it as text, depending on your needs. In this case, you can specify text in the stateBar.mark property and a character for each state in the stateTexts property.

gridView.setStateBar({
   mark: "text",
   stateTexts: {
     created: "C",
     updated: "U",
     deleted: "D",
     createAndDeleted: "X"
   }
});

gridView.setStateBar({
   mark: "image"
});

Head/Foot

You can display text in the head and foot areas of the status bar.

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

gridView.setStateBar({
   headText: "H",
   footText: "F"
});