how to add the enter event when doing onchange in a combobox

Navigation
2

I have a combobox in the field "ship_via", the combobox appears when I click on the cell and then when I do enter the combobox disappears with the option selected, I think this enter is from the same jqgrid, what I want to do is that when selecting the combobox item (onchange event) the selected option remains in the cell, that is, the same as when doing enter, but in the onchange event, thanks for your help 

  var mydata = [
           { id: "1",  name: "test1", note: "note1", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
           { id: "2",  name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
           { id: "3",  name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
           { id: "4", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
           { id: "5",  name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
           { id: "6",  name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
           { id: "7",  name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
           { id: "8",  name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
           { id: "9",  name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
           { id: "10",  name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
           { id: "11", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
           { id: "12",  name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
    ],
       $grid = $("#grid1"),
       initDateEdit = function (elem) {
           $(elem).datepicker({
               dateFormat: 'dd-M-yy',
               autoSize: true,
               changeYear: true,
               changeMonth: true,
               showButtonPanel: true,
               showWeek: true
           });
       },
       initDateSearch = function (elem) {
           setTimeout(function () {
               $(elem).datepicker({
                   dateFormat: 'dd-M-yy',
                   autoSize: true,
                   changeYear: true,
                   changeMonth: true,
                   showWeek: true,
                   showButtonPanel: true
               });
           }, 100);
       },
       numberTemplate = {
           formatter: 'number', align: 'right', sorttype: 'number',
           editrules: { number: true, required: true },
           searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni'] }
       },
       editingRowId,
       myEditParam = {
           keys: true,
           oneditfunc: function (id) {
               editingRowId = id;
           },
           afterrestorefunc: function (id) {
               editingRowId = undefined;
           }
       };
    $grid.jqGrid({
        data: mydata,
        datatype: "local",
        colNames: ['Client',  'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
        colModel: [
            { name: 'name', index: 'name', align: 'center', editable: true, width: 65, editrules: { required: true } },
    
            { name: 'amount', index: 'amount', width: 75, editable: true, template: numberTemplate },
            { name: 'tax', index: 'tax', width: 52, editable: true, template: numberTemplate },
            { name: 'total', index: 'total', width: 60, template: numberTemplate },
            {
                name: 'closed', index: 'closed', width: 70, align: 'center', editable: true, formatter: 'checkbox',
                edittype: 'checkbox', editoptions: { value: 'Yes:No', defaultValue: 'Yes' },
                stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':Any;true:Yes;false:No' }
            },
            {
                name: 'ship_via', index: 'ship_via', width: 105, align: 'center', editable: true, formatter: 'select',
                edittype: 'select', editoptions: {
                    value: 'FE:FedEx;TN:TNT;IN:Intim',
                   /* dataInit: function (elem) {
                        setTimeout(function () {
                            $(elem).multiselect({
                                minWidth: 100, 
                                height: "auto",
                                selectedList: 2,
                                checkAllText: "all",
                                uncheckAllText: "no",
                                noneSelectedText: "Any",
                                open: function () {
                                    var $menu = $(".ui-multiselect-menu:visible");
                                    $menu.width("auto");
                                    return;
                                }
                            });
                        }, 50);
                    },*/
                    multiple: false,
                    defaultValue: 'IN'
                },
              stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':Any;FE:FedEx;TN:TNT;IN:IN' }
            },
            { name: 'note', index: 'note', width: 60, sortable: false, editable: true, edittype: 'textarea' }
        ],
        pager: '#pager',
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        sortname: 'id',
        sortorder: 'asc',
        viewrecords: true,
        gridview: true,
        height: "100%",
        editurl: 'clientArray',
        onSelectRow: function (id) {
            if (editingRowId) {
                $(this).jqGrid('restoreRow', editingRowId, myEditParam);
            }
            $(this).jqGrid('editRow', id, myEditParam);
        },
        caption: "Demonstrate the usage of jQuery UI MultiSelect Widget"
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<link href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" rel="stylesheet"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet"/>

 <table id="grid1"></table>
    
asked by elizabeth 10.05.2016 в 00:10
source

1 answer

1

I do not know if it's the best way, but here is a method to do it in two simple steps:

  • Add a handler for the events in the drop-down list. For this you can use dataEvents .
  • In the event handler change :
  • Find the ID of the file
  • Launches the data save event

    • The code would be something like this: 

        // AM - Aqui defines los controladores de eventos para la lista desplegable
    dataEvents: [
      // AM - el controlador para el evento onchange
      {  
        type: 'change',
        fn: function(e) {
          // AM - Obtén el id de la fila en la que se encuentra la lista desplegable
          var rowId = $(e.target).closest('tr').attr('id');
          // AM - Guarda los valores de la fila
          $grid.saveRow(rowId);
        }
      }
    ]

    And here is a demo of how the code would look (the changes are commented with // AM - to make them easy to find): 

    var mydata = [
  { id: "1",  name: "test1", note: "note1", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
  { id: "2",  name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
  { id: "3",  name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
  { id: "4", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
  { id: "5",  name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
  { id: "6",  name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
  { id: "7",  name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
  { id: "8",  name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
  { id: "9",  name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
  { id: "10",  name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
  { id: "11", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
  { id: "12",  name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
],
    $grid = $("#grid1"),
    initDateEdit = function (elem) {
      $(elem).datepicker({
        dateFormat: 'dd-M-yy',
        autoSize: true,
        changeYear: true,
        changeMonth: true,
        showButtonPanel: true,
        showWeek: true
      });
    },
    initDateSearch = function (elem) {
      setTimeout(function () {
        $(elem).datepicker({
          dateFormat: 'dd-M-yy',
          autoSize: true,
          changeYear: true,
          changeMonth: true,
          showWeek: true,
          showButtonPanel: true
        });
      }, 100);
    },
    numberTemplate = {
      formatter: 'number', align: 'right', sorttype: 'number',
      editrules: { number: true, required: true },
      searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni'] }
    },
    editingRowId,
    myEditParam = {
      keys: true,
      oneditfunc: function (id) {
        editingRowId = id;
      },
      afterrestorefunc: function (id) {
        editingRowId = undefined;
      }
    };
$grid.jqGrid({
  data: mydata,
  datatype: "local",
  colNames: ['Client',  'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
  colModel: [
    { name: 'name', index: 'name', align: 'center', editable: true, width: 65, editrules: { required: true } },

    { name: 'amount', index: 'amount', width: 75, editable: true, template: numberTemplate },
    { name: 'tax', index: 'tax', width: 52, editable: true, template: numberTemplate },
    { name: 'total', index: 'total', width: 60, template: numberTemplate },
    {
      name: 'closed', index: 'closed', width: 70, align: 'center', editable: true, formatter: 'checkbox',
      edittype: 'checkbox', editoptions: { value: 'Yes:No', defaultValue: 'Yes' },
      stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':Any;true:Yes;false:No' }
    },
    {
      name: 'ship_via', index: 'ship_via', width: 105, align: 'center', editable: true, formatter: 'select',
      edittype: 'select', 
      editoptions: {
        value: 'FE:FedEx;TN:TNT;IN:Intim',
        multiple: false,
        defaultValue: 'IN',
        // AM - Aqui defines los controladores de eventos para la lista desplegable
        dataEvents: [
          // AM - el controlador para el evento onchange
          {  
            type: 'change',
            fn: function(e) {
              // AM - Obtén el id de la fila en la que se encuentra la lista desplegable
              var rowId = $(e.target).closest('tr').attr('id');
              // AM - Guarda los valores de la fila
              $grid.saveRow(rowId);
            }
          }
        ]
      },
      stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':Any;FE:FedEx;TN:TNT;IN:IN' }
    },
    { name: 'note', index: 'note', width: 60, sortable: false, editable: true, edittype: 'textarea' }
  ],
  pager: '#pager',
  rowNum: 10,
  rowList: [5, 10, 20, 50],
  sortname: 'id',
  sortorder: 'asc',
  viewrecords: true,
  gridview: true,
  height: "100%",
  editurl: 'clientArray',
  onSelectRow: function (id) {
    if (editingRowId) {
      $(this).jqGrid('restoreRow', editingRowId, myEditParam);
    }
    $(this).jqGrid('editRow', id, myEditParam);
  },
  caption: "Demonstrate the usage of jQuery UI MultiSelect Widget"
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<link href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" rel="stylesheet"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet"/>

 <table id="grid1"></table>
        
    answered by 10.05.2016 в 18:46
    ajax response variable returns undefined in symfony Compare enum in java