Really diggin’ jqGrid

We’ve been using jqGrid to prototype a CRUD (Create…Update and Delete) app and I am really digging some of the features…yeah, it’s got a bit of a learning curve and I’m still using plain old tables for some stuff, but there are some things about it I really like…for instance this…

Screenshot of Row Data - in VS 2008's javascript debugger

That’s data from a row after the user double-clicked the row…isn’t that nice?
So now when I go

var acctCode = rowData["AccountCode"]

I would see 000-10300 as the value for the variable acctCode

Verrrrryyy niiice…

So…just wanted to show you guys how nicely jqGrid returns it data and makes it really easy to work with…
And for some background…here’s how I got to the screenshot above…note the ondblClickRow event handler jqGrid provides

        url: '/CRUDApp/GetAccounts/?id=' + id,
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Account', 'Description'],
        colModel: [
                        { name: 'AccountCode',
                            index: 'AccountCode',
                            width: 200
                        { name: 'Description', index: 'Description', width: 200 }
        sortname: 'Description',
        sortorder: "asc",
        rowNum: 10,
        viewrecords: true,
        pager: 'pagerFilteredAccounts',
        height: '100%',
        ondblClickRow: function(rowid) {
        autowidth: true
    }).navGrid('#pagerFilteredAccounts', { edit: false, add: false, del: false, search: false, refresh: false });

    function setAcctFromGrid(rowid) {        
        var rowData = jQuery("#filteredAccounts").getRowData(rowid);

About w4ik

software the trenches
This entry was posted in ASP.Net, jqGrid. Bookmark the permalink.

One Response to Really diggin’ jqGrid

  1. azghanvi says:

    PHP datagrid component using JQGrid (based on JQuery). This library can generate fully featured CRUD application in record time.

    1. include(“jqgrid.php”);
    2. $g = new jqgrid();

    3. $grid[“caption”] = “My Sample Grid”; // set grid customizable params
    4. $g->set_options($grid);

    5. $g->table = “tags”; // db table for CRUD operations
    6. $out = $g->render(“my_grid_1”);

    This code will result in fully functional Jquery Grid (JqGrid) with

    * Add
    * Edit
    * Delete
    * Search
    * Auto-filter
    * Sort
    * Pagination
    * Export
    * Multiple Themes (ThemeRoller)
    * and almost all features available for FREE … which cost $449 on official commercial license.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s