About the edittype:custom option I recommend you to read this and this old answers. It is important to use recreateForm:true setting to make custom edit functions custom_element and custom_value be called not ony once.
You don’t include any code in your question. Your description of the problem allows different interpretations how you implemented what you described. For example it is not clear for me how you change the parameter of raty-function to readonly:false. Do you use beforeShowForm event (see this as an example) or you use dataInit property of the editoptions. In both cases all should work in case of correct implementation.
One more thing which is uncler for me. Why you need to include id="mydiv" in the cell? Is your implementation allows inserting multiple ids with the same name? It would be a bug. If you can find the cell based on the cell contain or the row contain, that you can call .raty({start: cellvaue, readonly:true}) inside of loadComplete event handler and you don’t need to insert additional id attribute to the <td> element. The usage of afterInsertRow makes grid more slow, because it force to render the grid on adding every row and not only after all rows will be inserted in the grid (see gridview:true option).
UPDATED: After spending so time for writing comments and after you posted your code I modified the code to show how the raty-plugin could be integrated. As the results is the demo which looks like
I used inline editing instead of the form editing only because form editing not full support local editing, but I wanted to make the demo without any server components.
Like in your code I used double-click for the row editing. Here are the main code fragments:
var lastSel;
var grid = $("#list");
var initRaty = function(rowid) {
var ranking = grid.getCell(rowid,4); // the Ranking column has the index 4
// because we use rownumbers:true the index of the Ranking column will be 1 higher
$('#' + rowid +'> td:nth-child(5) > div').raty({
path:'http://www.ok-soft-gmbh.com/jquery.raty/1.0.1/img/',
start:ranking,
readOnly:true
});
};
grid.jqGrid({
// ...
colModel: [
// other column definition
{ name:'Ranking', editable:true, width: 100, title: false,
formatter: function(cellvalue, options, rowObject) {
// insert div needed for the raty plugin
// and insert a hidden span with the rating value
return '<div></div><span style="display: none;">'+cellvalue+'</span>';
}, unformat: function (cellvalue, options, cellobject) {
// get rating value from the hidden span
return cellobject.find("span").text();
}, edittype:'custom', editoptions: {
custom_element: function(value, options) {
var val = $(value);
var elem = $('<div id="'+options.id+'"/>');
setTimeout(function(){
elem.raty({
path:'http://www.ok-soft-gmbh.com/jquery.raty/1.0.1/img/',
start:(val.length>1? val[1].innerText: value)
});
}, 100);
return elem[0];
},
custom_value: function(elem) {
return elem.find("input").val();
}
}
}
],
editurl: 'clientArray',
loadComplete: function (data) {
var ids = grid.getDataIDs();
for(var i=0;i<ids.length;i++){
initRaty(ids[i]);
}
},
ondblClickRow: function(id, ri, ci) {
grid.jqGrid('editRow',id,true,null,null, 'clientArray', {}, initRaty);
},
onSelectRow: function(id) {
if (id && id !== lastSel) {
if (typeof lastSel !== "undefined") {
grid.jqGrid('restoreRow',lastSel);
var cell = $('#' + lastSel +'> td:nth-child(5)');
var spans = cell.find('span');
if (spans.length > 1) {
// if the lastSel row was not only selected, but also
// was in editing mode, get the hidden text with the ranking
var ranking = cell.find('span')[1].innerText;
cell.find('div').raty({
path:'http://www.ok-soft-gmbh.com/jquery.raty/1.0.1/img/',
start:ranking,
readOnly:true
});
}
}
lastSel = id;
}
},
// other jqGrid parameters
});
If you will use form editing and call editGridRow function instead of editRow you will need to use recreateForm:true option and use afterComplete or afterSubmit to call initRaty with the modified values (exactly like I use aftersavefunc parameter of editRow in my code example).