JqGrid - How to configure custom editoptions based on * initial * column values?

Question

I am using the open source jqGrid plugin with EF4 and ASP.NET web forms. I need to set an input element in a row string of an editable grid based on the value of a column from the database. For example, the first line may contain DDL, the second line may contain a flag, etc.

I am trying to achieve this using custom_element and custom_values , for example:

 $("#grid1").jqGrid({ url: 'Default.aspx/getGridData', datatype: 'json', ... colModel: [ ... //contains the input type ('select', etc.) { name: 'InputType', hidden:true }, ... //may contain a string of select options ('<option>Option1</option>'...) { name: 'Input', editable:true, edittype:'custom', editoptions:{ custom_element: /* want cell value from InputType column here */ , custom_value: /* want cell value from Input column here */ } }, ... ] }); 

jqGrid docs say that I can call custom functions to set custom_element and custom_values , but I don't see how I can capture the values ​​of columns and pass them to my custom functions.

To set custom_values I noticed a nice Oleg solution using the list: parameter, but it seems that an additional Ajax call was involved. I want to avoid this, since I already have all the data that I need from the initial Ajax call for the grid.

In general, I need to do the following in inline editing mode:

• dynamically assign an input type from a DB value
• dynamically assign input values ​​(for DDL or checkboxes) from a DB string

I am also open to skipping using custom_element and custom_values , but then I still encounter the same problem of dynamically setting edittype and editoptions:{value:} parameters.

Any ideas on how to do this? Is there any other approach I should take?

UPDATE : Thank you for your efforts to help me. Upon request, here is a shortened example of my JSON response:

 {"d":[ {"Input":null,"InputType":"select"}, {"Input":"From downtown, proceed west on Interstate 70.", "InputType":"text"} ]} 

With this data, I want to show an empty selection in one line and a filled text field in the next line. Both will be editable.

SOLUTION I returned to this problem to find a solution that does not involve the use of custom_element and custom_values . Here is my solution (based on the accepted answer below) on changing edittype and editoptions :

 loadComplete: function () { var rowIds = $("#grid1").jqGrid('getDataIDs'); $.each(rowIds, function (i, row) { var rowData = $("#grid1").getRowData(row); if (rowData.InputType == 'select') { $("#grid1").jqGrid('restoreRow', row); var cm = $("#grid1").jqGrid('getColProp', 'Input'); cm.edittype = 'select'; cm.editoptions = { value: "1:A; 2:B; 3:C" }; $("#grid1").jqGrid('editRow', row); cm.edittype = 'text'; cm.editoptions = null; } }); } 

Nota Bene : One important thing for me was to return editoptions back to null after calling editrow . In addition, as Oleg noted in the comments, avoiding the use of custom elements allows me to enter the inputs of the date picker without any problems. This was important for my application, so I eventually agreed with Oleg's answer, but I still supported Walter's answer. If this is a bad form, I sincerely apologize. I just wanted to reward the solution that worked best for me.

Answer 1

If you use oblique editing, you call the editRow method somewhere directly in your code. Inside the editRow method, all parameters from colModel related to editing will be checked and used. Therefore, you can dynamically change any parameters , for example, editable , edittype or editoptions . The answer shows how you can change the editable property. In the same way, you can change any other properties.

If you want, you can set the type information and edit options inside the loadComplete event loadComplete . It has a data parameter that represents the source data sent from the server. This way you can expand data and other information and set editable , edittype or editoptions for any columns based on the information.

Answer 2

Try the following:

1. Define a handler for the grid in the SelectRow (onSelectRow_handler) event.
2. Inside the onSelectRow handler:
2.1. Set the variable with scope (lastRow) to the id parameter of the function.
2.2. Call jqGrid's editRow () function to put the grid in edit mode. This will call the function that you defined as the custom_element (myelem) renderer.
3. Inside myelem: call the jqGrid getRowData method to get the row data of the row you just selected for editing. From there, you can get the value in the ElementType column and execute your logic, which decides which element to display.

You will have to change my code a bit, since I have not tested it 100%. I checked that everything until step 3 works. I have not done any research on how you will code myvalue ().

 function renderGrid () { $("#grid").jqGrid({ datatype: "local", colNames: ['Id', 'ElementType', 'Name' ], colModel: [ { name: 'Id', index: 'Id', key: true, hidden: true }, { name: 'ElementType', index: 'ElementType', }, { name: 'FullName', index: 'FullName', editable: true, edittype: 'custom', editoptions: { custom_element: myelem, custom_value: myvalue} }], viewrecords: true, caption: "", autowidth: true, height: 'auto', forceFit: true , onSelectRow: onSelectRow_handler }); } var lastRow = null; function onSelectRow_handler(id) { if(id && id!==lastRow){ lastRow=id; } // editRow will send grid into edit mode which will trigger $("#grid").editRow(id, true); } function myelem(value, options) { var data = $("#grid").getRowData(lastRow); // the elementType column contains a key to // indicate what Input Element to render var elementType = data.ElementType; if (elementType == 'text') { var el = document.createElement("input"); el.type = "text"; el.value = value; } if (elementType == 'checkbox') { // etc } return el; } function myvalue(elem, operation, value) { if (operation === 'get') { return $(elem).find("input").val(); } else if (operation === 'set') { $('input', elem).val(value); } }