Usando bootstrap select2 con forma JqGrid

Estoy tratando de implementar bootstrap select2 con formato jqgrid, pero parece que puede hacerlo bien.

en el colmodel de la statement jqgrid tengo:

{name: 'staff', index: 'staff', width: 31, formoptions: {elmprefix: '(*) '}, editable: true, editrules: {required: true}, edittype: 'select', editoptions: {value: staff, dataInit: function(element) { $(element).width(260).select2(); } } }, 

Las opciones están ahí y las clases de arranque se insertan en el elemento,

  <select id="staff" class="select2-offscreen FormElement" role="select" 

pero todo lo que obtengo es un espacio en blanco para el seleccionado.

Ver la imagen a continuación. enter image description here

¿Puede alguien decirme por qué sucede esto o decirme qué estoy haciendo mal?

Gracias.

No conocía el complemento select2 antes. Lo intenté y no encontré ningún problema. Supongo que tienes problemas con el ancho solo porque $(element).width(260).select2(); parámetro demasiado grande de la función de width en $(element).width(260).select2(); .

Las demostraciones: una sin Bootstrap y otra con la inclusión de Bootstrap 3.0.0 funcionan sin problemas. La selección se ve como en la imagen de abajo

enter image description here

Utilicé en la demostración

 formatter: "select", edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "Intime", dataInit: function(element) { $(element).width(122).select2({ // add "ui-widget" class to have the same font-family like in // jQuery UI Theme // add "ui-jqdialog" class to have font-size:11px like in other // items of jqGrid form dropdownCssClass: "ui-widget ui-jqdialog" }); } }, stype: "select", searchoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "Intime", dataInit: function(element) { $(element).width(122).select2({ // add "ui-widget" class to have the same font-family like in // jQuery UI Theme // add "ui-jqdialog" class to have font-size:11px like in other // items of jqGrid form dropdownCssClass: "ui-widget ui-jqdialog" }); } } 

y agregué el siguiente CSS para mejorar la visibilidad (en mi gusto personal)

 .ui-jqdialog .select2-container .select2-choice { height: auto; padding-top: 1px; padding-left: 0.2em; padding-bottom: 2px; line-height: 15px; } .ui-jqdialog .select2-container .select2-choice .select2-arrow b { background-position: 0 -4px; } .ui-jqdialog.select2-drop { padding: 0px; } .ui-jqdialog .select2-results .select2-result-label { padding: 2px; } 

Además, agregué más CSS en la demostración que usaba Bootstrap CSS:

 .ui-jqgrid table {border-collapse: separate} .ui-jqgrid .ui-pg-input, .ui-jqgrid .ui-pg-selbox {height: 17px} .ui-jqgrid .ui-pg-table {padding-bottom: 0} 

Intento usar select2 en la función dataInit directamente como lo hace (la diferencia es que uso una fuente de datos ajax), se ve bien pero no puede funcionar correctamente:

  1. el valor no puede enviarse al servidor.
  2. seleccione una fila -> editar, pero el select2 no inicia con el valor anterior.

Por fin, abandoné este método y trato de usar edittype:'custom'

 colModel:[ {name:'model_id',label:'mID', hidden: true, hidedlg: true, // the hidden model_id column search: false, // used for offer id info to select2 }, {name:'model',label:'model',width:150, editable:true, edittype:'custom', editoptions:{ custom_element: myselect2elem, custom_value: myselect2value, dataInit: myselect2init('180','chose model','search/servermodel','model_id','model'), }, editrules:{ edithidden: true, required: true, }, }, 

Definí tres funciones:

  • myselect2elem (valor, opciones) // init un elemento común
  • myselect2value (elem, operation, value) // get | establecer el valor del elemento
  • myselect2init (width, holder, url, opt, cel_name_id, cel_name) // init element use select2

detalles

 function myselect2elem(value, options) { var el = document.createElement("select"); el.value = value; return el; } function myselect2value(elem, operation, value) { if(operation === 'get') { return $(elem).val(); } else if(operation === 'set') { // this doesn't work, $(elem).value=value; // I don't know whether have side effect } } function myselect2init(width,holder,url,cel_name_id,cel_name){ var option = { width: width, placeholder: holder, ajax: { url: url, /* the other ajax configuration option that only selet2 used */ }, } return function(element) { $(element).children(".customelement").select2(option) // do the init 'set' operation that previous function should do selRowId = $(this).jqGrid ('getGridParam', 'selrow'), celId = $(this).jqGrid ('getCell', selRowId, cel_name_id); celValue = $(this).jqGrid ('getCell', selRowId, cel_name); if (celValue){ var newOption = new Option(celValue, celId, true, true); $(element).children(".customelement").append(newOption).trigger('change'); } } } 

Gracias por su pregunta al respecto, gracias a la respuesta de @Oleg. Quiero que mi respuesta pueda ayudar a otras personas