(tutorial) jqGrid cell edit example

Since I seem to be getting regular visitors to my first jqGrid tutorial, I thought I’d make more.

In this tutorial, we’ll see how to make a table editable using the “celledit” property of the grid.

First, let’s put down our HTML, which is very basic. Remember, with jqGrid, most of the action happens in the <script> tags (i.e. in JS). The following code should go in the < body > tag.

<table id="grid"></table>
<div id="pager"></div>

Then, we want to build our data that we will put into the grid. I’m using dummy data, but you can put in something more meaningful.

  
var mydata = [{
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    name: "Paris",
    country: "France",
    continent: "Europe"
}]

The above piece of code should go in the a < script > tag in the < head >.

Now that we have our HTML and data in place, we want to build the grid. The following code should go in the same < script > tag that you put your data in.

 
$("#grid").jqGrid({
    data: mydata,
    datatype: "local",
    colNames: ["Name", "Country", "Continent"],
    colModel: [{
        name: 'name',
        index: 'name',
        editable: true, // set it to false if you don't want the column to be editable
    }, {
        name: 'country',
        index: 'country',
        editable: true,
    }, {
        name: 'continent',
        index: 'continent',
        editable: true,
    }],
    pager: '#pager',
    'cellEdit': true, // TRUE = turns on celledit for the grid.
    'cellsubmit' : 'clientArray',
    editurl: 'clientArray'
});

Aaand that’s it! Save your file and open it in your preferred browser. As always, don’t forget to include the jQuery and jqGrid libraries in your < head > tag.

Your finished product should look something like this:

Click on each cell will open it up for editing.

You can find a working version of this tutorial here: http://jsfiddle.net/aditib/CzVVK/

Play around with it, try making some changes, see if it works.

Happy coding 🙂

Advertisement