CODEWITHSUNDEEP
jqueryjqgridfree-jqgrid
Velu narasimman
Velu narasimman

Reputation: 613

How to insert custom rows in jqgrid and how to retain them on sorting columns?

In jqgrid grouping concept I am trying to replicate the main header of the grid under each grouped row. The intention is if we have a lengthy table, in order to know what is the column name, we have to scroll up to the top of the table. Also, the same for sorting the columns. This seems tedious.

You can see what am I trying here [ https://jsfiddle.net/8L6xmwcc/2/ ]. I cloned the main header with event handlers and inserted it under each grouped item in the grid.

The problem is when I sort a column using this newly created header, sorting happens but this new header disappears from the table. Is it possible to retain it and do the sorting from this newly created header consistently?

Also, If I click the multiselect check box in the newly created header it selects all the rows under the table. But I want to discard that event how can I do it? Please help me on this.

loadComplete:function(){

   var grouped_header = $(".fa-plus-square-o").parents("tr[id^='grid1ghead']");

   $(".fa-plus-square-o").click(function(){
      if(!grouped_header.next().hasClass("ui-jqgrid-labels"))
      {
         var cloned_header = $(".ui-jqgrid-labels").clone(true);      
         cloned_header.insertAfter(grouped_header)          ;
      }
   });
},

Upvotes: 2

Views: 447

Answers (1)

mike_t
mike_t

Reputation: 2691

The problem in your case is that everytime you click on sorting header, the content of the table reloads and loadComplete is called again. This renders the table again and effectively removes your custom headers.

what you need to do (apart from re-initializing the click handlers which you already do) is to re-append the headers to the sections that were clicked open previously. Also , when you clone, make sure you add :first selector only, or multiple instances will get copied to your clone.

This can be achieved with following code in loadComplete section:

    loadComplete:function(){
        console.log("loaded ....");
        /// add header to sections that are open
        $("tr[id^='grid1ghead']").each(function(){
          if($(this).next().css("display")!="none" && !$(this).next().hasClass("ui-jqgrid-labels")){
             var cloned_header = $(".ui-jqgrid-labels:first").clone(true);      
             $(this).after(cloned_header)    
          }
        })

        $(".fa-plus-square-o").click(function(){
          console.log("clicked it.");
          var grouped_header = $(this).parents("tr[id^='grid1ghead']");
          if(!grouped_header.next().hasClass("ui-jqgrid-labels"))
          {
             var cloned_header = $(".ui-jqgrid-labels:first").clone(true);      
             cloned_header.insertAfter(grouped_header)          ;
          }
        });

    },

For reference, your updated fiddle - https://jsfiddle.net/8L6xmwcc/4/

Upvotes: 1

Related Questions