Change jqGrid text column editable property based on autocomplete results in another column

Question

I am using jqGrid 4.4.0 with inline editing. For the sake of this question, my grid has four columns: an identifier column (SomeGridRowId), a jQuery autocomplete text column, a single-character column (SingleChar) and a boolean hidden column (CanEditSingleChar), I need to enable or disable editing a single-character column on based on the value of the CanEditSingleChar column. This works for me on existing rows using onSelectRow and setColProp , but for some reason I can't get it to behave correctly on newly inserted rows. If I add a new row and select a value from autocomplete, the SingleChar column will always be unavailable for editing. I went through Javascript using the Chrome and IE developer tools; column and property values ​​are set correctly, but the SingleChar column editable property does not reflect this.

I apologize for the gigantic piece of code, but I do not want to leave anything.

 $("#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 } } }); 

And the setSingleCharEditMode function:

 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 }); } } 

I tried a whole bunch of things strung on a bunch of other questions similar to SO, and looked like crazy ... all to no avail. I resorted to pulling hair. How can I manage the editable property of one column after autocomplete select in another column, all in a new row?

EDIT
Finally, I got a working example here . If you add a row and then select any of the "Atypical *" in the Autocomplete column, you can reproduce this behavior.

Answer 1

Without an actual example, it’s hard to say why newly added lines cannot be edited. In addition, it is quite difficult to build a simple working example (for example, on jsfiddle or jsbin ) due to jqGrid and other dependencies.

A few questions after looking at code that might help (or maybe nothing new in what you have already tried):

• addRow . How to add a row using the addRow function? Everything related to jqGrid is related to newly added rows, i.e. Is it initialized correctly? I had some problems with such a problem using datatables .

• The correct / unique string identifier? . Have you verified that rowid is unique to rowid , and that your code is executing with the correct one (i.e. id from the newline)? Did you put the console.log statements in setSingleCharEditMode to find out what is going on (just so you say you already passed through the code)?

  Perhaps you set the editable property of the cell to another line (thinking about this: this cannot be, since the cell must be editable by default and explicitly configured so that its code does not edit). Change the color of the row along with the editable property to easily see which cell / row is being processed.

• Work by default? . Since the default value editable is true : have you tried disabling setSingleCharEditMode and seeing that the cell is editable by default? Perhaps the problem is not in your assessment, but in the appendix of the line itself?

• The right type? . In setSingleCharEditMode you check the column value for strict equality with the string "false". Are you sure that the values ​​are of the same type for existing and new lines (should be, because they are strings and receive parsing through the same jqGrid code: getRowData )? I assume that you already have console.log widely in this function to see what happens with the passed id and the comparison, which sets the editable property‽

Hope this helps find a little problem. As I said, it is really difficult to debug without a working example. You might want to put something down.

[Edit after working example]

The first thing I see is that if you select "Atypical manic mess" in the existing editable line, the same behavior will be performed. Also: adding editable lines (Bipolar something) works. This does not seem to be the problem of the “new line” and the “existing line”. More like a problem with editable lines that become unavailable for editing.

I assume this is happening:

• You add a new row, the SingleChar column is available by default, so <input> displayed.
• You evaluate the server response and set the editable : false column in the select autocomplete handler.
• Deselect the row, and jqGrid will return everything , then the editable rows , so it will not touch SingleChar , since it believes that SingleChar should not be reset to its initial state ..

Does it make sense?

Try setting editable to false after jqGrid reset the line or delete <input> yourself.