Manipulating the grid

In the previous step Populating and Fetching Data, you learned how to populate and fetch data into a grid. In this step, we'll look at different ways to manipulate a data-filled grid.

Sorting Sorting

RealGrid2 includes a sorting function that allows users to sort data by clicking on the header area of the grid without any special coding or development.

User operation

If a user wants to sort a column by clicking its header, the enabled property in GridView's SortingOptions is true and the column Header's sortable property must also be true. Both properties have a default value of true, so if you haven't changed your code, they will be populated by default and then sortable when you click on the header.

Program manipulation

To sort data columns programmatically, use GridView's orderBy() function.

orderBy function

• The first argument is the name of the column for sorting.
• The second argument is the sorting method.
• The third argument is a case-sensitive type.

no see.

The example below is an example of sorting the ‘Gender’ and ‘Age’ columns in ‘ascending’ and ‘descending’ order, respectively.

gridView.orderBy(
   ['Gender', 'Age'],
   ['ascending', 'descending'],
   ['insensitive', 'insensitive']
);

For more samples about sorting, see the Data Sorting guide.

Grouping

Grouping is one of RealGrid2's powerful features and is a visualization function that groups data to suit the user's needs.

User operation

If you want the user to specify the column to group directly, you must modify the option to show Group Panel.

gridView.setGroupPanel({ visible: true });

When you do this, the Group Panel will be displayed as shown in the demo screen below, and you can group by that column by dragging the column header and hovering over it.

In the demo below, drag the header of the ‘Gender’ column and upload it to the Group Panel.

Program manipulation

To group data programmatically, use GridView's groupBy() function.

of groupBy function

• The first argument is an array of column names to group.
• The second argument is whether to sort or not.
• The third argument is the sorting method when sorting.

no see.

gridView.groupBy(['Gender'], true, 'ascending');

For a detailed explanation of grouping, please refer to the guide.

• row group
• Grouping API
• Row merge grouping

Please refer to .

Filtering Filtering

Filtering is a function that displays only data that meets the conditions among the DataProvider data in the grid.

user level

In order for users to filter directly in the grid,

• The FilteringOptions option must be set so that the GridView can be filtered.

The default value of enabled in FilteringOptions is true, and the setting can be changed with the setFilterOptions() function.

gridView.setFilteringOptions({ enabled: true });

setColumnFilters function

• The first argument is the name of the column to be set or the column object
• The second argument is an array of filter objects, an array of ColumnFilter

no see.

const filters = [
   {
     name: 'man',
     criteria: "value = 'Male'",
   },
   {
     name: 'woman',
     criteria: "value = 'female'",
   },
];
gridView.setColumnFilters('GenderColumn', filters);

For information about user-level filtering, see the guide.

• Data Filtering
• Auto Filtering

Please refer to the section.

Data-level filters

To manipulate filters at the data level, you can specify filters before filling data using the DataProvider's setFilters() function.

In other words, the principle behind data-level filters is that conditions are set before filling data in the DataProvider, and only data that matches the filter conditions are filled during the data filling process.

provider.setFilters({ criteria: "value['Gender']='Female'" });
 
// Fill data
provider.setRows([
   {
     KorName: "Park Young-ho",
     Gender: “Male”,
     Age: "71",
   },
   ...
]);

setFilters function

• The first argument is the filter setting value
• The second argument is the filter operation condition and or or

Selecting

The way cells are selected in the grid can be modified by setting the SelectionStyle option. SelectionStyle can be changed with the DisplayOptions.selectionStyle() function.

SelectionStyle is

• BLOCK - Select in block form
• COLUMNS - Select by column
• ROWS - select row by row
• SINGLE - select only one cell
• SINGLE_COLUMN - Select only one column
• SINGLE_ROW - select only one row
• NONE - Not selectable

There are 7 types:

For a demo of each option, see the Selection section of the guide.