OpenJS Grid - an Open Source JQuery Grid

[optikalefxx]

@McL0c0MX well the click is an event ON the tr. So, $(this) refers to the tr, where $(this).attr("primary_key") is the row id

[MakkeSk8]

u talk very fast man.. calm down

[MylesLeeCrampton]

Spectacular! Can't wait to make use of it. Many thanks for sharing it :)

[LearnThruSong]

ABSOLUTELY AWESOME!

This provides a lot of the framework I need to make modifying some database tables cleanly and securely behind a custom ACL in PHP. I just need to work out a few details and I'll be jumping in there adding this to my site!

Thanks so much for your time developing this!

[optikalefxx]

@LearnThruSong thanks man! Let me know when you work with it, I'd like to see what you come up with

[mjcarraco]

It gives me this error:

string(94) " SELECT `orders`.``,orders.id FROM `orders` ORDER BY LIMIT 0, " You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'LIMIT 0,' at line 8

What that means?

Thank you

[LearnThruSong]

@mjcarraco Hi there, you appear to have a couple of errors in the SQL:

1st - You have the ORDER BY declaration but no argument... you need to tell SQL what to order (the name of the field) by or delete ORDER BY.

2nd - If you put a LIMIT declaration in, it restricts the number of rows - or in your case, orders - that the query will return. By adding a LIMIT 0, no matter what you're selecting, the query will limit SQL to returning zero results.

Hope this helps!!!

[LearnThruSong]

@mjcarraco Also, do you really have a field in your 'orders' table called 'orders'? Also are you trying to concatenate the two fields where after SELECT you have "...`orders`.``,orders.id..."?

[nathangsmith18]

@LearnThruSong I'm having the exact same error as mjcarraco. I've tried just about everything [my very limited programming mind] could think of and I can't get to the bottom of this. I understand the obvious sql syntax errors in the but I haven't changed the class files and have set up the index/ajax files as instructed. For some reason grid.php (or maybe grid.js) is creating some weird sql. Any advice for how I can begin to figure this thang out?

[joanatyu]

i have a question.. can the grid handle thousands of data?

Thank you! =D

[optikalefxx]

@joanatyu The most I've used it with is 26 thousand rows. So yes, it can probably handle millions of rows.

[joanatyu]

can you tell me how?

will that automatically compute the average when i enter the values in those 7 fields in the grid

Thanks for the reply

[optikalefxx]

@joanatyu I need to know your database first, then i can tell you. Email me a SQL dump of your database PM me for my email address

[joanatyu]

I want to create a field that will auto compute the average of 7 fields.. Is that possible? Help pls.. Thanks..

[optikalefxx]

@joanatyu you would do it in the database query using AVG

[rjlovealice]

Help.. I'm having a problem showing the thumbnail....

The thumbnail doesn't appear..

Thanks

[optikalefxx]

@rjlovealice inspect the thumbnail in firebug, check the image location, that shoudl give you some good answers.

[rjlovealice]

@optikalefxx thank you so much for the reply =).. I'll try it

[rjlovealice]

sorry hm.. i still don't understand... i want to get an image(thumbnail) from flickr... like what you did in your tutorial... where is that fire bug?

[optikalefxx]

@rjlovealice i didn't use flickr for this tutorial. Are you sure your commenting on the correct video?

[rjlovealice]

@optikalefxx

oops .. sorry I mean in your website

squeare bracket.com

you used cmivfx.com instead of flickr

[optikalefxx]

@rjlovealice so check the code there, the images come from the database. The FULL url has to be in the database call. Watch the video on thumbnails for more info on it

[optikalefxx]

@rjlovealice those are fields in my table in my database. You would use whatever field is in your database. I'm concatting there because i dont store the FULL url in the database, only the image name. Like apple.jpg. So I concat the FULL url so OpenJS Grid can read it

[rjlovealice]

@optikalefxx still doesn't work for me.. =( i have a field (img) in my table data type(blob) are your thumbnails from cmivfx ?

[optikalefxx]

@rjlovealice blobs are not supported right now. The field needs to be like 'blah.jpg' and then you concat with the FULL url to that image.

[rjlovealice]

@optikalefxx

Thank you so much for taking time to answer my questions... I am truly grateful! =)

i will not give up... may be i'll rewatch the video and analyze it further. Thanks!!!

[rohansingla8]

Thanks for the videos, they are awesome. I was wondering if we have examples with ruby files?

[optikalefxx]

@rohansingla8 I don't know Ruby, but i would love to work with someone who does so i can adapt it.

[rohansingla8]

