Question

Is it possible to set a row on a fixed position? For example, we have now a total row, and we always want the total on top, after sorting etc.

Is there a plugin for this?

We have tried to do this in the onLoadComplete by redrawing the whole table like so:

var rowIDs = $(this).getDataIDs();
var rowID, columnID;
$(this).clearGridData(); 
for (rowID in rowIDs) {
  for (columnID in data.rows[rowID]) {
    $(this).addRowData(rowIDs[rowID], data.rows[rowID], (data.rows[rowID][columnID].first ? 'first' : null));
    break; // Only do this for the first column
  }
}

but that is bad for performance, we have thousands of rows.

after Oleg’s comment:

The total row is just a row from our dataset. The dataset has this format:

Columns: ‘Network’, ‘Clicks’, ‘Views’

data = [
  {
    'Network': {value:'Google'}, 'Clicks': {value:38392882}, 'Views':{value:3939922}
  },
  {
    'Network': {value:'Sanoma'}, 'Clicks': {value:177883}, 'Views':{value:39293}
  },
  ...
  ,
  {
    'Network': {value:'Total'}, 'Clicks': {value:993832732223}, 'Views':{value:3932293939}, 'first': true
  },
  ...

]
}

So we set in our datarow which row we want to have on top (‘first’:true).

By processing, we use that to set in on top of the table. Hopefully this is more understandable 🙂

Thanks in advance,

Eddy

Answer 1

The footer are placed in the div with the class “ui-jqgrid-sdiv” and it is placed typically below the div with the class “ui-jqgrid-bdiv” where the main grid contain are placed. So to move the footer on top of page you need to move the the footer div. Additionally you should place bottom border in the style which you need. The code could be like the following:

$('div.ui-jqgrid-sdiv').css({
    "border-bottom-style":"solid",
    "border-bottom-color":"#a6c9e2",
    "border-bottom-width":"2px"
}).insertBefore($('div.ui-jqgrid-bdiv'));

as the result you will receive

See the demo live here.