4

In our application we are using a jqGrid which supports hiding and reordering of columns. When the columns are hidden or reordered we want to store the new settings into our database. But to do this we somehow need to capture the hiding or reordering event. Or possibly to capture when the colModel changes.

Is there any way to capture and handle these events?

Thanks.

jgosar
  • 2,469
  • 1
  • 16
  • 14

2 Answers2

4

You can use 'done' event of the columnChooser. Here is an example:

var grid = $("list");
grid.navButtonAdd(
    '#pager',
    {caption:"", buttonicon:"ui-icon-calculator", title:"Column choose",
     onClickButton: function() {
         grid.jqGrid('columnChooser',
                     {
                         "done": function(perm) {
                             if (perm) {
                                 this.jqGrid("remapColumns", perm, true);
                             }
                             // here you can do some additional actions
                         }
                     });
     }
});

UPDATED: If you define sortable option as

sortable: {
    update: function (permutation) {
        alert("sortable.update");
    }
}

and not as sortable:true you will receive the notification about the new order of columns. See the source code of jqGrid for details. The array permutation with integers has the same meaning as in remapColumns functions (see my old answer for details).

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thanks for the tip, but we are not using columnChooser, but a combination of setColumns for hiding and sortable(column reordering) for sorting. Your tip helped me find the appropriate event for setColumns which is called afterSubmitForm. But for column reordering i can't find anything in the wiki. – jgosar Jan 04 '11 at 13:37
  • @jgosar: You welcome! To tell the trust I don't really understand how you implement column hiding and reordering. Moreother `columnChooser` do exactly what you describe and in a very comfortable way inclusive drag&drop support and so on. Probably appending the code to your question could explain all. For column reardering search for `remapColumns` (see http://stackoverflow.com/questions/3665692/change-the-sequence-of-jqgrid-columns/3666225#3666225). Examin of the source code of columnChooser https://github.com/tonytomov/jqGrid/blob/master/js/grid.jqueryui.js#L110 could probably help you. – Oleg Jan 04 '11 at 13:53
  • @jgosar: To see `columnChooser` live you can open the jqGrid demo page http://trirand.com/blog/jqgrid/jqgrid.html, choose on the left part of the page "New in version 3.6" and then "Column Chooser". In the navigation bar you can click on "Columns" button and play with it. You can use drag&drop for colomn reordering. – Oleg Jan 04 '11 at 13:59
  • for column reordering i'm simply using the built-in option "sortable": $("#list1").jqGrid({ sortable: true, – jgosar Jan 05 '11 at 09:20
  • @jgosar: I don't understand why you ask the question. If you have a solution why you ask the question? From your question is absolutely unclear who (the user or your software) and how you force hiding and reordering of the columns. There are many options but you don't post any code and not clear explain what you do. You don't explain till now how hiding work in your code. If you use `sortable:true` for reorder, then you can use `sortable.update` function as event (see https://github.com/tonytomov/jqGrid/blob/master/js/grid.jqueryui.js#L89). I updated the answer. – Oleg Jan 05 '11 at 10:56
  • Awesome answer Oleg! Thanks!! I had a quick question - I see how I can get the column order, but what if I chose to hide a column with the column chooser. Where does that event fire and how can I capture the column name and whether it is hidden or not hidden? Let me know if I should post up another question here on StackOverflow – FastTrack Aug 10 '12 at 13:19
1

You can capture column changes via the sortable parameter as mentinoed in Oleg's "update" above, or as discussed on jqGrid's message board.

However, please note that the array passed to your callback will be relative to the current column order. In other words, saving the array as is after moving multiple columns will not produce the desired results. See my answer on this other stackoverflow question.

Community
  • 1
  • 1
zishan
  • 171
  • 2
  • 2