Creating “Empty” Rows in ui-grid / ng-grid

Question

Is there a way to conditionally add "empty" rows to a ui-grid model? The requirements for my project stipulate that we display items by date (very easy), but also display empty rows for days that don't have items on them so that users can see those gaps at a glance (much more difficult).

Somewhat in line with what was being asked in this question, perhaps some sort of grouping by date and inserting an empty group for dates that don't have associated items could work...?

I could create a whole new collection model that combines dates and my actual data and have the ui-grid use that, but that seems extremely inelegant, as it would likely entail a lot of manual reloading of everything when changes are made to the data. Ideally I'd like to just feed my collection of data rows to the grid, but still have it show an extra row with just the date field for dates that don't currently have items.

I actually have this working in a setup using tables and ng-repeat now, but I'm looking to switch to ui-grid or similar to gain benefits of virtual scrolling, etc since I have a lot of editable (and hence, fully-bound) data.

Thanks in advance...

Do you mean you would be happy with a group of rows at the bottom of the grid, which contains all of the dates that do not have data? If so, you could look at making an expandable grid - ui-grid.info/docs/#/tutorial/306_expandable_grid - and using the .subGridOptions property just for this single row? That said, I have not personally tested having just a single row in a grid being expandable and the others not - it may be that they all appear expandable, which might not be what you want. — S. Baggy
Unfortunately, the requirement is to have the empty rows throughout. The records need to be ordered by date, and if there's a particular day that doesn't have any records, I need to display an "empty" row (basically a row with the date and a way — button or otherwise — to create new records). — jcq

S. Baggy S. Baggy · Accepted Answer · 2014-11-04T23:00:12

Would something like this meet your needs?

function fillInEmptyDates(startDate, endDate, data) {
    var dateToCheck = moment(startDate);
    var end = moment(endDate);
    var finished = false;

    while (!finished) {
        if (!Enumerable.from(data).any(function (x) { return dateToCheck.diff(x.YourEntityDateField, 'days') === 0; }))     {
            var newEntity = { "YourEntityDateField": dateToCheck.clone().toDate() };
            data.unshift(newEntity);
        };

        dateToCheck.add(1, 'days');
        if (dateToCheck.diff(end, 'days') === 0) {
            finished = true;
        }
    }
}

To be called like...

fillInEmptyDates(new Date(2014, 6, 30), new Date(2014, 10, 25), $scope.gridOptions.data);

You could perhaps have the first date as the minimum of your current data, and the end date as the max, or adjust according to your needs.

Note that I have used MomentJS for date manipulation and LinqJS for looking through the dates for the data. I'm sure there would be an easy way to loop through the data without using LinqJS if you preferred. (I'm new to JavaScript and find myself hooked on the LINQ stuff I was previously doing in C#.)

The sorting that you specify in the grid options should apply to the newly created rows.

(Sidenote: you might have to play with timezones to get exactly the values you want. If you're seeing duplicates of the dates that do have data, then it may be due to this.)

Creating “Empty” Rows in ui-grid / ng-grid

1 Answers