Skip to content

# Creating First Grid

Step1: Add PHP Grid configuration code

    <?php
    include_once("../../config.php");

    // include and create object
    include(PHPGRID_LIBPATH."inc/jqgrid_dist.php");

    $db_conf = array(
                        "type"      => PHPGRID_DBTYPE,
                        "server"    => PHPGRID_DBHOST,
                        "user"      => PHPGRID_DBUSER,
                        "password"  => PHPGRID_DBPASS,
                        "database"  => PHPGRID_DBNAME
                    );

    $g = new jqgrid($db_conf);

    // set few params
    $opt["caption"] = "Sample Grid";
    $g->set_options($opt);

    // set database table for CRUD operations
    $g->table = "clients";

    // render grid and get html/js output
    $out = $g->render("list1");
    ?>

Step2: Include JS and CSS files in your html page

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>

        <!-- these css and js files are required by php grid -->
        <link rel="stylesheet" href="../../lib/js/themes/redmond/jquery-ui.custom.css"></link>
        <link rel="stylesheet" href="../../lib/js/jqgrid/css/ui.jqgrid.css"></link>
        <script src="../../lib/js/jquery.min.js" type="text/javascript"></script>
        <script src="../../lib/js/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
        <script src="../../lib/js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
        <script src="../../lib/js/themes/jquery-ui.custom.min.js" type="text/javascript"></script>
        <!-- these css and js files are required by php grid -->

    </head>

Step3: Print the `$out` variable where you wish to display grid.

    <body>
        <div>

        <!-- display grid here -->
        <?php echo $out?>
        <!-- display grid here -->

        </div>
    </body>
    </html>

### Resources

- Sample Code
- See Live Demo
- You can check this demo in archive `demos/editing/index.php`

### Explanation

- The PHP Part configured the grid and rendered the output to $out variable.
- In HTML Part, we displayed the generated grid code `$out` along with few external css/js files. It's upto you to place external css and js files at appropriate locations.
- `->set_options()` function is most of the customization, we'll be covering later.
- `->table` is required, to enable automatic select,add,update,delete operations on that table. By default all columns of the table are selected on grid. We'll review how to select particular columns.
- `->render()` will generate the final output, to be displayed in view. It takes Grid ID as input, which should be unique on a page.