4

I would like to know how to display multiple values in a single column in jqGrid

Here is a sample of my current grid definition.

$("#grid1").jqGrid({
url: 'Default.aspx/getGridData',
datatype: 'json',
...
colModel: [
...
//contains the input type ('select', etc.)
{ name: 'InputType', hidden:true }, 
...
//may contain a string of select options ('<option>Option1</option>'...)
{ 
  name: 'Input', 
  editable:true, 
  edittype:'custom', 
  editoptions:{
     custom_element: /* want cell value from InputType column here */ , 
     custom_value:   /* want cell value from Input column here */ 
  } 
 }, 
...
]
});
3
  • what do u mean by two values? you can simply combine two values ina variable and then using setCol in gridComplete you can change the value. Please explain your requirements clearly. Commented Aug 23, 2012 at 6:07
  • colNames: ['id','rev','employee_id', 'email','user_name','active','is_volunteer','is_first_time_user'] I have these columns but what i want is only three columns. One is 'id','rev' and the 3rd column should contain all the remaining column values... could u pls suggest me how to do it with the full code. i am new to jquery..
    – Ramesh
    Commented Aug 23, 2012 at 6:17
  • look at this code stackoverflow.com/questions/7912709/… Commented Aug 23, 2012 at 9:06

1 Answer 1

13

You can do this easily by using a Custom Formatter on your column model.

A custom Formatter is a javascript function with the following parameters:

cellvalue - The value to be formatted

options - { rowId: rid, colModel: cm} where rowId - is the id of the row colModel is the object of the properties for this column getted from colModel array of jqGrid

rowObject - is a row data represented in the format determined from datatype option

So a function can be declared like so:

function myformatter ( cellvalue, options, rowObject )
{
     // format the cellvalue to new format
     return new_formated_cellvalue;
}

And is defined on your column like this:

   {name:'price', index:'price', width:60, align:"center", editable: true, 
 formatter:myformatter },

So in your case you can use the rowObject parameter in the custom formatter to populate your additional values. For Example.

Column Model

    {name:'employee_id', index:'employee_id', width:60, align:"center", editable: true, 
formatter:myformatter, label:'Employee' }

Formatter

function myformatter ( cellvalue, options, rowObject )
{
     return cellvalue + ' ' + rowObject.email + ' ' + rowObject.user_name;
}

And if this is defined on your employee_id column it would display in the cell:

employee_id email username

Here is a jsFiddle example showing it working.

3
  • Actually what you are coming to say is absolutely rite.. ill show my sample code so that you can get a clear idea of what my problem is. {name:'user_name',index:'user_name',width:400,label:'user_name',formatter:function (cellvalue, options, rowObject) { addPart1 = rowObject.user_name; addPart2 = rowObject.active; addPart3 = rowObject.is_volunteer; addPart4 = rowObject.is_first_time_user; fullAddress = addPart1 + addPart2 + addPart3 + addPart4; return fullAddress;} this is what i am using to merge but am not getting it
    – Ramesh
    Commented Aug 24, 2012 at 13:31
  • 1
    how would you extend your example fiddle so that it also works after sorting the table?
    – Preexo
    Commented Mar 7, 2016 at 4:10
  • @Preexo has asked a great clarifying question. I too would love an answer.
    – RedSands
    Commented Oct 24, 2017 at 14:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.