Cambiar la propiedad editable de una columna de texto jqGrid basada en los resultados de una autocompleta en otra columna

Question

Estoy usando jqGrid 4.4.0 con edición en línea. Por el bien de esta pregunta, mi grilla tiene cuatro columnas: una columna ID (SomeGridRowId), una columna de texto con una autocompletar jQuery (Autocompletar), una columna de texto de un solo carácter (SingleChar) y una columna oculta boolean (CanEditSingleChar). Necesito habilitar o deshabilitar la edición de la columna de un solo carácter en función del valor de la columna CanEditSingleChar. Esto funciona en las filas existentes usando onSelectRow y setColProp, pero por alguna razón no puedo hacer que se comporte correctamente en las filas recién insertadas. Si agrego una nueva fila y selecciono un valor de la función autocompletar, la columna SingleChar es siempre no editable. Pasé por el Javascript usando las herramientas para desarrolladores de Chrome e IE; los valores de las columnas y las propiedades se establecen correctamente, pero la propiedad de la columna SingleChar10 no refleja esto.

Me disculpo por el fragmento de código gigantesco, pero no quiero dejar nada.

$("#coolGrid").jqGrid({ 
    url: '@Url.Action("GetCoolGridData")', 
    postData: { 
     someId: function() { return $("#someId").val(); }, 
     otherStaticArg: function() { return 1; } 
    }, 
    datatype: 'json', 
    mtype: 'POST', 
    loadonce: true, 
    cellsubmit: 'clientArray', 
    editurl: 'clientArray', 
    scroll: true, 
    pager: $("#coolGridPager"), 
    rowNum: 200, 
    sortname: 'SomeGridRowId', 
    sortorder: 'asc', 
    viewrecords: true, 
    height: '100%', 
    colNames: ['SomeGridRowId', 'CanEditSingleChar', 'Autocomplete', 'SingleChar'], 
    colModel: [ 
     { name: 'SomeGridRowId', index: 'SomeGridRowId', hidden: true }, 
     { name: 'CanEditSingleChar', index: 'CanEditSingleChar', hidden: true }, 
     { 
      name: 'Autocomplete', 
      index: 'Autocomplete', 
      width: 220, 
      editable: true, 
      edittype: 'text', 
      editoptions: { 
       dataInit: function (elem) { 
        $(elem).autocomplete({ 
         source: '@Url.Action("GetSomeGridAutocomplete")', 
         minLength: 2, 
         select: function (event, ui) { 
          var rowId = getRowId($(this)); 
          if (ui.item) { 
           $("#coolGrid").jqGrid('setCell', rowId, 'CanEditSingleChar', ui.item.CanEditSingleChar, '', ''); 
           $("#coolGrid").jqGrid('setCell', rowId, 'Autocomplete', ui.item.label, '', ''); 
           setSingleCharEditMode(rowId); 
          } 
         } 
        }); 
       } 
      } 
     }, 
     { 
      name: 'SingleChar', 
      index: 'SingleChar', 
      width: 10, 
      editable: true,  //default to true, most are editable 
      edittype: 'text' 
     } 
    ], 
    onSelectRow: function (clickedRow) { 
     if (clickedRow && clickedRow != $.coolGridLastSelectedRow) { 
      $("#coolGrid").jqGrid('saveRow', $.coolGridSelectedRow, false, 'clientArray'); 
      $.coolGridLastSelectedRow = clickedRow; 
     } 
     setSingleCharEditMode($.coolGridLastSelectedRow); 
     $("#coolGrid").jqGrid('editRow', $.coolGridLastSelectedRow, true); 
    }, 
    afterInsertRow: function (rowid, rowdata, rowelem) { 
     if (rowid == 'new_row') {  //shown solely for completeness, pretty sure this is not the problem 
      var newRowIndex = $("#coolGridNewRowIndex").val(); 
      if (!newRowIndex) 
       newRowIndex = 1; 
      var newRowId = rowid + "_" + newRowIndex; 
      $("#new_row").attr('id', newRowId); 
      newRowIndex++; 
      $("#coolGrid").val(newRowIndex); 
      $("#coolGrid").jqGrid('setSelection', newRowId, true); 
     } 
    } 
}); 
$("#coolGrid").jqGrid('navGrid', '#coolGridPager', 
{ 
    add: false, 
    del: false, 
    edit: false, 
    search: false, 
    beforeRefresh: function() { 
     $("#coolGrid").jqGrid('setGridParam', { datatype: 'json' }); 
    } 
}); 
$("#coolGrid").jqGrid('inlineNav', '#coolGridPager', 
{ 
    edit: false, 
    add: true, 
    addtext: "Add", 
    save: false, 
    cancel: false, 
    restoreAfterSelect: false, 
    addParams: { 
     position: 'last', 
     addRowParams: { 
      keys: true 
     } 
    } 
}); 

