Click here to Skip to main content
15,749,066 members
Articles / Web Development / ASP.NET
Posted 23 Jun 2013


55 bookmarked

JqGrid Inline Editing

Rate me:
Please Sign up or sign in to vote.
4.93/5 (25 votes)
24 Jun 2013CPOL8 min read
How to perform Inline editing in JqGrid

This article appears in the Third Party Products and Tools section. Articles in this section are for the members only and must not be used to promote or advertise products in any way, shape or form. Please report any spam or advertising.


Hi friends, quite a few days back ,I've written an article about JqGrid Integrating with

I got lots of comments on that, and one of my  CP friend wanted me to write more on the features. Inspired from their comments and support I thought about writing one more article about JqGrid.

In the previous article, I’ve demonstrated the Form editing feature of JqGrid, so here I would like to demonstrate the Inline Editing Feature. Also I would like to demonstrate how can we  use different user controls inside the JqGrid like check box and drop down list.

Hope this will help. 

Request:-Those who are new to JqGrid better read the first part of this article. 

Using JqGrid in ASP.Net  

Basic Grid Creation   

As a first step I would like to create a plain grid which displays data

as below 
with bottom navigation bar. 

Image 1

In the previous article, if already red that, you might have seen some Add/Edit and Delete buttons displayed in the left corner of bottom navigation bar(near to Refresh ).
Here all those things are not present.
Let’s see the script which I used to create the above grid (not repeating the basic stuffs like adding prerequisite script and css files).  

Image 2

In the above image you can clearly see that I have disabled the Form level editing options that was supposed to display in bottom navigation bar.
Why I disabled is because, Now we are going to do the Inline editing operation.

Start Inline Edit   

We all set with the basic grid Infrastructure.
Now we are going to build on top of it.
So like Form Edit, What we do here is...  


  1. Place Add, Edit,Cancel and Save  button in Bottom left of navigation bar
  2. Select a Row from grid (while selecting the row get highlighted) 
  3. Then Click Edit button from  the Bottom bar 
  4. The Row become Editable also Save and Cancel button too 
  5. Edit the Row  
  6. Clicks save 



If we want to do all these things, we want buttons to be displayed on the bottom bar.
So to perform inline operations, we have got a method called inlineNav like navGrid which we used previously for Form edit.
Don’t you remember that?
Just now only we disabled all those operations from that method right? Smile | <img src= " />




Let’s see how we are going to plumb this new Inline method.
The below given script will help you to make the grid display the Add/Edit/Save and Cancel buttons. 

Image 4

edit: true , add:true , save:true and cancel:true  will display respective buttons,Mean while the parameters editicon,addicon,saveicon and cancelicon  parameters will set the button icons to be displayed in the UI from the image folder and CSS.
Ok hope we are done with the plumbing .
let’s see how the grid looks now.  

Image 5

Yes...The buttons got displayed.
You can also see that the Save and Cancel button are in disabled state. And no labels are displayed for the buttons as well.
Ok let’s go and see how the edit button behaves. 

Image 6

What I have done is, selected a data row and clicked the Edit (pencil icon).
The row became editable as above image.
So we made our grid Inline Editable.
Soo Simple right ?
Looking in to the edit fields you can see that  all the fields are displayed as Text box.
Did you saw that? 
As per the data in the fields , we can make fields like Department (5th) as DropDown list with all the possible departments and Permanent (9th) field which is Boolean so better make that a check box while editing.Whats your Opinion ? 

It’s good to think .
But how can we make that happen. ummm.... 
Yea... We made it .
See below image.
Image 7

How we made that… We have to look back to the Script. 
As usual this is also a configuration change ,which  means adding some parameters to the specific data fields. 



Image 8

So let’s dissect those elements.


Se the Department field, in that added attribute edittype as select, formatter as select ,also provided editoptions as key value pairs to be displayed in the dropdown.

Every thing is perfect.
We did it successfully. 

Now i think we also have to change the MaritalStatus field to Dropdown right?
Any way .. not now lets do that later.. 

What we want next is, test whether the save button click works or not.

