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.

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.

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.

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.

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.

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