How to implement combobox in jqgrid

Question

I have implemented a combobox in jqGrid.The plugin which is used as follows:

I got a problem in this,as when I click on Add,I will get comboxbox but when I type in it and click on submit,I am not able to get the value what I type to jqGrid.I am attaching my jqgrid as follows:

    var listData = [
                         { id: "1",listName: "List1",level: "level1"},
                         { id: "2",listName: "List3",level: "level3"}
                     ],
    $listgrid = $("#list");
    $listgrid.jqGrid({
        datatype:'local',
        data: listData,
        colNames:['id','Name','Level'],
        colModel:[
                    {name:'id',index:'id',width:70,align:'center',sorttype: 'int',hidden:true},
                    {name:'listName',index:'listName', width:65,editable: true, formatter: 'select',
                        edittype: 'select', editoptions: {
                            value: 'list1:List1;list2:List2;list3:List3',
                            dataInit: function (elem) {
                                setTimeout(function () {
                                    $(elem).combobox();
                                    $( "#toggle" ).click(function() {
                                        $(elem).toggle();
                                    });
                                 }, 50);
                             },
                         }
                     },
                     {name: 'level', index: 'level', width: 105, align: 'center', editable: true,
                         edittype: 'select', editoptions: {
                             value: 'level1:level1;level2:level2;level3:level3'
                         }
                     }
                ],
                rowNum:10,
                rowList:[5,10,20],
                pager: '#list_pager',
                gridview:true,
                ignoreCase:true,
                rownumbers:true,
                sortname: 'id',
                viewrecords: true,
                sortorder: 'desc',
                caption: "Soft Skills",
                height: '100%',
                width:'750',
                editurl: 'test.aspx',
                gridComplete: function() {
                    $("#list").addClass("nodrag nodrop");
                    $("#list").tableDnDUpdate();
                }
             });
             $listgrid.jqGrid('navGrid', '#list_pager', {edit: true, add: true, del: false, search: false, refresh:false},{height:280,reloadAfterSubmit:false},{reloadAfterSubmit:false});

Please let me know how to get the value which I typed to the jqGrid. is it possible?if it is not possible,is there any comboxbox will work for jqgrid.I have search for other comboxbox and try to implement the following,which I am not able to work in jqGrid.

combobox

Is it possible to use this in jqGrid,Please can anyone Help Me.

Thanks in Advance

you will have to identify that combobox in some way, like an generated id. if you fork a fiddle would be much easier to understand — a0viedo, Dec 09 '12 at 13:49

Matt · Answer 1 · 2018-02-26T08:51:08.200

The demo link you provided does not show how it relates to jqGrid. And the second link you mentioned (http://source.dellsala.com/jquery-combobox/demo/) seem to be broken.

Hence, I am trying to show you an example based on the sourcecode in your question. The jqGrid component supports comboboxes. I modified your example according to the documentation from here. You can run the snippet and try it out, it is showing comboboxes now - if you click in one row of your choice it enables editing.

The onSelectRow: event and some settings were missing:

// see: https://free-jqgrid.github.io/getting-started/
// CDN used: https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid
$(function() {

  var listData = [
        {id: "1", listName: "List1", level: "level1"}, 
        {id: "2", listName: "List3", level: "level3"}
    ],
  $listgrid = $("#list");
  
  $listgrid.jqGrid({
    datatype: 'local',
    data: listData,
    colNames: ['id', 'Name', 'Level'],
    colModel: [{
        name: 'id', index: 'id',
        width: 70, align: 'center',
        sorttype: 'int',
        hidden: true, key: true
      },
      {
        name: 'listName', index: 'listName',
        width: 65, align: 'center',
        editable: true,
        formatter: 'select', edittype: 'select', stype: 'select',
        editoptions: {
          value: 'list1:List1;list2:List2;list3:List3',
          defaultValue: 'list1'
        }
      },
      {
        name: 'level', index: 'level',
        width: 105, align: 'center',
        editable: true,
        formatter: 'select', edittype: 'select', stype: 'select',
        editoptions: {
          value: 'level1:level1;level2:level2;level3:level3',
          defaultValue: 'level1'
        }
      }
    ],
    inlineEditing: {
      keys: true, defaultFocusField: "listName", focusField: "listName"
    },
    cmTemplate: {
      autoResizable: true, editable: true
    },
    iconSet: "fontAwesome",
    rowNum: 10, rowList: [5, 10, 20],
    pager: '#list_pager',
    gridview: true, ignoreCase: true, rownumbers: true,
    sortname: 'id', viewrecords: true,
    sortorder: 'desc',
    caption: "Soft Skills",
    height: '100%', width: '750'
    
    ,gridComplete: function() {
      $("#list").addClass("nodrag nodrop");
      //$("#list").tableDnDUpdate();
    }
    
    ,onSelectRow: function(rowid, status, e) {
      var $self = $(this),
          savedRow = $self.jqGrid("getGridParam", "savedRow");
      
      if (savedRow.length > 0 && savedRow[0].id !== rowid) {
        $self.jqGrid("restoreRow", savedRow[0].id);
      }
      
      $self.jqGrid("editRow", rowid, { focusField: e.target });
    }    
  }).jqGrid('navGrid', '#list_pager', 
    { edit: true, add: true, del: false, search: false, refresh: false }, 
    { height: 280, reloadAfterSubmit: false }, 
    { reloadAfterSubmit: false }
  );
});

<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Canonical jqGrid example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/jquery.jqgrid.min.js"></script>

<table id="list"></table>
<table id="list_pager"></table>
<div><br/><b>Click inside of any cell to activate combobox (edit mode).</b></div>

The values can be read as I explained in a different answer in Stackoverflow. Take a look here as well for more code samples.

How to implement combobox in jqgrid

1 Answers1