Jqgrid - Select for Group header with ajax Event?

Question

I have a JqGrid Table based in Trirand's Simple Grouping Demo . I made some changes to get a select in the group header of the Grid.

What I am trying to do is...when the value of the select in the group header changes send this new value to database through ajax call and the next time the JqGrid Table load this value shows by default in the select. (The value of the select is in the last column of the table and the Id of the record is in the first column).

I try to adapt what I found here it's similar to my question but it doesn't seem to work for what I want to do (Here is what I tried - JsFiddle).

 function Test() {
             $("table tbody").on('change', 'select', function (e) {
                 var currentSelect = $(this);
                 var grid = $('#lstSegPyme');
                 var id = $(e.target).closest('tr')[0].id;
                 var Codunicocli = grid.jqGrid('getCell', id, 'ccli');                  
                 if (currentSelect.is(".HEstado")) {
                     alert(id);
                 }
             });     
         }

UPDATE I figured out how to call the ajax event. It seems I misunderstood the checkbox implementation. Now I have something like this and it works!!!.

loadComplete: function() {
$("table tbody").on('change', 'select', function(e) {
  var currentSelect = $(this);
  var SelectValue = currentSelect.val();

  if (currentSelect.is(".HEstado")) {
    var id = $(this).closest('tr').nextUntil('tr.lstSegPymeghead_0').attr('id'); //Get Row Id
    var cco = $('#lstSegPyme').jqGrid('getCell', id, 'ccli');

    alert(cco); //ajax Code Here
  } 
});

The only thing I'm struggling now is... when reload the page and try to set the value for the select

I've tried this in the gridComplete function

 gridComplete: function () {
                    var i, group, cssClass,
                        headerIdPrefix = this.id + "ghead_",
                        groups = $(this).jqGrid("getGridParam", "groupingView").groups,
                        l = groups.length;

                    for (i = 0; i < 1/*l*/; i++) {
                        group = groups[i];

                       $(this).closest("tr").find("role="option" [value='"+2+"']").attr("selected", "selected") 

                    }
                }

But it seems I couldn't get the select. Is something wrong with this line? $(this).closest("tr").find("role="option" [value='"+2+"']").attr("selected", "selected")

score 0 · Accepted Answer · edited May 23 '17 at 12:34

Looking for some other things in Jqgrid I found a solution for my question. I found this answer from user @Oleg that helped me a lot.

I leave the example here if someone wanted to do something similar.

$("table tbody").on('change', 'select', function (e) {
  var currentSelect = $(this);
  var SelectValue = currentSelect.val();

if (currentSelect.is(".HEstado")) {
  var id = $(this).closest('tr').nextUntil('tr.lstSegPymeghead_0').next("tr").attr('id'); //Get Row Id
  var Codunicocli = $('#lstSegPyme').jqGrid('getCell', id, 'ccli');
  var idEstado = $('#lstSegPyme').jqGrid('getCell', id, 'estc'); //Estado guardado en BD

  alert(idEstado);

} //End If
});

Jqgrid - Select for Group header with ajax Event?

1 Answers1