In a previous post we explored how to use dropdown widgets with UI-Grid. That’s great if your model allows just one value, but what if you want to allow multiple values?
It all started with such promise.
You carefully chose how to structure your application. You picked a build system, or not, based on your experience and the community. You planned, and thought, and planned some more.
But then something happened: you made a choice. It seemed like the right choice at the time. You were sure! Well, pretty sure. I mean, how bad could it be if you were wrong, right? … Right?
Last week UI Grid finally had its first stable release.
This has been a long, long (too long) road. It started about 2 years ago as a rewrite of ng-grid, which was itself an AngularJS port of SlickGrid. And now UI Grid is stable!
Well, almost… The core of UI Grid is all stable, but some of the features are a little behind. More on that later.
If you write Angular apps you spent a lot of your time making decisions for your users.
You decide what they will see, and when.
You decide how the app responds to their interactions.
I often struggle knowing which is the right decision.
- Do I put this widget on the left or the right?
- Do I only show one at a time, or multiple?
- Do I separate things into different sections or have a long page where it’s all available at once?
Like most developers, I spend time seeing what others are doing and try to cherry-pick the good stuff. What follows are some resources that I’ve come across that really help me make better decisions.
I was having a heck of a time understanding how Dgeni‘s processors all work together and what order they run in, so I created a Dgeni package to automatically generate a doc that shows all the processors on a single page, and gives you information on what they do.
If you’re unfamiliar with Dgeni, then you’re in good company. It’s being used by a lot of major Angular projects (Angular itself, the Ionic Framework, Angular Materials, etc) but there’s not a whole lot of information out on it. That’s too bad because it’s a great tool.
Dgeni takes documentation whether formatted comments you put in your code or separate files that you specify, and generates usable organized docs from it. You have to decide exactly what you want but Dgeni makes the process of hooking everything together much easier than doing it all by hand.
What’s below is sort of a “live” infographic: you can filter by package and click around to read the docs (some of which need some more information).
Your desktop spreadsheet tools need to handle all sorts of different proprietary file formats. Why should your web tools be different?
The Angular 1.4 release introduced a lot of breaking changes. You might have had trouble upgrading your 1.3 apps (if you even decided to try).
There’s a good run-down on how to migrate your code in the Angular docs. We’ll cover some of the same ground here but also dive into some extra approaches for adjusting your code, as well as some cases I’ve run into where I’ve had to support both 1.3 and 1.4.
Specifying heights in UI-Grid is a bit weird.
Because a grid’s content is virtualized, you really have to tell the grid how tall you want it to be.
If it has 100,000 rows in its data set, but you only want to see 20, or 400px worth, you have to tell it so. If you don’t give it a height then the grid will assume you want to see 10 rows, minimum.
Note that if you want to specify the height by giving a number of rows to show, you can use the
If you want a deeper discussion, feel free to read A Hidden Grid Manifesto in the UI-Grid docs.
Full Page Grids
How about the situation where we want to make the grid take up the entire web page, height and width?
Luckily this can be done with just a little bit of CSS. We give the grid 100% of the page width, and then for the height we use a viewport percentage length. That’s where we specify the size of an element relative to the size of the viewport, and not relative to the element’s parent.
When you add and delete rows in UI-Grid it can be a bit jumpy.
All of a sudden, rows get shifted around and you’re not sure where you were.
It’s like dropping a book on the ground and losing your place:
Where the hell was I?
In this post we’ll explore how to add animations to grid row operations to visually demonstrate what’s happening. The user should be able to tell what rows have just been added, and what rows are being removed.
Dropdown-type widgets abound in the web development space.
No matter what you call them: combobox, select box, multi-select, they all accomplish basically the same thing: selecting one or more items from many.
Sure, a lot of them have extra bells and whistles like type-ahead, sorting, custom display, etc., but with all the extra comes extra pain.
You’ll find that pretty much none of the commonly-used dropdown tools have compatible APIs. Some have events they fire, some don’t. Some will let you extend them easily, others are very constrained.
When you combine all the different options out there with a need to put a dropdown in UI-Grid, the pain multiplies:
How do I get the dropdown to display right in the grid? How do I hook the dropdown up to my data?
And what if I spend a ton of time on this and it ends up not working?
I want to give you a quick fix that will work for a good number of your use cases.
In this post you’ll find a working example for using one of the popular dropdown widgets: UI-Select.