jqgrid -- custom element

attempt to get select2 or chosen widget working in add/edit form

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="http://ivaynberg.github.com/select2/select2-master/select2.js"></script>
<link rel="stylesheet" href="http://ivaynberg.github.com/select2/select2-master/select2.css">
<table id="grid"></table>
<div id="agent_grps_pager"></div>

<div id="myelem"> </div>

JavaScript

function myelem (value, options) {
  var elem = document.createElement("input");
  elem.id='mythang';
  elem.type="text";
  elem.value = value;
  return elem;
}

function myvalue(elem, operation, value) {
    console.log("getting hit in myvalue")
    if(operation === 'get') {
       return $(elem).find("input").val();
    } else if(operation === 'set') {
       $('input',elem).val(value);
    }
}


$("#grid").jqGrid({
    datatype: "local",
    autowidth: true,
    height: 250,
    colNames: ['Agent Name', 'agent id', 'Group Name', 'start date', 'end date'],
    colModel: [{
        name: 'agent_name',
        index: 'agent_name',
        editable: true,
        edittype:'custom',
        editoptions: {
            'custom_element': myelem, 
            'custom_value':myvalue
        } // <-- edit options  
    }, {
        name: 'agent_id',
        index: 'agent_id',
        hidden: true
    }, {
        name: 'group_name',
        index: 'group_name',
        editable: true,
    }, {
        name: 'start_date',
        index: 'start_date',
        editable: true,
    }, {
        name: 'end_date',
        index: 'end_date',
        editable: true,
    }],
    caption: "Agents",
    pager: 'agent_grps_pager',
    // ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}
});

$("#grid").jqGrid('navGrid', '#agent_grps_pager', {
    "search": false,
    "edit": false,
    "refresh": true,
    "add": true,
    "del": true,
    "view": false
}, {"closeAfterEdit": true, "width": 400}, 
   {"width": 400, "closeAfterAdd": true}, {}, {}, {});