1

By default JQGrid supports sort-by-column. The user can sort the grid by clicking a column heading. The direction of the sort can also be toggled by clicking the same column heading again. This can be seen in the JQGrid demos.

I need to add sort-by-row to my grid. Ideally this would work in exactly the same way - the user can click a row heading to sort by the data in that row, and click again to toggle the direction of the sort.

I have tried to illustrate the sorting with an example.

Sorted by column 'Col-1':

       Col-1^ Col-2  Col-3
Row-1  A      B      C
Row-2  B      C      A
Row-3  C      A      B

Sorted by row 'Row-2':

       Col-3  Col-1  Col-2
Row-1  C      A      B
Row-2^ A      B      C
Row-3  B      C      A

How can I add this to my JQGrid?

nick
  • 1,189
  • 10
  • 28
  • 1
    Sorry, but it's difficult to understand such requirements without an example. You wrote that you want sort the grid by click on the "row heading". What is the "row heading"? Why you need so strange behavior? An example is really required. – Oleg May 29 '12 at 09:33
  • In theory: You'll have to bind a click function to each row head. It is the first td in each row. Now, you'll have to recreate the grid after you have sorted the column model by name (asc or desc). – U.P May 29 '12 at 10:07
  • @Oleg - I have added an example – nick May 29 '12 at 10:21
  • @UmairP - that is an option, but I had hoped to find an easier way than doing all the work outside of JQGrid – nick May 29 '12 at 10:23
  • Sorry, nick, but the example which you posted has absolute no value. If you write just A, B, C and "Col-1", "Col-1" and "Row-1", "Row-2" your requirement has no sense. You should just invert your matrix and use columns instead of the rows. A *real* example would be some *practical use case* where one see and advantage from the usage of rows as rows and not as columns. See [the question](http://stackoverflow.com/q/5383847/315935) as an real example which describes the needs of variable number of columns. So could you describe your example more close to reality and without unneeded abstraction? – Oleg May 29 '12 at 10:35
  • @Oleg - the data i have does not make an easy example for a stackoverflow questions, but you can see a working grid here: http://bacteria.microme.eu/matrix/index.html?test in this example I would like to add the ability to order the grid by selecting a pathway row – nick May 29 '12 at 10:44
  • @nick: OK! From the example it is much more clear for me. I try to reformulate: you need to display the results of genomes analyse. You have grids with many rows and columns. You have two types of grid contains: in the first type of the grid all columns (excepting the fist one which we will describe as "row header") contain integer value. In the second type of the grid all column (excepting the fist one) contain boolean values. It would be interesting temporary to *reorder* the columns based on some specified row. By clicking on the "row header" you want reorder the columns by its int content. – Oleg May 29 '12 at 10:57
  • @oleg - yes 'reorder the columns based on some specified row' is exactly my requirement – nick May 29 '12 at 11:02

1 Answers1

2

It seems to my that you can full implement your requirements by usage of onCellSelect callback, which fires when we click on the cell in the grid, and the usage of remapColumns method the change the order of the columns. To get the row data you can use getRowData method.

UPDATED: I recommend you additionally to take a look in the answer which shows how to use vertical headers in the grid. I explain it on the example of columns having checkboxes, but it works in exactly the same way with any content.

Community
  • 1
  • 1
Oleg
  • 217,934
  • 30
  • 386
  • 757
  • this sounds like a workable solution, I will give it a try and come back with my results. Thanks for your quick responses! – nick May 29 '12 at 11:11
  • @UmairP - i think this is roughly what you suggested, but remapping the columns sounds better than recreating the whole grid – nick May 29 '12 at 11:13
  • @nick: You are welcome! Let me know about your results. By the way one my very good friend from San Diego do also genome analyse. :-) – Oleg May 29 '12 at 11:28
  • getRowData returns row values by column id, how can I get the current column index using the column id? The remapColumns method requires indexes not ids. – nick May 29 '12 at 14:01
  • @nick: If you use good name conversion the problem will not exist. In common case you can get `colModel` parameter using `getGridParam` and look through all elements of the array. The index of `colModel` element you need for `remapColumns` the `name` property will be used by `getRowData`. Alternatively you can get just as `var gridDom = $("#grid")[0];` the DOM of ``. using `var row = gridDom.rows.namedItem(rowid);` you get DOM of the row and `row.cells[iCol]` gives you `
    ` by column index: `var cellText = $(row.cells[iCol]).text();`. So you can get cell content without `getRowData`.
     – Oleg May 29 '12 at 14:44
  • looks like getGridParam('colModel') should work for me, thanks again! – nick May 29 '12 at 16:20