in Development

UI-Grid: The Easiest Customization You’ll Ever Write

UI-Grid easy customization image 1

Currently UI-Grid doesn’t automatically show any messages when data is loading.

Nor does it show anything when there’s no data to show.

This can be a bit confusing for your end users as all they’ll see is an empty white space in the grid.

Luckily this is easy to fix with the most misunderstood feature of Angular 1.2: transclusion.

Bonus: Want to see the advanced use cases in the image, like selecting data by clicking on a map and loading data from a file the user drags and drops on to the grid? Enter your email and receive a link to a special resource

Angular is a Donut

Angular transclusion is a jelly donut

Transclusion is delicious.

Think of transclusion as a delicious jelly donut. UI-Grid is the donut and the functionality you want to add is the jelly. Is your functionality raspberry flavored? Never mind; don’t answer that.

In addition to simply being inside the donut and available for consumption, your jelly filling has access to all the features and properties of the donut. Like the frosting or sprinkles, if there are any. Alright so maybe the metaphor breaks down there. The point is that your transcluded will have a scope that is a descended of your grid’s scope, so you can access the grid property and all of its settings and data in your expressions.

What does transclusion look like? Not all that much:

The div inside your ui-grid element is what’s being transcluded. Pretty simple, right?

Alright enough theory, let’s get started. You and I are going to look at two use cases:

  1. A “Loading…” message with a spinner indicator
  2. A “No Data” message

Loading Message

This message will be an overlay that will sit on top of the grid while your data is loading. The markup is short and sweet, just a couple divs and your message. We will use an ng-hide on the overlay that will only let it show if we are loading and have no data.

Our controller code is pretty short as well. We’ll make an init function that is called when the controller starts up. That will set a loading flag on the scope, and then unset it in our data fetch’s finally handler.

Alright, if we fire this up what are we going to see?

ui-grid loading message image 1

This is a non-interactive image of what the user would see.

Hmm, that’s not quite right. It looks like any content we transclude will just be appended to the grid element’s contents. I guess we’ll need some custom CSS to position it correctly and make it look nice. We want the overlay to:

  1. Overlay the entire grid
  2. Darken the grid a bit with some opacity
  3. Generally look nice
  4. Have an animated progress widget

Here’s the CSS for all that. Read the comments for what it all does.

Note on Vertical Centering: This is beyond the scope of this post, but there’s a bunch of different ways to vertically center elements. I’m using table CSS here, which might not be the best for you. Check out this Chris Coyier post for more.

Our result is much better! Let’s take a look at a demo of what we’ve just done:

OK, looking good. But what if nothing loads and our users are still staring at an empty grid? Since we’ve got Let’s add a “No Data” message.

No Data, No Problem

We already have the CSS set up so all we need is some markup:

Then we can add the loadAttempted flag to the finally handler:

Here’s our resulting plunker:

Et voila! We are done.  Transclusion is great for when you just want some simple extensions. Would you like more examples, such as:

  • Selecting data for UI-Grid by selecting from a map of the US
  • Loading message while using external paging
  • Drag-and-drop file input for loading custom JSON data into grid

Enter your email below and I’ll send you a link to our bonus area where you can these uses cases for transclusion in UI-Grid, with example demos+code and explanatory documentation. Enjoy!

Sign up

Subscribe to receive access to the bonus resource: Advanced UI-Grid Customization with Transclusion