Reload Jqgrid by passing filter parameters

Question

It is basically to make the Jqgrid function receive parameters type(date: {} ), by the events .change and update the grid.

I have a grid that is loaded along with document, but need to implement some conditions and filters. For example, in .change of <select> pass the value of option as a parameter for url:'/Representantes/Cliente/listapelodao', to bring only those representatives' clients. Also I have other filters, such as sellers, dates, store and each time it is filled, I need to update the list (Jqgrid).

 var grid = $("#jqGrid").jqGrid({
        //url: '@Url.Action("Lista","Recurso", new { Area = "Gerenciamento" })',
        url:'/Representantes/Cliente/listapelodao',
        mtype: 'GET',
        datatype: 'json',

        colModel: [
            { label: 'Codigo', name: 'A1_COD', width: 80 },
            { label: 'Loja', name: 'A1_LOJA', width: 80 }, 
            { label: 'Nome', name: 'A1_NOME', width: 350 },
            { label: 'CNPJ', name: 'A1_CGC', width: 120 }, 
            { label: 'Municipio', name: 'A1_MUN', width: 150 },
            { label: 'Telefone', name: 'A1_TEL', width: 80 },

        ],

         viewrecords: true,
        rowNum: 20,
        rowList: [20, 40, 100],
        //height: "auto",
        height: 400,
        emptyrecords: "Nenhum Recurso",
        loadtext: "Buscando e carregando...",
        rowNum: 20,
        pager: "#jqGridPager",        
        loadonce: true
        });

Answer 1

I found an example in stackoverflow in English and adapted my need and is working.

 var url = "/Representantes/Cliente/listapelodao";

$(document).ready(function () {

    var representante = $("#sessaoRepresentante").val();
    if ($("#sessaoRepresentante").val() != "0") {
        $("#representante").prop("disabled", true);
        CarregaVendedores(representante)
    }


    var vendedor = $("#sessaoVendedor").val();
    var nome = $("#nome").val();

    CarregaRepresentante(representante);    

    var $table = $("#jqGrid");

    $table.jqGrid({
        url: url,
        datatype: 'json',
        mtype: 'GET',  
        postData: {
            representante: function () { return jQuery("#representante option:selected").val(); },
            vendedor: function () { return jQuery("#vendedor option:selected").val(); },
            nome: function () { return jQuery("#nome").val(); }
        }, 
       colModel: [
           { label: 'RECNO', name: 'RECNO', width: 80 },
           { label: 'Cliente', name: 'CLIENTE', width: 80 },
            { label: 'Loja', name: 'A1_LOJA', width: 80 },
            { label: 'Nome', name: 'A1_NOME', width: 350 },
            { label: 'CNPJ', name: 'A1_CGC', width: 120 },
            { label: 'Municipio', name: 'A1_MUN', width: 150 },
            { label: 'Telefone', name: 'A1_TEL', width: 80 },

        ],
         viewrecords: true,
            rowNum: 20,
            rowList: [20, 40, 100],
            //height: "auto",
            height: 400,
            emptyrecords: "Nenhum Recurso",
            loadtext: "Buscando e carregando...",
            rowNum: 20,
            pager: "#jqGridPager",
            loadonce: true

    });



    $('select#representante').on("change", function () {

        var id = $("#representante").val();
        $("#nome").val('');

        CarregaVendedores(id)
        //$table.trigger('reloadGrid');
        $("#jqGrid").setGridParam({ datatype: 'json', page: 1 }).trigger('reloadGrid');
    });

  $('select#vendedor').on("change", function () {

      //$table.trigger('reloadGrid');
      $("#nome").val('');
      $("#jqGrid").setGridParam({ datatype: 'json', page: 1 }).trigger('reloadGrid');
  });

  const inputEle = document.getElementById('nome');
  inputEle.addEventListener('keyup', function (e) {
      var key = e.which || e.keyCode;
      if (key == 13) { // codigo da tecla enter
          nome = this.value;

          $("#jqGrid").setGridParam({ datatype: 'json', page: 1 }).trigger('reloadGrid');
      }

  });


    function CarregaRepresentante(representante) {
        $.ajax({
            url: "/Gerenciamento/UsuarioExterno/SelecionarRepresentante",
            async: false,
            success: function (data) {

                $("#representante").empty();

                if (representante == 0) {
                    $("#representante").append('<option value="" disabled selected hidden>Selecione...</option>');
                }

                $.each(data, function (i, element) {
                    if (representante > 0) {
                        if (representante == element.codigoRepresentante) {
                            $("#representante").append('<option  value=' + element.codigoRepresentante + ' selected >' + element.nome + '</option>');
                        }
                    }
                    $("#representante").append('<option value=' + element.codigoRepresentante + '>' + element.nome + '</option>');
                });
            }
        });
    }

    function CarregaVendedores(representante) {
        $.ajax({
            url: "/Gerenciamento/UsuarioExterno/SelecionarVendedores",
            data: { representante: representante },
            async: false,
            success: function (data) {

                $("#vendedor").empty();

                $("#vendedor").append('<option value="0" disabled selected hidden>Selecione...</option>');

                $.each(data, function (i, element) {

                    $("#vendedor").append('<option value=' + element.codigoVendedor + '>' + element.nomeVendedor + '</option>');
                });

            }
        });
    }


});