@optikalefxx okay.. I am not that good in ruby yet.. you might want to have a look in flexigrid if you haven't yet. Also I was wondering is there any example for making tree structures in this. I mean storing the parent child relationships in Json/XML and whenever rows are changed the relationship is changed as well.

[optikalefxx]

@rohansingla8 well right now it doesn't dynamically know the relationships, but i expose the getSaveArray() function in PHP, so you could choose not to use my save() method and use the array to custom save the data. So knowing which columns are children, you could update the relationships. If you wanna explore this let me know i can help.

[thanhquanky]

you're right. It works perfectly by now. There is a tiny problem with CodeIgniter's routing. Thank for your suggestion :)

[optikalefxx]

@thanhquanky no prob, glad its working. Think you could do me a favor? I wanna show a little documentation for others on how to use openJS Grid with CodeIgniter, would you be interested in helping?

[thanhquanky]

@optikalefxx I will be glad to do that after finishing my proj :) Moreover, I just port some features I need for my project. I will try to finish it and make some documentation.

[optikalefxx]

@thanhquanky awesome! if you just wanna message me when your available, that would be great. thanks!

[thanhquanky]

I mean it doesn't look like the example, right click feature doesn't work. Basically, it's like a plain table without css.

[optikalefxx]

@thanhquanky can you give me a link to your example? Firebug's net tab should show if the CSS files and javascript files aren't being found.

[thanhquanky]

I am attempting to implement OpenJS Grid with CodeIgniter. Can you provide API or documentation about something that will be transferred between ajax code and php?

[optikalefxx]

@thanhquanky Do you just wanna see the JSON object that gets sent back from PHP to JS? (basically the JSON object that PHP must create)

[thanhquanky]

@optikalefxx I used firebug tools to capture JSON, but I didn't success in making in run like the provided example. It does works, but the UI doesn't.

[optikalefxx]

@thanhquanky The better way is not to produce the JSON yourself, but to wrap my grid.php class. Thats because it does all the logic for you. When you page and sort and stuff it makes new ajax requests. Ill check out integrating with code igniter myself.

[thanhquanky]

@optikalefxx My current implementation does work with page and sort, but the only thing that doesn't is the ui.

[optikalefxx]

@thanhquanky When you say "the ui" what do you mean? Like what about it isn't working?

[StephanieLoveful]

Hi optikalefxx

I just watched your video. It's amazing how simplistic and ingenious your scripts works to control tables and its content. For viewing purposes. However for administration purposes .. Do you have plans to include a "add / remove post " code. That would be terrific when setting up community sites using news, dates, comments, user names and more. Or maybe it's already included in OpenJS? :)

Miss Steph

[StephanieLoveful]

@StephanieLoveful If you enable users/admins to change the content of the database. OpenJS would become more usable and expend its editing tools even further..

[optikalefxx]

@StephanieLoveful Hi. Thanks! Yep the latest openJS Grid has adding, editing and deleting

[StephanieLoveful]

@optikalefxx Really? Wow! That is just so purrfect ... does that mean that you can administrate

replace and use MYSQL strings in the Webb ?

[StephanieLoveful]

@optikalefxx that is just great, thanks ^^

[Wiiman138]

Is it possible to do something like this in rails?

[optikalefxx]

@Wiiman138 absolutely.  Most of the magic is done with javascript. The PHP is just my database logic. If i knew a rails programmer i could easily make a class in rails for the same javascript file.

[mskaleia]

Does it work with only Mysql database ?or it can work with other DBM?



[optikalefxx]

@mskaleia At the moment it's just mysql. But there aren't but 4 database calls. So it could be easily abstracted

[andrepadez]

seems perfect for my needs, i've been postponing this in the backoffice i'm building, because i lacked the time to go through the overkill of jqGrid.

I will definitely be making a donation for your hard work

[optikalefxx]

@andrepadez thanks! hope it helps out

[jfuruskog]

Oh that missing dot was a typo in the comment not i the code, sorry about that.

[jfuruskog]

@optikalefxx

the code in grid.js

