How to populate data from jqGrid row to a textbox - asp.net-mvc-4

Question

I have a main jqgrid working with 5 columns out of 22 columns. I want to populate the 22 columns data in toolboxes (textbox, checkbox...) when a row is selected
Using a jqgrid subgrid all work perfectly.
So how to populate the data passed into the subgrid to my toolbox elements instead.
The other work arround that works, but does not satisfy me, is to call all needed data in the main grid hide the 22 columns and populate them in the boxes onselect. See whole code below:
jQuery(document).ready(function () {
$("#grid").jqGrid({
url: 'GetDemandeurs_Cons',
datatype: 'json',
mtype: 'GET',
colNames: [
'Code',
'Nom',
'Prenoms',
'Courriel',
'Adresse_Demandeur',
],
colModel: [
{ key: true, name: 'Code_Demandeur', index: 'Code_Demandeur' },
{ key: false, name: 'Nom_Demandeur', index: 'Nom_Demandeur' },
{ key: false, name: 'Prenoms_Demandeur', index: 'Prenoms_Demandeur' },
{ key: false, name: 'Courriel1_Demandeur', index: 'Courriel1_Demandeur' },
{ key: false, name: 'Adresse_Demandeur', index: 'Adresse_Demandeur' },
],
pager: $('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
height: '100%',
emptyrecords: "Pas d'enregistrement à afficher",
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "0"
},
autowidth: true,
multiselect: false,
sortname: 'Code_Demandeur',
sortorder: "asc",
viewrecords: true,
//caption: '<bListe des demandeurs</b>',
onSelectRow: function (ids) {
var data = $("#grid").getRowData(ids);
if (ids != null) {
console.log(data.Code_Demandeur);
console.log(data.Adresse_Demandeur);
$("#detailsDdeur")
.setGridParam({ url: "GetDdeurs_Cons_Subgrid?id=" + data.Code_Demandeur, page: 1 })
.setCaption("<b>Details pour : " + data.Prenoms_Demandeur + ' ' + data.Nom_Demandeur + "</b>")
.trigger('reloadGrid');
}
}
}).navGrid(pager, { edit: false, add: false, del: false, refresh: true, search: false });
jQuery("#grid").jqGrid('hideCol', ["Adresse_Demandeur"]);
$("#detailsDdeur").jqGrid
({
height: 100,
datatype: "json",
colNames: [
'Adresse_Demandeur',
'Ville',
'Province',
'Code Postal',
'Téléphone',
'Tel2_Demandeur',
'Tel3_Demandeur',
'Courriel2_Demandeur',
'Courriel3_Demandeur',
'ID_SituationMatrimoniale',
'Sexe',
'Date de Naissance',
'Revenu_Demandeur',
'ID_Occupation',
'ID_Scolarite',
'ID_StatutLegal',
'ID_Communaute',
'ID_SourceInformation',
'Handicape',
'Reference',
'Remarques_Demandeur',
'Photo'
],
colModel:
[
{ key: false, name: 'Adresse_Demandeur', index: 'Adresse_Demandeur' },
{ key: false, name: 'Ville', index: 'Ville' },
{ key: false, name: 'Province', index: 'Province' },
{ key: false, name: 'CodePostal_Demandeur', index: 'CodePostal_Demandeur' },
{ key: false, name: 'Tel1_Demandeur', index: 'Tel1_Demandeur' },
{ key: false, name: 'Tel2_Demandeur', index: 'Tel2_Demandeur' },
{ key: false, name: 'Tel3_Demandeur', index: 'Tel3_Demandeur' },
{ key: false, name: 'Courriel2_Demandeur', index: 'Courriel2_Demandeur' },
{ key: false, name: 'Courriel3_Demandeur', index: 'Courriel3_Demandeur' },
{ key: false, name: 'SitMat', index: 'SitMat' },
{ key: false, name: 'Sexe', index: 'Sexe' },
{ key: false, name: 'Date_Naissance_Demandeur', index: 'Date_Naissance_Demandeur' },
{ key: false, name: 'Revenu_Demandeur', index: 'Revenu_Demandeur' },
{ key: false, name: 'Occupation', index: 'Occupation' },
{ key: false, name: 'Scolarite', index: 'Scolarite' },
{ key: false, name: 'StatutLegal', index: 'StatutLegal' },
{ key: false, name: 'Communaute', index: 'Communaute' },
{ key: false, name: 'SourceInformation', index: 'SourceInformation' },
{ key: false, name: 'Handicape', index: 'Handicape' },
{ key: false, name: 'Reference', index: 'Reference' },
{ key: false, name: 'Remarques_Demandeur', index: 'Remarques_Demandeur' },
{ key: false, name: 'ID_Photo', index: 'ID_Photo' }
],
rowNum: 5,
rowList: [5, 10, 20],
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "0"
},
viewrecords: true,
sortorder: "desc",
}).navGrid('#OrderPager', { add: false, edit: false, del: false, search: false });
});

Answer 1

Add Code as given Below
colModel: [
{ name: 'Code_Demandeur', index: 'Code_Demandeur', width: 15, sorttype: "int", sortable: false, resizable: false,
formatter: function (cellvalue, options, rowObject) {
TxtRankName = "Code_Demandeur_" + options.rowId;
return txtBx(TxtRankName, cellvalue)
}
}
]
function txtBx(Id, Value) {
strTextBox = "<input type='text' id='" + Id + "'";
if (Value != "")
strTextBox = strTextBox + " title='" + Value + "' value='" + Value + "'";
strTextBox = strTextBox + " />";
return strTextBox;
}