JqGrid Inline Editing

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? " />

OK...

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. 

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. 

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.

  

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. 

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.

Saveee….. 

Yea the debugger got caught in the handler… 

Check the forms name value collection from context.Request.Form.you 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. 

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.
 

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. 

But….

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');  

Ohhh!!!
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. .
Also added alert message for a beauty after Add/Edit. 

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. 

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. 

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

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

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. 

How? 

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. 

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 .. 

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 …. :) 

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 

Reference:  

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing 

Conclusion:    

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

Thank you.