Y la función setSingleCharEditMode:

function setSingleCharEditMode(rowid) { 
    var rowData = $("#coolGrid").jqGrid('getRowData', rowid); 
    if (rowData.CanEditSingleChar === "false") { 
     $("#coolGrid").jqGrid('setColProp', 'SingleChar', { editable: false }); 
    } else { 
     $("#coolGrid").jqGrid('setColProp', 'SingleChar', { editable: true }); 
    } 
} 

He probado una gran cantidad de cosas, de ánima rayada a través de un montón de otras cuestiones así, googled como locos .... todo fue en vano. He recurrido a sacarme el pelo. ¿Cómo puedo controlar la propiedad editable de una columna después de un autocompletar select en otra columna, todo en una nueva fila?

EDITAR
Tengo un working example up here, por fin. Si agrega una fila y luego selecciona "Atípico *" en la columna Autocomplete, puede reproducir este comportamiento.

Answer 1

Sin un ejemplo real, es difícil saber por qué las filas recién agregadas no se pueden editar. Además, es bastante difícil juntar un simple ejemplo de trabajo (por ejemplo, en jsfiddle o jsbin) debido a jqGrid y otras dependencias.

Algunas preguntas después de mirar a través de su código que podría ayudar (o podría ser nada nuevo a lo que ya ha probado):

• addRow - ¿Cómo agregar una fila, utilizando el addRow function? ¿Funciona todo lo demás "relacionado con jqGrid" con las filas recién agregadas, es decir, se inicializa correctamente? Tuve algunos problemas con ese tipo de problema al usar datatables.

• Identificación de fila correcta/única? - ¿Ha comprobado que el rowid es único para filas nuevas y que su código se ejecuta con el código correcto (es decir, el ID de la nueva fila)? ¿Pusiste console.log declaraciones en setSingleCharEditMode para ver qué está pasando (solo para estar seguro, dijiste que ya habías revisado el código)?

  Usted podría estar estableciendo la propiedad editable de una célula en otra fila (Pensando en ello: esto no puede ser que, como la célula debe ser editable por defecto y el establecer explícitamente a no ser editable por su código .). Cambie el color de la fila junto con la propiedad editable para ver fácilmente en qué celda/fila se está trabajando.

• ¿Trabajando de forma predeterminada? - Como el valor predeterminado de editable es true: ¿ha intentado deshabilitar setSingleCharEditMode y ver que la celda es editable de forma predeterminada? Tal vez el problema no es su evaluación, sino la adición de la fila en sí misma?

• ¿Tipo correcto? - En setSingleCharEditMode prueba el valor de columna para strict equality con la cadena "falso". ¿Está seguro de que los valores tienen el mismo tipo para líneas existentes y nuevas (deberían serlo, ya que son cadenas y se analizan a través del mismo código jqGrid: getRowData)? supongo que ya tiene console.log ged ampliamente en que la función de ver lo que está pasando con el id pasado y la comparación que establece la propiedad editable‽

Espero que esto ayude un poco para encontrar el problema. Como dije, es realmente difícil depurar sin un ejemplo de trabajo. Es posible que desee poner uno en alguna parte.

[Editar tras ejemplo de trabajo]

primero que veo es, que si selecciona "Trastorno maníaco atípica" en una fila editable existente, se aplica el mismo comportamiento. Además: funciona la adición de filas editables (algo bipolar). Esto no parece ser un problema de "nueva fila" vs. "fila existente". Es más como un problema con las filas editables que cambian a no editables.

Mi conjetura es que esto está sucediendo:

1. va a añadir una nueva fila, columna SingleChar se puede editar de forma predeterminada, por lo que se muestra la <input>.
2. Evalúa la respuesta del servidor y establece la columna en editable : false en el controlador de autocompletar select.
3. anula la selección de la fila y jqGrid revierte todas las filas luego editables, por lo que no toca SingleChar, porque se cree que SingleChar no tiene que restablecerse a su estado inicial ..

¿Estoy teniendo sentido?

Pruebe la configuración editable a false después de que jqGrid restablezca la fila o elimine el <input> usted mismo.