Merge cells

You can group cells belonging to a column and display them.

Cell Merging

Set the formula to merge cells with the previous row in the mergeRule.criteria property. Check the column setting information.

Loading RealGrid...

var columns = [{
      ...
      name: "Gender",
      fieldName: "Gender",
      width: "40",
      header: {
        text: "Gender",
        styleName: "orange-column"
      },
      mergeRule:{
        criteria: "value"
      }
      ...
}]

Displaying rows grouped together

Check whether the merge is performed according to the conditions set in the mergeRule.criteria property.

Loading RealGrid...

gridView.setColumnProperty("Gender", "mergeRule", { criteria: "row div 3" });

gridView.setColumnProperty("Gender", "mergeRule", { criteria: "row div 5" });

gridView.setColumnProperty("Gender", "mergeRule", { criteria: "value" });

Merge references to preceding columns

When merging cells, you can merge them by referring to specific column values. Click each button in the demo below to see the differences.

Loading RealGrid...

function btnMergeRule() {
    gridView.columnByName("OrderID").mergeRule = {criteria: "value"};
    gridView.columnByName("Country").mergeRule = {criteria: "value"};
    gridView.columnByName("CustomerID").mergeRule = {criteria: "value"};
}
 
function btnPrevMergeRule() {
    gridView.columnByName("OrderID").mergeRule = {criteria: "value"};
    gridView.columnByName("Country").mergeRule = {criteria: "values['OrderID'] + value"};
    gridView.columnByName("CustomerID").mergeRule = {criteria: "values['OrderID'] + values['Country'] + value"};
}

When merging cells, you can also briefly specify references to all preceding columns using prevvalues.

Loading RealGrid...

function btnPrevMergeRule() {
    gridView.columnByName("OrderID").mergeRule = {criteria: "value"};
    gridView.columnByName("Country").mergeRule = {criteria: "prevvalues + value"};
    gridView.columnByName("CustomerID").mergeRule = {criteria: "prevvalues + value"};
}

Merge Object Type Field

When merging Object Type Fields, they are merged based on the values shown in the grid. Even when referring to a previous one, merging is applied based on the visible value rather than the object value.

Loading RealGrid...

var columns = [
    {
      name: "Person",
      fieldName: "Person",
      objectKey: "Name",
      width: "100",
      header: {
        text: "name"
      },
      mergeRule: "value"
    },
    {
      name: "Gender",
      fieldName: "Gender",
      width: "40",
      header: {
        text: "Gender"
      },
      mergeRule: "values['Person'] + value"
    },
    ...

popup menu lookup column