New grid view based on SlickGrid

[amercader]

We want to explore using an established grid library for the Grid View. We decided to go along with SlickGrid and also focus on simplifying the design and the number of features.

The must-have features we need are:

• Nicely rendered header and cells
• Horizontal and vertical overflow
• Fixed headers
• Sorting
• Column reordering
• Hide columns
• React to changes in the model (of course)

I've put together a prototype that covers most of this points:

http://amercader.github.com/recline/app/?url=demo#explorer

Hide columns is not yet implemented, my idea was to use context menus (they could also provide the "Delete row" link if necessary).

There are still some issues with the border on the left, which I haven't managed to restrict to the cells.

All in all, it looks very promising.

The code is in a branch of my fork:

https://github.com/amercader/recline/tree/feature-slickgrid-view

[rufuspollock]

Really excited to see this. And think it will be good to see this in as an option. I note that default grid view now has horizontal and vertical scrolling with fixed headers and that it already covers all the bullet points.

BTW slickgrid supports hiding columns you just need to turn it on (though how we integrate SG menus with our backbone style ones is an open question).

Also, while I am interested in this is it top priority when existing grid already ticks all the key boxes (compared to the many other improvements we'd like to see :-) )

[kindly]

rgrp, could we have a demo of the default grid view that covers all the bullet points. It is difficult to asses what is the best option without it.

[amercader]

I've pushed some more changes to add a nice context menu on the headers with a column picker. This covers all points, so I won't do any more work until we decide which way to go.

[rufuspollock]

@kindly the existing implementation already had everything except (live) column reordering and fixed headers (this would be easy to implement by allowing people to edit field list order and calling re-render).

Example with fixed headers was up on reclinejs.com as of last night but demo data is not large enough to really show it.

Here's an example where you can see it in action: http://reclinejs.com/app/?url=http://datahub.io/api/data/b9aae52b-b082-4159-b46f-7bb9c158d013&backend=elasticsearch#explorer

One thing missing from the list (that SlickGrid does do well) and would be non-trivial is draggable column width (though it does add a dependency on jquery-ui which is fairly significant)

[kindly]

It appears to be pretty broken in my awkward test case.

http://reclinejs.com/app/?url=http://datahub.io/api/data/41a2f168-450a-4cf8-9856-f180810a7fb6&backend=elasticsearch#explorer

With the new way we are doing out js loading the js should only be loaded on the page where it is needed. So heavier dependencies are no longer as bad.

[rufuspollock]

Indeed. I in fact pushed the fix for this yesterday but forgot to merge to gh-pages it seems (issue was not setting max-width on headers as well as cells!). I've pushed now.

However, there still seems to be a problem (first column has got width of -160px so I'll look into this now -- BTW it would be better to report this issue on #116 rather than here :-) )

[rufuspollock]

@kindly so fixed width and horizontal scrolling - see #116. However, think worth examining this option very seriously (albeit fact we get a lot of additional dependencies).

Can we get a mockup up somewhere of SlickGrid versoin?

Perhaps we merge to master but in that case we need to be a bit more parsimonious about what we merge - cf https://github.com/amercader/recline/compare/master...feature-slickgrid-view (which includes all the examples etc :-) )

[amercader]

@rgrp What do you mean with a mockup? There is a working prototype on [1]

Of course, my branch needs a lot of cleaning up (and docs). I didn't use a built version of SlickGrid because it seems to require the Clojure compiler and its not immediately evident how to compile.

[1] http://amercader.github.com/recline/app/?url=demo#explorer

[kindly]

The example was made here by Adria as mentioned in the first comment

http://amercader.github.com/recline/app/?url=demo#explorer

It is the second view along the top.

We can discuss the merge on monday. It may be that we need view extensions to keep the dependencies contained.

[kindly]

sorry did my comment at the same time as amercader .

[rufuspollock]

Apologies -- I have actually visited that before (slowness on a Saturday!). Looks good. We can discuss more Monday.

[rufuspollock]

Having looked at this some more I'm a strong +1 on getting this into core asap.

[rufuspollock]

@amercader @kindly is this likely in the next few days? I'm planning the major launch of Recline for next Tuesday ...

[amercader]

The major work with the SlickGrid view is mostly done. It needs some polishing, docs and I haven't implemented the state stuff (saving hidden columns, order, etc), but this should be the last big bit of work. I'll work on this today.

@rgrp Do you want to load a SlickGrid View in the demo application alongside the normal grid or replace the existing grid with the new one?

[rufuspollock]

@amercader I'd suggest we replace the default grid with this right now if we think it is functional (so in DataExplorer view and therefore automatically in the full App) -- my one concern would be size (how much is the vendor library adding ...).

BTW: the demo application isn't a "demo" :-) -- it's the application to most people (though also a demo of the library).

[amercader]

Please see pull request #127

[rufuspollock]

New setup supports:

• Column hiding
• Column reordering
• Column sorting
• Column resizing
• Fit columns to the div width

All these options are stored on the view state and applied when initializing the view if necessary.

[rufuspollock]

@amercader question as to how to do sorting properly going forward since the current sort is only the sort of the currentDocuments ...

[rufuspollock]

@amercader Noting some things to look at:

• Sorting has no effect on other views - sorting does not seem to do genuine sorting of currentDocuments (perhaps it should not ...?)
• We have lost or use of custom field renderers and derivers (does slickgrid run off document objects? If not this is something pretty major to think about as much other functionality depends on this ...)

[amercader]

I've created two new issues to discuss these points:

Sorting has no effect on other views - sorting does not seem to do genuine sorting of currentDocuments (perhaps it should not ...?) See #130

We have lost or use of custom field renderers and derivers (does slickgrid run off document objects? If not this is something pretty major to think about as much other functionality depends on this See #131

[rufuspollock]

FIXED. Both #130 and #131 are done now and SlickGrid is fully functional.