Reload data to textbox after jqgrid "reloadGrid" action - asp.net

Question

I use a modal form to update/create my records "reloadGrid" method enables the grid enter image description here to refresh from within the modal "save" bouton, but
1) my form below does not get updated.
2) the last selected row on the jqGrid table gets not selected.
I tried to manualy force the row to be selected with
jQuery('#grid').jqGrid('setSelection', selRowID, true);
but selected row returns null.
Below is the function that saves the updated record and is suposed to trigger the grid and the controls update:
//function SauvegarderMessage(IDMessage) {
function ModifierDemandeur() {
//console.log("Modifier");
var xCodeDdeur = $('#txtCode_Demandeur').val();
var xAddDdeur = $('#txtAdresse_Demandeur').val();
var xIDVille = $('#cbxVille_Demandeur').val();
var xIDProv = $('#cbxProvince_Demandeur').val();
var xCPDdeur = $('#txtCodePostal_Demandeur').val();
var xTel1Ddeur = $('#txtTel1_Demandeur').val();
var xTel2Ddeur = $('#txtTel2_Demandeur').val();
var xTel3Ddeur = $('#txtTel3_Demandeur').val();
var xCour1Ddeur = $('#Courriel1_Demandeur').val();
var xCour2Ddeur = $('#Courriel2_Demandeur').val();
var xCour3Ddeur = $('#Courriel3_Demandeur').val();
var xIDSitMat = $('#cbxSitMat_Demandeur').val();
var xIDSexe = $('#cbxSexe_Demandeur').val();
var xDteNais = $('#txtDteNaissance').val();
var xRevDdeur = $('#txtrevenu_demandeur').val();
var xIDOcc = $('#cbxOccupation_Demandeur').val();
var xIDScol = $('#cbxScolarite_Demandeur').val();
var xIDStatLegal = $('#cbxStatutLegal_Demandeur').val();
var xIDComm = $('#cbxCommunaute_Demandeur').val();
var xIDSceInfo = $('#cbxSourceInformation_Demandeur').val();
var xHandicape = $('#cbHandi').val();
var xRef = $('#txtReference_Demandeur').val();
var xRemDdeur = $('#Remarques_Demandeur').val();
$.ajax({
type: "POST",
url: "../Conseiller/UpdateDemandeurs",
data: {
Code_Demandeur: xCodeDdeur,
Adresse_Demandeur: xAddDdeur,
ID_Ville: xIDVille,
ID_Province: xIDProv,
CodePostal_Demandeur: xCPDdeur,
Tel1_Demandeur: xTel1Ddeur,
Tel2_Demandeur: xTel2Ddeur,
Tel3_Demandeur: xTel3Ddeur,
Courriel1_Demandeur: xCour1Ddeur,
Courriel2_Demandeur: xCour2Ddeur,
Courriel3_Demandeur: xCour3Ddeur,
ID_SituationMatrimoniale: xIDSitMat,
ID_Sexe: xIDSexe,
Date_Naissance_Demandeur: xDteNais,
Revenu_Demandeur: xRevDdeur,
ID_Occupation: xIDOcc,
ID_Scolarite: xIDScol,
ID_StatutLegal: xIDStatLegal,
ID_Communaute: xIDComm,
ID_SourceInformation: xIDSceInfo,
Handicape: xHandicape,
Reference: xRef,
Remarques_Demandeur: xRemDdeur,
},
dataType: "json",
success: function (data) {
//console.log(data)
//console.log(data.rows);
$('#modifierProfilModal').modal('hide');
if (data != null) {
jQuery('#grid').jqGrid('clearGridData')
.jqGrid('setGridParam', { data: data, datatype: 'json' })
.trigger('reloadGrid')
for (var i = 0; i < data.Data.records; i += 1) {
var selRowID = data.Data.rows[i].Code_Demandeur;
var selectedRowID = $('#btnModifierProfile').val();
if (selRowID == selectedRowID) {
//jQuery('#grid').jqGrid('setSelection', selRowID, true);
var selr = jQuery('#grid').jqGrid('getGridParam', 'selrow');
console.log('Ligne sélectionnée: ' + selr);
return;
}
}
}
},
error: function (err) { console.log(err); }
});
I tried editRow action to force row selection, I tried to set focus to the grid, nothing would do.

Answer 1

A work around would be to identify each field with the last selected element's ID and assign each control appropriate value using document.getElementById('controlID').value = some_json_returned_data;
But this still not solve the grid row selection issue and does not seem to be a "best practice" way to do.

Answer 2

Coding the "loadComplete" method of qgrid resolved both issue:
loadComplete: function () {
if ($('#btnModifierProfile').val() != "")
jQuery('#grid').jqGrid('setSelection', $('#btnModifierProfile').val());
},
Desired row is selected and related data populated in other controls.