Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to display multiple values in same column in jqgrid

Tags:

jqgrid

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 */ 
  } 
 }, 
...
]
});
like image 237
Ramesh Avatar asked Dec 12 '22 23:12

Ramesh


1 Answers

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.

like image 104
DisplayName Avatar answered Jan 17 '23 12:01

DisplayName