To handle the save operation I’ve used a Generic Handler called JQGridInlineHandler.ashx, I have also provided that in the url and editurl property of the grid.  

url: 'http://localhost:58404/JQGridInlineHandler.ashx' 
editurl: 'http://localhost:58404/JQGridInlineHandler.ashx'   

Lets go and hit the Save button and see whether the handler is calling or not.


Image 9


Yea the debugger got caught in the handler… 

Check the forms name value collection from can also see all the data required for the update and the oper =edit

So that also happened. 

Next thing is that we require the Primary key of the record  to be updated ,here it is the EmployeeId (_id).

If you watch that forms closely you can’t able to see that EmpId in it. 

Then how will we transport EmployeeId from client to server. 

This means we want to transport extra pay load to the server. 

Image 10

To transport the data what we done is ,we exploited the capability of  editParams inside that extraParams property is there ,through which we can transport data .
The data will be appended to Context.request.Forms name value collection. 

Hope everything is clear now.
Like EmpId, we can transport any data as payload to server as JSON class object .Take a look at the form name value collection now we can see the EmpId in it.
Image 11 



Also make a note of oper=edit there.
I tried Edit and Add...

With the help of Generic handler i could able to Add and Update the Employee record
everything went well and worked fine.


The grid is not getting refreshed once Add or Edit performed.
For Edit it’s not a problem because the Edited data persist there right.
But if the grid 
didn't get refreshed after add, we could not able to see the newly added record in the grid. 
Let’s go and find the event in client side which fires after Add and Edit.
so that we can manually refresh the grid from that event,  by adding grid refreshing code .
When I went through the highlighted region in the image 9 I found a property called successfunc

Let’s try adding refresh grid code in the successfunc.

Below is the grid refresh code. 
You can use this code any where to refresh the JqGrid with loadonce: true 

$(this).jqGrid('setGridParam',{ datatype: 'json' }).trigger('reloadGrid');  

I forgot to tell about the loadonce in previous article too.
This attribute make our JqGrid get populated only once in a postback. i.e the grid will not automatically refreshed or re-populated after each and every operation performed.
Hope you got the point. Smile | :) .
Also added alert message for a beauty after Add/Edit. 


 Image 13

Then it worked fine and the grid is now refreshing after edit.
You might have noticed that am alerting the response text. Are you wondering what is in the response text ….? Nothing...
It’s what we writing in to the http context response from handler after performing the Add/Edit operation.

Edit is Clear then how about Add…? 

For add also we have got same set of methods .
But only difference is that its not directly inside the addParams 
 like Edit,  but inside add params there is one more parameter called addRowParams. 

Image 14

Can you see that?
Yes …Hope everything is clear as of now.Now we could able to Add/Edit by   Inline method in JqGrid .Ill show you how after add and edit our grid looks like. 

Image 15

Image 16


Custom Formatting Cell Data: 

In my previous article, one of my reader friend asked me ,How can we format the data in the JqGrid Cell, if we  are getting some codes related to data to be displayed  from db.

Say if we are storing some enumeration, and if we wanted to display a meaning full data for that Enum code. 

Actually his example is related to marital status, if you are storing


  1. -1 :- unknown 
  2. 0:-Single
  3. 1:-Married


For status respectively in db how we display the data in Layman understandable format.
Here, to explain this scenario I am making use of our marital status field. I have cleared the DB and inserted new records with marital status 0/1/-1


Image 17


You can see that in above image.
Now I am going to format it.
 Image 18

Let’s go the script .and in the colModel MaritalStatus add a function to attribute called formatter.
In that I have assigned a function with 3 input parameters.

Here we are going to write the script to format the cellvalue


You might have notice a debugger inside that method ,
I just put that to check  what’s there in the parameters.

Let’s go and see whats there in it. 

Image 19

This function will execute for each and every row in the grid.
So when I iterated,
I reached the second row and looked at the values of all the method parameters .
I found the cellvalue as useful in our context.
See the image 1A.
In that the value in second row and value here is same right, both are 1.
Then how we format?
Ok the inside the function I wrote code Like below .. 

Image 20

In function Returns string with respect to the value in cellvalue

Execute the application and see what’s displayed in the UI.

