Grid Columns with DropDown Menu in AngularJS

Created: 09 October 2015

Column header in AngularJS Grid directive by default only shows a text in one line. In order to add custom content in column header we can use a template. In case of a dropdown menu for grid columns, we can add a button to column header which when clicked will display a predefined menu.

As above demonstration shows, each column has a menu button. When this button is clicked, it will display a dropdown menu with specific options. The following sections below, shows how to create this in AngularJS.

Create Custom Template for Column Header

Because the grid column by default only displays a text, in order to add a menu button, we need to create a template. This template is simple, only contains an element for column title and an element for menu button.

As a menu we will use the IntegralUI ContextMenu directive which is part of IntegralUI Studio for Web, that allow us to create a multi-level menu and apply it to any other directive or HTML element. In our case, it is applied to the menu button.

We are creating this template in our page so that it is added to the template cache, so that AngularJS quickly retrieve it. Because we want to use this template for all grid columns, while still setting a different referencing object for each column, the best way is to create a custom directive.

The structure of this directive is simple, only shows that is uses our template and contains only public property which will hold the referencing object.

Now we can create our columns. We will use the headerContent field of column object to link the column with the template. Therefore, column header will now display a HTML content generated using the template as a replacement default column header text.

As it can be seen from code above, we are using the custom directive (called customHeader), with different referencing object for each grid column.

Add DropDown Menu to Grid Column

Our next step is to create the menu structure and apply it to the column using the referencing object. As our menu items we will set several items which when clicked will reorder grid columns, and one submenu item which holds the visibility status of all columns.

The menu item that holds the submenu showing column visibility status is created and updated whenever column visibility changes. For this purpose, we are handling the updateComplete event, so that menu is updated.

Each menu item has a different key, as unique identifier. We will use this key value to determine which item is clicked and then proceed with a different operation.

Also, because all columns are using the same template, we need to know from which grid column the dropdown menu is shown. For this purpose, we are handling the open event. Whenever the dropdown menu is displayed, we are setting a local object that holds the referencing column. The column is retrieved using the getHoverColumn method.

Now we have a functional menu with several different menu options that will perform a different action. We have two groups of operations: moving of columns and changing their visibility.

Reorder Columns using the DropDown Menu

We can move a column in the grid to appear as first or last column, or we can move it by one-step to the left or right. This is done by using the move method, which accepts as parameters the reordering column and the direction in which we want to move it.

Show/Hide Column from Menu

As for changing column visibility, we simple change the value of visible field of column object. Whenever this value is changed, the column becomes hidden or visible, and the menu is updated to reflect that change.

Show/Hide Column from Menu

We have created a Grid where each column header is created using a custom template consisting of a title and a button. Whenever a button is clicked, a dropdown menu is displayed with several options with different operations that will either move the specified column or change its visibility status.

The dropdown menu can contain any number of different options set in multiple levels. Depending on your application requirements, you can create a different data structure for the menu. It is fully customizable, in both appearance and functionality.

Tab content switching

Newsletter

Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.

Name:

Email: *

*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.