Backgrid: A featureful grid UI for Backbone.js(wyuenho.github.com)

129 pointsby jashkenasvor 14 Jahren28 comments

wyuenho.github.com

Backgrid: A featureful grid UI for Backbone.js

http://wyuenho.github.com/backgrid/#examples

30 comments

wyuenhovor 14 Jahren

Project author here. Ask me anything, constructive criticism much appreciated!

And much thanks goes Jeremy for writing Backbone.js and posting this!

(BTW, I'm looking for a job, so if anyone is interested, please email me myhnhandle [at] googlesmailservice dot com)

kakurivor 14 Jahren

Chrome 24 / Win 7 - clicking in cells in the Date or Population columns changes the column width.

wyuenhovor 14 Jahren

That's something I have to work on:

https://github.com/wyuenho/backgrid/issues/5

https://github.com/wyuenho/backgrid/issues/6

wheatiesvor 14 Jahren

Love it. Really! How difficult would it be to embed a D3 chart in one of the columns? Would that be something tricky to add or could it be made into a column type easily?

wyuenhovor 14 Jahren

Probably would be best implemented as an extension that can display a chart in a lightbox or something. Probably something akin to this:

http://wyuenho.github.com/backgrid/#api-text-cell

kzahelvor 14 Jahren

Can it handle say 1 million rows, by lazily creating the DOM elements when the scroll into view (like, say, SlickGrid)

wyuenhovor 14 Jahren

Can you read 1 million rows at a time like Neo :P

Jokes aside, no it cannot, not yet anyway. This is version 0.1 and I really have no intension of cloning SlickGrid. That said, the infrastructure is here

http://www.reddit.com/r/javascript/comments/176tvf/backgridj...

and avoiding DOM repainting is on the top of my list for version 0.2.

https://github.com/wyuenho/backgrid/issues/26

This should take only 3 lines of code.

PR welcome!

zaidervor 14 Jahren

This is really useful. Thank you. With the scrolling list would it be possible to make the header row stay in place? Some people prefer to scroll with large amounts of data so that they can just use ctr+f to quickly find the links to what they want.

wyuenhovor 14 Jahren

It's in the works

https://github.com/wyuenho/backgrid/issues/4

PR welcome!

elliottkembervor 14 Jahren

Hey, great work! One thing I found - your MomentCell example seems to steal focus from the document. You can't blur it by clicking elsewhere, which means any other keystrokes (except escape or enter) on the page go directly to it.

wyuenhovor 14 Jahren

Stealing focus is intentional because I want you to correct your mistakes, this is the same for all other cell types that do validation.

But not giving up focus by clicking elsewhere is not. File me a bug and thanks!

Jarevor 14 Jahren

Looks excellent! I don't have an excuse to play with this right now, but I'm forwarding to a colleague that is going to love it. Can't say much more than big thanks for sharing your work.

h2svor 14 Jahren

This is great, I think this is going to come in pretty handy for an upcoming project at work. What a great method of job hunting, I hope it works out!

phineasvor 14 Jahren

I am interested in the way you used your project to get possible job offers. Did it work? Please let me know, that way I can follow suit.

wyuenhovor 14 Jahren

1000s of people have done before. Why don't u do it anyway and find out?

paultvor 14 Jahren

Crashes safari on my iPhone 4s, iOS 5.1.1.

wyuenhovor 14 Jahren

Yeah the gh-pages website has too many grids and codemirror instances opened up at once. The examples really need to load lazily on mobile. Any help would be greatly appreciated.

gourneauvor 14 Jahren

Are you looking for a job in SF?

wyuenhovor 14 Jahren

Yes

Swizecvor 14 Jahren

Hey this looks really cool! The last time I rendered some data in a table I used d3.js, but this looks much simpler for the more advanced stuff.

Do you have cvs support? That would be nifty because large table datasets are usually in csv not in json, so it would be nice to skip this intermediate step.

By the way, how did you make the documentation? It looks really nice.

wyuenhovor 14 Jahren

No csv support. I didn't intent to make a full-blown web-based spreadsheet (but you never know :) ). The documentation is just plain old hand-coded HTML styled with Bootstrap + some well chosen header fonts. The code editor (not much of an editor now that I've put it in read only mode) is codemirror.

charlysistovor 14 Jahren

Looks awesome. I wrote Backbone.grid last year, basically some view extensions with a much lower level approach and many unresolved issues. This is were backbone (and other MVC) shines I think. Hope to see similar stuff in ember.js angular.js and so on with nifty gems for easy generation of admin section. kudos

tbranyenvor 14 Jahren

Awesome work man, saw this last night and definitely want to get it hooked up with LayoutManager https://github.com/tbranyen/backbone.layoutmanager

wyuenhovor 14 Jahren

Thanks! I saw you saw it last night :D backbone.layoutmanager looks great too. Can't wait to see what awesome sauce the 2 projects can come up with!

uruviel2001vor 14 Jahren

Hmm if I knew this existed literally a week ago I might have gone with backbone instead of Angular. Do you by accident know of an ediable-grid with angular directives and proper bindings?

zenoconvor 14 Jahren

Try ng-grid http://angular-ui.github.com/ng-grid/ -- to get editable cells, you just make your own cell template. Fairly straightforward. I just built something with this, and it worked out nicely.

47vor 14 Jahren

Examples does not show up on Chrome on Android 4.2.1. It shows a blank area instead of the grid.

wyuenhovor 14 Jahren

I don't have an Android on hand to play with, is there an error log u can send me?

[deleted]vor 14 Jahren

mail2accountvor 14 Jahren