Column Templates in AngularJS Grid

Created: 15 October 2015

Column header and footer in AngularJS Grid directive by default show only one-lined text. If we want to add custom content in grid columns, we need to use templates. Each column header and footer can use the same or different template.

Note By creating this template as part of the page, it will be available in template cache, so that AngularJS can quickly retrieve it.

Each template will have a unique identifier, and we will use it to link the column with the template. In case of grid column with multi-lined text, as identifier we will use the 'column-two-lines.html' string.

Column Header with Text and Icon

Similar to above example, we will create a template consisting of single paragraph with text and icon inside it. As icon, we can use an image or in this case a span element, where an icon is used as a background.

The referencing object for the footer template is also created here, along with the function called whenever the footer button is clicked.

Note This must be set inside the columns structure, because when grid is updated and its layout is created, during compilation of the template the internal scope for columns is used, not the parent scope. If referencing object is placed outside the columns structure, it will not be recognized.

When footer button is clicked, it wil calculate the total and current number of visible rows. For this purpose, we are using the getFlatList method, which returns a linear list of all rows present in tree structure, and also a linear list of all currently visible rows. This allows us to navigate through the whole tree structure, as quickly as possible.

Conclusion

By using templates, we can add custom content in column header and footer of the Grid directive, resulting in further extending and customizing the appearance and functionality of the Grid in whole.

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.