In 6 Ways to Take Control of Displayed Data in UI Grid we looked at some common methods you can use to control how your data looks in UI-Grid. A grid is only as good as the control it gives over the data displayed in it, and the goal of UI-Grid is definitely to give you as much control as possible.
In this post we are going to look at a couple more tricks that will get you closer to the goal of perfect customization
Angular UI Bootstrap‘s $modal service has a
$scope argument that lets you assign it whatever $scope you want, so if you wanted your
modal’s controller to use the same $scope as your parent controller you could do that.
But what if you don’t want to use $scope? What if you’re using controllerAs
and you want to keep your code all scope-less, neat, and tidy?
Luckily there’s an alternative. You can send your data to the modal as resolves. Resolves first appeared with ngRoute, as a way to make sure information was available to a route’s controller before the view was initiated. It prevents elements shifting around in your view as data would otherwise be loaded after the view shows up. It also keeps common data-loading tasks out of your controller.
There are a lot of third-party modules out there for Angular, and even more plugins and extensions for those modules.
But even with such a great ecosystem, you won’t always find the functionality that you need.
If you’ve done web development for any length of time I’m sure you’ve had to write your own extensions, or modify someone’s module to fit your needs. Writing those things from scratch can be a real bear, much less adding things like tests or a reliable build system.
And what if you want to share your finished product with others? It’s probably twice as much work if you want nice, clean documentation and usable demos.
I wanted to lower the barrier of entry for you and get you on your way to writing any UI-Grid plugin you want with a minimum of fuss. I would bet that you (yes you) have some great ideas. Why should you have to spend a ton of time building all the little non-plugin parts around your plugin before you actually build and share your plugin?
Answer: you don’t have to.
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.
UI-Grid has editing features built in.
But sometimes you want to edit data all at once.
And add some custom validation, third-party controls, and so on.
Normally if you wanted to create your own row modal editor it would mean wiring up a modal service like the one from UI Bootstrap, writing your own form out by hand, including the validation and controls.
It can take a lot of time to write up a form for all your little data points, and let’s be
honest, it’s pretty boring. There’s only so many times I can type in
<input type="text" /> (even with an HTML generator) before I’m sighing
resignedly and shifting in my seat.
In this post I’m going to show you how to short-circuit this routine and create a row editor for UI-Grid in just minutes with a great module called Angular Schema Form. You won’t have to write up any form controls, validation, or save/cancel behavior. The only thing you have to supply is the configuration, and Angular Schema Form will take care of the rest.
I came across this rather inscrutable Atlassian Stash error after I had made
changes to my submodules in git. If you run across this error it may be because you’ve manually
edited your .gitmodules file:
An error occurred while executing an external process: Missing configuration path for module section: <module name>
Getting your data displayed just right in UI Grid can be a huge pain.
You might just want to format some numbers, or you might want to embed something complex like a chart or custom directive.
In this post outline six (plus one) different methods you can use to get your data just the way you want it:
