Column groups heading and styling (Interactive Grid #6)

 

It´s time to continue our tips and tricks series about the Interactive Grid, that have often helped us in the development process.

Let's start with tip six :-) 

#6 Column groups heading and styling

This tip is actually very simple and comes mostly out of the box. In the past we added column groups by using CSS and JavaScript. But APEX also offers a direct low code solution that we would like to share with you. With a little bit of CSS styling on top we can design the column headers and groups as we would like. Let's start with a small demo app.

For this example we use the sample dataset "EMP / DEPT", in which we have the tables "EMP" and "DEPT" and also a view "EMP_DEPT_V" which combines both tables. Then we create an application with an interactive grid or create a new page in an existing application. As source we use the view "EMP_DEPT_V".

Now we have an interactive grid where we can add column groups. To do this, we go to the page designer, right-click under the column group regions (rendering tree) and select "Create Column Group" from the context menu. Set the Heading attribute for this new group to „Employee“. Then create another column group and set the heading attribute to „Department“.

Next, each column must be linked to a group. To establish this assignment, click on any column and in the Layout section set the "Group" property.

Done. Now we've added column groups to the interactive grid without writing any code.

But next we want to style the column groups and column headings and for that we need a little bit CSS and JavaScript code.

First we give the interactive grid a static id, for example "my_ig". Then we add some CSS code in the CSS Inline Code-Editor to style the column groups. In our example we are changing the background color of the column groups, but feel free to style anything you need.

#my_ig  .a-GV-headerGroup[data-idx="0"] { 

  background-color: #cdcdcd;

}

#my_ig  .a-GV-headerGroup[data-idx="1"] { 

  background-color: #31869b;

}

To find the right CSS object, right- click on the column group you want to style and click on inspect in the context menu to open the browser development tool.

Indeed, we want to give the column headings a background color too. But there is no declarative CSS attribute for the column header cell! So we need advanced column JavaScript Initialization Code like this.

function(config) {

    config.defaultGridColumnOptions = {

        headingCssClasses: "EmployeeHeader"

    }

    return config;

}

Enter this code to all columns assigned to the "Employees" group. Then repeat this step for all columns assigned to "Department" and enter the following in the JavaScript Code Editor.

function(config) {

    config.defaultGridColumnOptions = {

        headingCssClasses: "DepartmentHeader"

    }

    return config;

}

After that we can add a CSS rule for the column headings in the inline editor on the page. For example, enter the following to apply the colors of the column groups to the headers as well.

#my_ig .EmployeeHeader { 

  background-color: #cdcdcd;

}

  

#my_ig .DepartmentHeader { 

  background-color: #31869b;

}

That´s it. With a little bit extra Code of CSS and JavaScript, we could easily add colomn groups to an interactive grid and format them as we like.

Optional hint:

The better solution would be to condense the column javascript code into a single function so that you can link these functions to the columns you need. But in our tiny example, this quick and easy method is enough to show you the way you can hande it.

And here is the demo app.

We hope the tips and tricks will help you. 

If you have questions or suggestions, please leave us a comment