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 */ 
  } 
 }, 
...
]
});
DisplayName
  • 3,093
  • 5
  • 35
  • 42
Ramesh
  • 163
  • 1
  • 2
  • 11
  • 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. – Piyush Sardana Aug 23 '12 at 06: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 Aug 23 '12 at 06:17
  • look at this code http://stackoverflow.com/questions/7912709/merge-several-columns-of-json-data-and-display-as-single-column-in-jqgrid – Piyush Sardana Aug 23 '12 at 09:06

1 Answers1

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.

DisplayName
  • 3,093
  • 5
  • 35
  • 42
  • 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 Aug 24 '12 at 13:31
  • 1
    how would you extend your example fiddle so that it also works after sorting the table? – Preexo Mar 07 '16 at 04:10
  • @Preexo has asked a great clarifying question. I too would love an answer. – RedSands Oct 24 '17 at 14:48