Yea it executed perfectly …. :) 
Image 21

Like wise we can format any data. 

Howzz this?

Sooo cool right?  

Note:-Don’t get confused .I have used another sample project to demonstrate the Custom formatting 




Mr.Jqgrid is a wonderful control with wonderful set of features.    

Thank you. 


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Software Developer (Senior)
United States United States
Currently working as Application Development Consultant in USA
I love writing what i know about and learning from the mistakes which i make...

Comments and Discussions

QuestionReadonly in edit mode and editable true in add mode Pin
Member 136509741-Feb-18 18:57
Member 136509741-Feb-18 18:57 
QuestionHow to add Delete feature here? Pin
Member 136509741-Feb-18 0:40
Member 136509741-Feb-18 0:40 
QuestionJq grid view Drop down values from Database Pin
Namohar M Rock15-Jan-18 2:49
Namohar M Rock15-Jan-18 2:49 
AnswerRe: Jq grid view Drop down values from Database Pin
KK Kod16-Jan-18 8:54
KK Kod16-Jan-18 8:54 
QuestionDelete Operation Pin
Member 1315011028-Apr-17 2:43
professionalMember 1315011028-Apr-17 2:43 
AnswerRe: Delete Operation Pin
KK Kod1-May-17 9:56
KK Kod1-May-17 9:56 
GeneralRe: Delete Operation Pin
Member 131501101-May-17 19:25
professionalMember 131501101-May-17 19:25 
GeneralRe: Delete Operation Pin
KK Kod2-May-17 4:24
KK Kod2-May-17 4:24 
Question$(...).jqGrid is not a function Pin
Shamseer K9-Sep-16 1:15
professionalShamseer K9-Sep-16 1:15 
QuestionNot Working with SQLSERVER 2014 Pin
Member 127242376-Sep-16 23:00
Member 127242376-Sep-16 23:00 
AnswerRe: Not Working with SQLSERVER 2014 Pin
KK Kod1-May-17 9:53
KK Kod1-May-17 9:53 
GeneralExcellent article Pin
venkat Reddy G15-Jul-16 10:04
venkat Reddy G15-Jul-16 10:04 
GeneralRe: Excellent article Pin
KK Kod26-Jul-16 4:29
KK Kod26-Jul-16 4:29 
Thank you....
PraiseGreat teacher you are. Pin
asif08692-Jun-16 2:42
asif08692-Jun-16 2:42 
GeneralRe: Great teacher you are. Pin
KK Kod2-Jun-16 5:41
KK Kod2-Jun-16 5:41 
QuestionHow can I show custom save and cancel button in each line at last and have its click event post the data to server. Pin
ganesh.dks16-Nov-15 22:34
ganesh.dks16-Nov-15 22:34 
QuestionHow can we do it without using the navigator button, Instead I want the save button in each row and edit mode should come up when user double clicks a row Pin
ganesh.dks29-Oct-15 19:40
ganesh.dks29-Oct-15 19:40 
QuestionHow to add multiple rows at same time in jqgrid and save it at once? Pin
sreeni0659-Sep-15 0:21
sreeni0659-Sep-15 0:21 
General Pin
mizzo.pl30-May-15 19:19
mizzo.pl30-May-15 19:19 
Questioncan you please provide database Pin
buggasai24-May-15 21:08
buggasai24-May-15 21:08 
SuggestionDataBase Pin
842144133312-Feb-15 19:46
professional842144133312-Feb-15 19:46 
QuestionCan you pls give your database Pin
Sreeraj CC4-Feb-15 21:24
Sreeraj CC4-Feb-15 21:24 
QuestionHow to populate dropdownlist using viewbag in MVC Pin
Mohammed Sadullah8-Oct-14 21:20
Mohammed Sadullah8-Oct-14 21:20 
Questionis any way to re purpose drop down values from database Pin
Member 107848595-Oct-14 19:56
Member 107848595-Oct-14 19:56 
QuestionAlert Message after saving data Pin
Chiranjeevi Bhaskaruni29-Sep-14 0:30
Chiranjeevi Bhaskaruni29-Sep-14 0:30 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.