0

I am using jqgrid for my table creation, for "colName" now each column showing only one values, Is it possible to show two values in one column? alsong with both values sorting feature ? Please note the below screenshot for reference i need such type of header using jqgrid. it is possible?

enter image description here

HTML:

<table id="grid"></table>

JS:

![$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames: \['Inv No', 'Thingy', 'Blank', 'Number', 'Status'\],
    colModel: \[{
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int"},
    {
        name: 'thingy',
        index: 'thingy',
        width: 90,
        sorttype: "date"},
    {
        name: 'blank',
        index: 'blank',
        width: 30},
    {
        name: 'number',
        index: 'number',
        width: 80,
        sorttype: "float"},
    {
        name: 'status',
        index: 'status',
        width: 80,
        sorttype: "float"}
    \],
    caption: "Stack Overflow Example",
    // ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}
});

var names = \["id", "thingy", "blank", "number", "status"\];
var mydata = \[\];

for (var i = 0; i < data.length; i++) {
    mydata\[i\] = {};
    for (var j = 0; j < data\[i\].length; j++) {
        mydata\[i\]\[names\[j\]\] = data\[i\]\[j\];
    }
}

for (var i = 0; i <= mydata.length; i++) {
    $("#grid").jqGrid('addRowData', i + 1, mydata\[i\]);
}

/*
$("#grid").jqGrid('setGridParam', {onSelectRow: function(rowid,iRow,iCol,e){alert('row clicked');}});
*/
$("#grid").jqGrid('setGridParam', {ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}});][1]
Krish
  • 489
  • 2
  • 8
  • 28

1 Answers1

0

The option colNames contains array of HTML strings which will be placed in the column header. So you can use <br/> for example inside the strings. One more answer describes how one can use wrapping in the column headers.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • I don't want to break or wrap, i want to bind two string in header also with respective to the values in column also by one by one... How to achieve that ? – Krish Mar 31 '15 at 03:20
  • @Krish: You wrote in the question about "how to add two header values in one column" and wrote about `colName`. The array `colName` have **no relation to input data**. It shows just what will be place in the column header. It could be images for example. Thus one can't speak abou any kind of "binding". By the way the JavaScript code which you included in the question have no relation to the picture with headers and the code itself is very bad. I don't recommend you to use it. – Oleg Mar 31 '15 at 05:26