Bonus: Advanced UI-Grid Customization with Transclusion

Here’s a list of plunkers that demonstrate some advanced use cases for using transclusion to add features to UI-Grid. If you need help or have any requests for tweaks or additional information, please send me an email. I’d love to hear from you!

Selecting Data with a Map

Click a state on a map to load data from the US Census API and list all the counties for that state with population and housing unit counts.  You could even do this with Google Maps or Leaflet.

Loading Message While Paging

If you’re using external paging you can show a custom message that lets the user know the operation is happening.

Drag-and-Drop JSON Data File on Grid

Want to let your user load arbitrary data? You can use a library like Angular File Upload to create an overlay your user can drag a data file on to and have the grid load.  The importer feature allows CSV and JSON files by default, but you can include the uiGridImporterService to do your own custom file importing.

Check out the code in the plunker to see how I’ve manually written the upload process to handle JSON files.

Stumbled on this page?

If you just happened across this page and liked what you found, sign up for the newsletter and receive more helpful tricks and advanced feature demos.