i try this for TIMEDIFF(
$grid = new Grid("theTablename", array( "save"=>true, "delete"=>true, "fields"=>array( "period" => "TIMEDIFF(enddate, startdate) AS period" ) ));
Produce an error...

how to use this in OpenJS-Grid or do it in php ?
Allso for the SQL SUM funktion id like to use as append row.
thank for a hint.

As I am not a professional programmer I have some troubles using this awesome grid.
Specifically I have two seperate issues although they might have the same solution:

First one: Two tables, first is projects, second is user. In the users table name and surname are in seperate columns. in projects there is a column uid for linking with the users table. I watched all videos, read many (solved) issues but wasnt able to create a working code.

This is what i created so far in the ajax.php:

$mysqlhost="localhost"; // MySQL-Host angeben
$mysqluser="wawi"; // MySQL-User angeben
$mysqlpwd="XXXi"; // Passwort angeben
$mysqldb="wawi"; // Gewuenschte Datenbank angeben
$connection=mysql_connect($mysqlhost, $mysqluser, $mysqlpwd) or die("Verbindungsversuch fehlgeschlagen");
mysql_select_db($mysqldb, $connection) or die("Konnte die Datenbank nicht waehlen.");
// require our class
require_once("grid.php");

// load our grid with a table
$grid = new Grid("projekte", array(
    "save"=>true,
    "delete"=>false,
    "adding"=>true,
    "joins"=>array(
        "LEFT JOIN user ON (projekte.uid=user.id)"
        ),
//when doing joins the fields need to be labled and changed to the required filed from the join to show in grid
    "fields"=>array(
        "prename"=>"users.vorname",
        "surname"=>"users.nachname"
        ),
            "select" => 'selectFunction'
    ));

function selectFunction($grid) {


    $selects = array();

    // category select
   $grid->table = "user";
   $grid->fields = array("fullName"=>"CONCAT(prename,' ',surname)");
    $selects["fullname"] = $grid->makeSelect("id","fullname");


    // render data          
    $grid->render($selects);
}

The table on the html looks like this:

    echo "<h2>Bauvorhaben</h2>\n";
            echo '<table class="grid bvh" action="ajaxBVH.php">
            <tr>    
                <th col="id"    width="50">ID</th>
                <th col="name"  width="200" type="text">Bezeichnung</th>
                <th col="aktiv" width="100" type="checkbox">Aktiv</th>
                <th col="temp" width="100"  type="checkbox">Tempor&auml;r</th>
                <th col="created"  width="200" type="text">Erstellt</th>
                <th col="fullname" type="select">Erstellt von</th>
                <th col="zkalkident" type="text">ZKalk DokNummer</th>
            </tr>
        </table>';

This is the MySQL-Log for the query:

130829 15:32:02   290 Connect   wawi@localhost on 
          290 Init DB   wawi
          290 Quit  
          292 Connect   wawi@localhost on 
          292 Init DB   wawi
          292 Query SHOW KEYS FROM `projekte` WHERE Key_name = 'PRIMARY'
          292 Query SELECT `projekte`.`id`,`projekte`.`name`,`projekte`.`aktiv`,`projekte`.`temp`,`projekte`.`created`,`projekte`.`fullname`,`projekte`.`zkalkident`,users.nachname as `surname`
            FROM `projekte`
            LEFT JOIN user ON (projekte.uid=user.id)



            ORDER BY `id` DESC
            LIMIT 0,10
          292 Quit  
          291 Connect   wawi@localhost on 
          291 Init DB   wawi
          291 Query SELECT `user`.`id`,`user`.`fullname`
            FROM `user`
          291 Quit  

FYI this is the js snippet for the grid:

                        $(function() {
                var $grid = $(".bvh").grid({
                    title : "bvh",
                    page : 1,
                    showPager : true,
                    editing : true,
                    deleting : false,
                    nRowsShowing : 10,
                    width: 1000,
                    rowNumbers: false,
                    checkboxes: false,
                    adding: false,
                    orderBy: "id",
                    sort: "DESC"


                }).on("loadComplete",function(e, grid) {
                    console.log("loadComplete", grid);
                }).on("cellClick",function(e, $cell,rowData) {
                    //console.log("cell",$cell,rowData);
                }).on("rowCheck",function(e, $checkbox, rowData) {
                    //console.log("rowCheck",$checkbox, rowData);
                }).on("rowClick",function(e, $rows,rowData) {
                    //console.log("rowClick",$rows,rowData);
                }).on("save",function(e, row, res) {
                    //console.log("save",row,res);
                });

            });

I don't know how to go on from this stage as I tried everything I can think of. I am sure the answer is an easy one so please share it with me!

regards, charlie

I need an Add-Button in my Grids but I'm stuck when it comes to reloading the grid with the added Row. What i have done so far is:

in grid.js on line 664 I added:

<a class='gridAdd btn btn-primary' href='#'>+</a>\

in line 270 I added:

$grid._on("click",".gridAdd", self.addRow, self);

line 2004:

        addRow : function() {
            var self = this;

            $.post(self.opts.action, {add:true}, function(success) {
                    if(success) {
                    console.log('Row added');

                    } else {
                        self.error("Failed to Add");
                        console.log('Row not added');
                    }
                    this.grid("load");                  
                });

in grid.php the function add() is not a comment anymore. So if I click on the Add-Button, a new dataset is created in the database. BUT i need the grid to be refreshed. I tried this.grid("load"); and some other variants but none of them refreshed the grid. I'm sure there's just a line of code I'm missing so please help me.

regards, charlie

I have a grid that I want the column widths to be automatically created to fill the table's width, which it is not currently doing when the table is initially generated. This is what the table looks like on page load:

If I click or drag on a column AFTER the table is initially loaded then it does fill it out correctly:

The issue still exists if defining the width of one or two of the columns. I've customized the CSS for the grid, but I wouldn't think the problem would be in there.

I briefly looked at the JS code to try to find where the issue might be, but didn't see anything obvious.

I have been able to test this in Chrome and Safari on Mac OS 10.8.2.

Congratulations on creating a great library which is amazingly easy to understand even for beginner like me ;-)

I notice it might be possible to hack function _queryMulti($sql) in grid.php to return $array from non mysql sources.

Are you or anyone doing this?

How shall I contribute if I complete this?

Is there any interest in upgrading to Bootstrap 3.0.3?

This thing looks really cool, but how about support for Ruby on Rails and Asp.Net MVC?

The basic jQuery Grid works with these back ends, and if yours did too, your user base could increase a lot.

Any chance of you looking into this?

Hi, the includes of jquery.js seemed to have screwed up the jqueryui js codes for:

    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/jquery-ui-1.10.2.custom.js"></script>

Is there any workaround that you may suggest?
Thanks.

First of all, thanks for this amazing grid. If this issue can be resolved, then it'll work perfectly for my project where it is crucial that the user can navigate the grid WITHOUT having to use the mouse.

The problem is that when you tab down to the end row of a grid with multiple pages, the row of headerCells (column titles) disappear. If you then Shift+tab back up to the top row, the column titles row reappears, but is positioned incorrectly on the page relative to the "grid body". This is true not just with my adaptation of your code, but also on http://square-bracket.com/openjs (examples).

Any ideas how to resolve this?

thx,
Mike

I have the grid working for standard table but I need to have one of the columns in the master grid to have a drop down list of items that can be changed and saved. Where is this in your api or do you have any information that might help me on setting this up. Thanks

I add new comment at the bottom.

I'm assuming OpenJS-Grid is compatible and will run on Androids and iPhones but there are probably known versions of each that are incompatible. Is this documented anywhere?

Hello,
I have installed the version 2.1.6. when calling index.html only title and header row appears. (http://www.mannack.de/openjsgrid/ ) The sample.sql I have imported successfully and the ajax.php is adapted on my database. what did I do wrong?
Thanks in advance.
Olaf

PS: I have also installed the verison 1.8. this works perfectly

The current version of jsgrid can be a bit cumbersome when trying to simply click on the scroll bar and drag it up or down. What often happens is the click and drag action is triggered and the jsgrid begins to be resized. It would be quite helpful to be able to retain the responsiveness of the grid but disable the click and drag feature.

I'm trying to create a chained select drop down list for my editable grid.

ID | TYPE | SIZE | CATEGORY
1 | SELECT BOX 1 | SELECT BOX 2 | SELECT BOX 3

Whatever you select in the first select box changes what is displayed in the other select boxes.

I wanted to pass the $type into the function selectItems($grid, $type) so I could use a WHERE statement in my selects but that didn't work. The JOINS did not work here either.

I have a successful Chained Select working with regular java and mysql but for the life of me cannot make it work for the grid. Figured I'd drop this here and see if anyone had any input on this feature for OpenJS-Grid.

Thanks!

Hello!

I forked the project this morning and added some changes I've made to my fork, mostly in grid.php.

• added a count_by_pk option to the PHP because I had some complex queries which would really slow down during the pagination query. Just doing a simple count of the primary key (with wheres, joins, etc) saved me about 10 seconds a pagination click.
• added another option, "output_processor", which accepts an anonymous function. It gets to fondle the data output before it sends it to the browser. I've got an app which needs to hide email addresses occasionally before it hits the browser, so doing it in jQuery wasn't an option. It also makes linkifying things dead simple from the PHP side, but that's just a side effect.

I don't github much, so I don't know what the next steps are, but I thought I'd mention what I'm up to. If I need to do some dancing to get the changes to your repo, lemme know.

"checkbox": function(value, columnOpts, grid) {
if (value=="Y"){
var checked='checked="checked"';
}else{
var checked='';
}
but if i check or uncheck it uses 0 and 1 values is there any solution for that.

hello,
can i get a hint where the best point to start
for hover and stripe row with css (odd) & (even) and line height
maybe without bootstap it´s to much for some devices.
thanks

Is their a way that i can use Distinct in the select query

Hi Sean,

Exist any wait to show a col "Select" with attribute 'disabled'?

I have this code for load the 'selectFunction'

//-----------------------------------------BEGIN CODE-----------------------------------------//
// load grid with a table

$grid = new Grid("inventory", array(
    "save"=>true,
    "delete"=>false,
    "select" => 'selectFunction'
));

// 'selectFunction'

function selectFunction($grid) {
    $selects = array();

// status select
$selects["status"] = array("4"=>"Lost","3"=>"Delivered","2"=>"In Transit","1"=>"Warehouse 2","0"=>"Warehouse 1");

// render data
$grid->render($selects);
}
//-----------------------------------------END CODE--------------------------------------//

Actually i need show this data but with the 'Select'(Disabled) or show it like plain text, i think with a fields (array) but i can't make that works

Is possible make something like that?

Thanks for your time Sean

Thanks a lot for releasing a great software!

I cannot find a LICENSE file. Could you add one?
You can read about "Choosing an Open Source License" at
https://github.com/blog/1530-choosing-an-open-source-license

Hi,

What's an option to set page number of the grid on run-time ?
I want to preset the page number of a grid based on the query string via GET.

Advice ?
Kaushal

The default behavior for webpages is to scroll the entire page up/down with the press of the up/down arrow keys. I propose a jsgrid option that when a grid is clicked that it can be scrolled up/down with the arrow keys. If you click a second grid in the same page, you should be able to scroll the newly clicked grid up/down using the arrow keys.

when I'm getting field with utf charset which containing arabic letters not showing correctly?

If you use windows 8 there is something weird with the scrollbar,

Example: http://i.imm.io/KSW2.png

Sean,
Sorry to bomb bard you with so many questions. Can the where statement take two values
like this:
"where"=>"inspection_date = 'CURDATE()'" && "assigned = '0'",
I am wanting to filter it down.

Also is there any way to set the widths of the columns?

By the way thanks for all the help
Jon

Hello,
I get a error "Unknown column 'one.' in 'field list' ".I have database named "try" , a table named "one" , with fields "id(int)" and "name(char)".Its just a sample table I am using to show its data in a grid, but am getting this Error.I have edited those default html and ajax files as follows:

Index.php

            <!DOCTYPE html>
            <html lang="en">
        <head>


    <link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>

    <link rel="stylesheet" href="grid.css" title="openJsGrid"/>
    <!--<link rel="stylesheet" href="jquery-ui/css/smoothness/jquery-ui-1.8.22.custom.css"/>-->
    <script src="jquery.js" type="text/javascript"></script>
    <!--<script src="jquery-ui/js/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>-->
    <script src="root.js"></script>
    <script src="grid.js"></script>

    <script >


          $(function() {
         $(".users").grid();
            });

    </script>

       </head>
        <body>
    <h2>Users</h2>
    <table class="grid users" action="ajax.php">
        <tr>
                            <th col="id" type="text">ID</th>
            <th col="name" type="text">Name</th>
        </tr>
    </table>

        </body>
            </html>

Ajax.php

    <?php
// connect to db
mysql_connect("localhost","root","");
mysql_select_db("try");

// require our class
require_once("grid.php");

    $grid = new Grid("one", array(
   "save"=>true,
   "delete"=>true
    ));

       ?>

Hi, when i use the makeSelect function to load select list, it show "null" fields values containing special characters from the database like "é,ç,à,è,â,ô,Ü ...".

Example 🔢

The field value is "Clé USB SanDisk 8Go" (With special characters)
http://dif.1s.fr/issue/1.jpg

The field value is "Cle USB SanDisk 8Go" (Without special characters)
http://dif.1s.fr/issue/2.jpg

Thank you.

I really appreciate you and m3qx's work in getting a class set up for codeigniter users. I've been struggling to get this to work for a few hours now and can't seem to get past the error listed below. I'm not sure if the property "base" (found on line 450ish, "$rows = $this->CI->base->_queryMulti($sql);) is something you've set up in another file that I'm missing in my version of Codeigniter or if maybe this is symptomatic of some other sort of problem you might be able to help me identify.

Anyway, thanks for your help in advance. Let me know if you need any more code. "Fegsys" is my controller.
-Nate

A PHP Error was encountered
Severity: Notice
Message: Undefined property: Fegsys::$base
Filename: libraries/grid.php
Line Number: 453

Fatal error: Call to a member function _queryMulti() on a non-object in C:\xampp\htdocs\ci\application\libraries\grid.php on line 453

Hi dude, Great work with new grid system ! Thanks for sharing such a cool project of yours with the world !

I am having hard time setting it up for my new project. I need to define a custom celltype to convert manual html into a cell's data, which is fine and I was able to achieve that fine. But the problem is this stopped the inline cell editing feature and also type="image" do not work.

Code I used on javascript end

$(function() {
    // default grid
        $(".grid.default").grid({
            title : "default",
        page : 1,
        showPager : true,
        editing : true,
        nRowsShowing : 10,
        rowNumbers: true,
        cellTypes: {
            "manual_code": function(value, columnOpts, grid) {
                            code="";
                            if(columnOpts)
                            code=columnOpts.code.replace(/{{value}}/g,value);
            
                        return { cellValue: code}
                        }
                    }
            });
    });

Can you please help here ?

I have this table
CREATE TABLE sra_tr.tr_users_forms_authorities (
user_id varchar(40) NOT NULL,
formid int(5) NOT NULL,
formauthorityid int(5) NOT NULL,
enabled varchar(1) NOT NULL DEFAULT 'N'
) ENGINE=InnoDB COLLATE=latin1_swedish_ci

to enable inline editint I set primary key
ALTER TABLE tr_users_forms_authorities ADD PRIMARY KEY (user_id,formid,formauthorityid)
ajax.php

$user_id=$_REQUEST['user_id'];

$grid = new Grid("tr_users_forms_authorities", array(
"save"=>true,
"where"=>"user_id = '$user_id'"

html

The Problems:

1-before adding the primary key the query for user_id='admin'
it was showing all records with user_id='admin'
after adding these primarykye it's showing the last record only one record.
2-if you try to update this record it's trying to add new one:
Duplicate entry 'admin-3-1' for key 'PRIMARY'.

Thank you for your help in advance

I need to default SQL order to 'id desc' , now how do I do that ?
That was easy on previous version, couldn't find about it on documentation either.

Please advice ?
Kaushal

Do you have an API for Open JS Grid, the website does not have but just a few. I also seen an updated version of 2.1.4 is that yours.

I was wondering if you have any methods that allows for the grid to auto-refresh or is there a way to set it up. I am pulling data from MySQL using AJAX and I want to set a time to refresh the grid with new data.
Thanks for the help so far.

Let's say you had a 'warning' column in a table with 3 rows, with one row of each status - warning, informational, alert - and you wanted to color the field orange, blue, and red. How would you do that? I imagine this could be done with loadComplete, but I'm not sure how to set the CSS for a field based on the value, i.e. 'warning'.

hi,
is it possible to search within multiple columns at the same time in order to filter data ?

Before I start, I wanna say that on paper this looks like an amazing product. The features are quite powerful for an open source grid but I have some issues.

I'm sorry if I come off as ignorant but first, the latest version doesn't work at all for me. When I go to the main page (http://square-bracket.com/openjs) it doesn't load either just says Delete in the upper right corner of the grid.

Second, I can't find documentation on ANYTHING for openjs Grid. So can I only use the example database or is there a way to set it up using my own database?

There is a timing issue between the deferred for drop downs, and actually building the html parts. It sometimes causes the drop downs not to render, as well as images. All cellTypes actually are affected by this.

I have been testing out openjs grid v2.1 - starting by modifying the ajax.php and index.php - i can get the grid to show the data, the delete function, sorting and navigation works but i cant seem to get the inline editing working. I followed the instructions on the youtube video for an older version but it didn't work.

Here is my ajax.php code

Hi,
I got this error.
Notice: Undefined index: cols in C:\xampp\htdocs\Regression\lib\openjs\grid.php on line 237
Unknown column 'script_details.' in 'field list'

Kindly please somebody help in fix this issue.

Hi,
can you please show me how to select only one field from database? I'm little confused about where to put select query..
Here is my code (and won't work of course) :) thanks.

$grid = new Grid("tblitems", array(
    "save"=>true,
    "delete"=>true,
    "where"=>"codeID != ''",
    "select" => 'selectFunction'
));

// 'selectFunction'
function selectFunction($grid) {
    $selects = array();

    $grid->table = "tblitems";
    $selects["codeID"] = $grid->makeSelect("codeID");

    // active select
    $selects["active"] = array("1"=>"true","0"=>"false");

    // render data          
    $grid->render($selects);
}

Hi
When getting "Arabic" data from the database it appears like this "?????"

I watched the youtube video, http://www.youtube.com/watch?v=hFbYZbz03w0, where you ask users to download via the link at http://www.square-bracket.com/openjs so you can achieve better tracking. However when I click on the link I get "Not found" at "https://nodeload.github.com/optikalefx/OpenJS-Grid/zip/OpenJSGridv2.1.4".

You probably want to correct this.

in griss.css i tried to change the size of the width but i can't

div.gridWrapper {
width: 800px;
min-width: 515px;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
height: 280px;
position: relative;
background: #fff;
margin-bottom: 70px;
}

i tried changing width: 800px to width: 600px but still loading with 800px

Exist any way to do this?

Hi,

I am trying to test it on localhost but it keeps showing the "Loading" message. I'm not a developer so can you lead me the way ?

Line 912 of grid.js tries to change numbers to lowercase
var string = row[key].toLowerCase();
To reproduce, try to filter the grid with a number.

Even with the bug, filtering still works.

I'm wondering if you are planning on adding support for sqlite and postgres?
(Is this the right place to ask questions?)

Sean,
what is causing this:
saveable: [idinspection, inspection_date, am_pm, pass_failed, Permit_No]
0: "idinspection"
1: "inspection_date"
2: "am_pm"
3: "pass_failed"
4: "Permit_No"
only 4 of my 7 columns on the table are showing in the console as saveable.

Hello

I am using the function RowClick to create a pop windows but I what to exclude the function to a link in a cell.

Thanks

If Zoomed in on the browser, the last row gets chopped off