JqGrid – Inline Cell editing / Row editing

Posted: February 27, 2013 by Sankar Vijayakumar in Javascript
Tags: , , , , , ,

JQGrid inline row edit

jqGrid Inline Cell editing

What is JqGrid?

JqGrid is free, open source plugin for the jQuery Java Script Library for manipulating tabular data. More info

Features of JqGrid:

Click here: This will tell you all about JqGrid features.

Do you want to see some jqGrid demos?

JqGrid Demos: Check it.

Inline Editing – jqGrid

I hope you’ve gone through the above links and know more about jqGrid than me :). So let’s see how to implement inline edit using jqgrid:

var myGrid = $("#mygrid").jqGrid({
datatype: 'local',
data: mydata,
colModel: [
{ name: 'AID', label: 'Some ID', key: true, width: 100, editable: false, sorttype: "int" },
{ name: 'Name', width: 300, editable: true },
{ name: 'Group', width: 100, editable: true },
{ name: 'Info', width: 100, editable: true },
{ name: 'AValue', width: 100, editable: true, edittype: 'text' }
],
.... //JqGrid options
.... //JqGrid options
});

Just need to add the attribute “editable: true” to make the columns editable and nothing more.
Want to see a working example? Here we go!

Single Cell Inline Editing – jqGrid

If we add “editable: true” to certain columns then all those columns becomes editable when clicked on a row. To edit the cells individually we need to add the jqGrid options cellEdit: true, cellsubmit: 'clientArray'. If you use local datatype then you should use cellsubmit: “clientArray” additionally. If you want to save data on the remote source you have to implement editing in your server code and specify cellurl option of jqGrid. Read more.

var myGrid = $("#mygrid").jqGrid({
datatype: 'local',
data: mydata,
colModel:[
{name:'id',index:'id', width:65, sorttype: 'int', hidden:true},
{name:'invdate',index:'invdate', width:120, align:'center', sorttype:'date', formatter:'date', formatoptions: {newformat:'d-M-Y'}},
{name:'name',index:'name', editable:true, width:90},
{name:'amount',index:'amount', editable:true, width:70, formatter:'number', align:'right'},
{name:'tax',index:'tax', editable:true, width:60, formatter:'number', align:'right'},
{name:'total',index:'total', editable:true, width:60, formatter:'number',align:'right'},
{name:'note',index:'note', width:100, sortable:false}
],
cellEdit: true,
cellsubmit: 'clientArray',
.... //JqGrid options
.... //JqGrid options
});

Want to see a working example? Here we go!

Reference links:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing&s[]=editoptions

Advertisements
Comments
  1. fgassette says:

    Thank you for visiting my blog today. I appreciate the time you took to stop by. May your day be filled with joy and peace.
    BE ENCOURAGED! BE BLESSED!

    Like

  2. Thanks for stopping by Storyteller. — Ray

    Like

  3. Sheharyar Hanif says:

    My JQGrid is not editable, i have defined the property editable: true but rows are not edit able my code is:

    $(“#jqgrid”).jqGrid({
    url: Url,
    datatype: ‘json’,
    mtype: ‘GET’, //insert data from the data object we created above
    width: 800,
    height:100,
    colNames: [‘S.No’, ‘First Name’, ‘Last Name’, ‘Roll No’, ‘Date of Birth’, ‘Class’], //define column names
    colModel: [
    { name: ‘S_ID’, index: ‘S_ID’, key: true, hidden: true, width: 50, align: ‘left’, editable:false},
    {
    name: ‘FIRST_NAME’, index: ‘FIRST_NAME’, width: 50, editable: true
    },

    {
    name: ‘LAST_NAME’, index: ‘LAST_NAME’, width: 50, editable: true, editable: true
    },

    {
    name: ‘ROLL_NO’, index: ‘ROLL_NO’, width: 50, align: ‘left’, editable: true
    },

    {
    name: ‘DOB’, index: ‘DOB’, width: 50, editable: true, editable: true
    },

    {
    name: ‘CLASS’, index: ‘CLASS’, width: 50, editable: true
    },

    //{ name: ‘edit’, index: ‘edit’, align: ‘center’, sortable: false, width: ’40px’ },

    ],
    pager: jQuery(‘#pager’),
    //sortname: ‘ROLL_NO’,
    viewrecords: true,
    //editable: true,
    sortorder: “asc”,
    rowNum: 50,
    caption: “Students”,
    //inlineNav: true,
    }) /

    Like

  4. I’ve lately taken an interest in making the change to developing mobile games.

    Like

How's it? Your comments and suggestions...

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s