var opts = $.extend({ callbackSuccess : null, order_by : "",...

and at row 128...

if(user_opts.callbackSuccess){ console.log("Data from grid"); console.log(data); user_opts.callbackSuccess(); }

how can i send data back? just pass it in?

[jfuruskog]

Ive tried the code but my function is undefined, i call it like this... $('grid').loadGrid(gridCallbac­k);

[optikalefxx]

@jfuruskog Your selector $('grid') doesn't refer to anything. You gotta use $('.grid') for a class selector.

[rhobinz]

yeah awesome! I'll try that for myself., XD

[optikalefxx]

@rhobinz im about to release a new version with a bunch of new stuff. Including callback functions for beforeLoadStart, loadStart and loadComplete. It was harder than i thought XD lol

[jfuruskog]

I tried to make my own event and trigger it whenever data was loaded. But in firefox I get "a is undefined" in webkit it works fine. It fails when I try to sort the table. If i move the bind before the loadGrid i get the error right away.

[optikalefxx]

@jfuruskog this is untested but should work

at the top of the options there add a new property callbackSuccess : NULL

then on line 128 right after $grid.equalizeColumns() add this line

if(useropts.callbackSuccess) useropts.callbackSuccess();

Now you should be able to call loadGrid() and pass in the function. If it doesn't work ill make up an example for you.

[jfuruskog]

Hello again! Is there a way to make a callback whenever data is loaded in the grid? for example when you sort. I want to update my google maps marker whenever new data is loaded.

[WindawgKiteboarding]

Awesome videos, do you use an MVC framework like Zend or Cakephp or do you use your own?

[optikalefxx]

@WindawgKiteboarding Thanks! I use my own MVC called CornerStone.

[jfuruskog]

@optikalefxx lol, sorry :p

[jfuruskog]

No problem I really like it! Great with the hidden column feature. Btw when you unfrezee a row is it supposed to dissapear comepletly from the table?

[optikalefxx]

@jfuruskog Lol I was hoping no one would notice yet. Yea it was a quick way to do it. I need to either auto refresh the grid or remember positions. Probably the latter.

[jfuruskog]

Hi i tested out the plugin this weekend I did some minor modifications to make it work with the Google map on My test page. I added a trigger when the Ajax request is done. The other thing was to set row ids to a id in the database. the final thing was to add classes on tds to the key name for the value. with that blunt programing i cripled the plugin. But it worked for My purpose. Is it possible to get data that doesnt show that I need to place Google maps markers. I manage to hilite à marker

[optikalefxx]

@jfuruskog yea the next update has hidden columns. you will just set the attribute 'hidden' on the TH. Ill update it for you as soon as ive fully tested it.

Thanks for using the plugin!

[jfuruskog]

Not psuedo coment streaming per say, I thought you came up with a own tecnique of using it. Sorry for the confusion. Anyway keep up the good work! You are very pedagogical and i learn much from your videos, thanx!

[jfuruskog]

Is it something you invented by yourself? Sounds interesting. I wonder what Facebook uses in their chat function.

[optikalefxx]

@jfuruskog nah, not my invention. Comet streaming is a coding client server interaction. For true comet streaming the web server needs to be setup in some specific way. Facebook actually does use Comet streaming.

[jfuruskog]

How do you feel about dooing a tutorial about psuedo cosmic intervals? Maybe a php driven chat client with jquery or something. Is it a good aproach to use a database for this?

[optikalefxx]

@jfuruskog I found a cool way to use pseduo comet streaming to do live chat and live messaging. Ill probably be implementing that into the grid. Yea i think a database is good for that.

[TheDkunderground]

This is WAY better then datatabels !! Cant wait to try it out!

[jfuruskog]

@optikalefxx ahh load grid thanx :)

[optikalefxx]

@jfuruskog calling it with no paramters will reload it will all the current set search terms, widths and so on.

[jfuruskog]

Your table plugin would fit the bill :)

[jfuruskog]

My iphone typing sucks... Build a iphone app with phonegap that collects data, and displays race info. Also others can follow the race online and see the runners on realtime map and runner info in à table below.

[jfuruskog]

@optikalefxx intervals im gooing to look into that. About timeframe, the actual pilot race is in august. Im planning to building

[jfuruskog]

@optikalefxx thanx, psuedo comet

[optikalefxx]

@jfuruskog in the meantime however, you can just use setInterval() and just call $(".grid").loadGrid();

that will reload the grid with new data on that interval.

[jfuruskog]

Yes, thank you.

Is there a way to set a interval on updates from the database? Im working on a realtime geo tracker. Im gooing to use it to track participants in a marathon and place markers on a map and update speed, etc. I have done the most of the work with the map and markers and began work on the table. Then i saw your solution and why build my own when i can use your cool and easy solution.

[jfuruskog]

sandbox.furuskog.se/geo/show.p­hp



[optikalefxx]

@jfuruskog That's a great feature idea. I can use psudeo comet intervals. The same stuff live chat programs use to refresh grid data. What's your time frame?

[gruntman1985]

Thanks for the code and vids. I will be working this into my website soon!

[HooligansworldDOTcom]

Nice source, nice job like always

[7715z]

nice :D more videos!!

[PCtechtips101]

good vid