OpenJS Grid v2 - Awesome jQuery Data Table

Finally. It's been 8 months, but I finally did it. Complete re write of OpenJS Grid.

[optikalefx]

Well when you type in a search, it searches all the columns. That's both for filter and when you hit enter to search the database. You can add more columns to search on by adding them to the fields array in PHP. What you can't do, is specify it yourself, every search is done on every used column.

[kaushalsubba]

Always been a fan of your code and Grid Especially, I use it on almost all of my projects. The new version is without a doubt a fantastic improvement over the last version making it the best and most efficient grid (even better than some of the paid ones).

Thanks Again !

[optikalefx]

in grid.css if you find div.gridWrapper .columns .cell you will see the height set to 24. You can just adjust that there.

OR you can just set rowHeight in the javascript call. That would work too.

[optikalefx]

the 'width' property when you make the jquery call, or in CSS you can style grid-container

[optikalefx]

So there are 2 ways. 1) if you have the data when you load the page, you can just append it to the action attribute of the table, and then read the $_GET in php. 2) when calling $grid.load() in jQuery you can pass anything you want. And it will be in $_POST in PHP to use at your whim

[optikalefx]

Everyone did add their own way before, so I took that out. So just create an add button and do your own sql insert. mysql_query("INSERT INTO `blah_table` SET foo='bar'"); then in javascript called $(".grid").load(); to reload the data.

[optikalefx]

Ill answer this publicly as well. I don't have a "multiple delete" built in, but to add it, you would just make a button outside of the grid, that button would use jQuery to get all checked rows, and then call some delete. I can see adding a getChecked method to help, as well as a deleteMany to the PHP class. But currently you'd have to do a multiple delete on your own. Thanks!

[optikalefx]

You know I didn't add that into this version. But, I did make all the jquery delegated to their classes. SO, if you used jQuery to add a button classed with gridSave inside gridContainer, it would work. Sorry I don't have a better answer right now :(

[optikalefx]

I've talked to them at the jQuery Conf last year, they are working on one, and have been for 3 years now. I don't think they will ever finish it.

[optikalefx]

Yep that just a css change on the .resizer class.
That is possible since the columns are just divs unlike other grids where there are no columns only rows. But you'd have to do that since I have not. But Maybe I'll play around with that idea soon.

[limited]

Real nice, very slick integration. I probably won't use it myself but I will look into the techniques you use so I can learnt things myself :)

[optikalefx]

This grid doesn't have set themes. If you apply any bootstrap theme it will update the theme. You can also update the CSS on your own.

[optikalefx]

1) It's not actually opposite, it's just that - because delete is the last column, all it can do is increase the size of active, it can't do anything with delete.
2) Whoops, i'll fix that on the next push - it is ok, but shouldn't be there.

[seanmcne]

This looks great Sean, are you working on anything to allow "binding" or sourcing the grid from a json object, xml, or custom javascript object for client-side only scenarios? Great work!

[optikalefx]

Everyone seems to want that. I guess I could do that, maybe that's what most people want anyway. It's not too hard to build all that in, I guess the goal behind this grid was that you normally use it with a database.

I'd have to build the sorting methods and paging methods into JS since they call ajax right now, otherwise if you just looked at the JSON packet in the Network Tab of Console, you can essentially feed the grid that.

[gsthilak]

Knowing how to create column alias was really helpful. Can you tell me how to move the toolbar with pagination, search and save button to the top of the grid?
Thanks..

[optikalefx]

1) I didn't give full themes, but it's using bootstrap now. So any bootstrap theme should work fine
2) change the font-size on .gridWrapper class to change all sizes
3) Hmm, can you inspect the element where it should be and see if the image is gone or if its just not showing up?

[optikalefx]

Hi, Yea this new version got rid of some features in lou of some speed improvements for now. The 3 you mentioned are gone, but aren't hard to put back at a later date or by yourself. I can show you how if you want to email me.

The color changing is done via CSS, and the tutorial I made before on color changing was just showing you what styles to change when you click a button. They are different now but the same concept still applies. Only a few CSS things need to be changed to theme it.

[optikalefx]

Ugh, thanks Rick. All fixed. That's a decent idea. Could easily make a field type for that.

[funkytaco]

I see. I was able to get it working by scrubbing JSON into the expected format. This required hardcoding table rows, but I can accept that for now.

Also, I think you should make a vanilla version with only the grid.js and necessary files, but that's just my opinion.