JqGrid: only last row can be selected after loading data with addRowData

Question

I used the addRowData function to load some data from an array. but when ever I want to select a row, just the last one is, no other one can be selected. I'm using the same code from my other page which works fine except I'm loading my data routed from my controller. Below is the code: `

    <script>
        var myJqGridData = @Html.Raw(Json.Encode(Model)); 
        var listOfColumnModels = [];
        var listOfColumnNames = [];
        for (var prop in myJqGridData[0]) {
            if (myJqGridData[0].hasOwnProperty(prop)) {
                listOfColumnNames= ["Code du Demandeur", "Nom", "Prenoms", "Adresse",  "Ville", "Code Postal",
                    "Province", "Téléphone 1", "Téléphone 2", "Téléphone 3", "Courriel 1", "Courriel 2",
                    "Courriel 3", "Date de Naissance", "Handicape?", "Référence", "Remarques", "Date d'Ouverture Dossier",
                    "Situation Matrimoniale", "Sexe", "Tranche de Revenu", "Occupation", "Scolarité", "Statut Légal",
                    "Communauté", "Source d'Information", "Source de Revenu", "Nom du Conseiller", "Prenoms du Conseiller", "Langue Maternelle"
                ];
                listOfColumnModels = [
                    { key: false, name: 'Code_Demandeur', width: 125, sortable: true, sorttype: "text", index: "Code_Demandeur" },
                    { key: false, name: 'Nom_Demandeur', width: 150, sortable: true, sorttype: "text",  index: "Nom_Demandeur" },
                    { key: false, name: 'Prenoms_Demandeur', width: 150, sortable: true, sorttype: "text", index: "Prenoms_Demandeur" },
                    { key: false, name: 'Adresse_Demandeur', width: 200, sortable: false, index: "Adresse_Demandeur" },
                    { key: false, name: 'Nom_Ville', width: 100,  sortable: true, sorttype: "text", index: "Nom_Ville" },
                    { key: false, name: 'CodePostal_Demandeur', width: 75, sortable: true,  sorttype: "text", index: "CodePostal_Demandeur" },
                    { key: false, name: 'Nom_Province', width: 100, sortable: false,  index: "Nom_Province" },
                    { key: false, name: 'Tel1_Demandeur', width: 100, sortable: false, index: "Tel1_Demandeur" },
                    { key: false, name: 'Tel2_Demandeur', width: 100, sortable: false, index: "Tel2_Demandeur" },
                    { key: false, name: 'Tel3_Demandeur', width: 100, sortable: false, index: "Tel3_Demandeur" },
                    { key: false, name: 'Courriel1_Demandeur', width: 150, sortable: false, index: "Courriel1_Demandeur" },
                    { key: false, name: 'Courriel2_Demandeur', width: 150, sortable: false, index: "Courriel2_Demandeur" },
                    { key: false, name: 'Courriel3_Demandeur', width: 150, sortable: false, index: "Courriel3_Demandeur" },
                    { key: false, name: 'Date_Naissance_Demandeur', width: 100,  sortable: true,  sorttype: "date", align: 'right', index: "Date_Naissance_Demandeur" },
                    { key: false, name: 'Handicape', width: 75, sortable: true, sorttype: "text", index: "Handicape" },
                    { key: false, name: 'Reference', width: 100, sortable: true, sorttype: "text", index: "Reference" },
                    { key: false, name: 'Remarques_Demandeur', width: 150, sortable: false, index: "Remarques_Demandeur" },
                    { key: false, name: 'Date_Ouverture_Dossier', width: 100,  sortable: true,  sorttype: "date", align: 'right', index: "Date_Ouverture_Dossier" },
                    { key: false, name: 'Nom_SituationMatrimoniale', width: 150,  sortable: true,  sorttype: "text", index: "Nom_SituationMatrimoniale" },
                    { key: false, name: 'Nom_Sexe', width: 75,  sortable: true,  sorttype: "text", index: "Nom_Sexe" },
                    { key: false, name: 'Nom_TrancheRevenu', width: 100,  sortable: true,  sorttype: "text", align: 'right', index: "Nom_TrancheRevenu" },
                    { key: false, name: 'Nom_Occupation', width: 150,  sortable: true,  sorttype: "text", index: "Nom_Occupation" },
                    { key: false, name: 'Nom_Scolarite', width: 150,  sortable: true,  sorttype: "text", index: "Nom_Scolarite" },
                    { key: false, name: 'Nom_StatutLegal', width: 150,  sortable: true,  sorttype: "text", index: "Nom_StatutLegal" },
                    { key: false, name: 'Nom_Communaute', width: 150,  sortable: true,  sorttype: "text", index: "Nom_Communaute" },
                    { key: false, name: 'Nom_SourceInformation', width: 150,  sortable: true,  sorttype: "text", index: "Nom_SourceInformation" },
                    { key: false, name: 'Nom_SourceRevenu', width: 150,  sortable: true,  sorttype: "text", index: "Nom_SourceRevenu" },
                    { key: false, name: 'Nom_Conseiller', width: 100,  sortable: true,  sorttype: "text", index: "Nom_Conseiller" },
                    { key: false, name: 'Prenoms_Conseiller', width: 100,  sortable: true,  sorttype: "text", index: "Prenoms_Conseiller" },
                    { key: false, name: 'Nom_Langue', width: 100,  sortable: true,  sorttype: "text", index: "Nom_Langue" },
                ];
            }
        }
        $(function () {
            CreateJQGrid(myJqGridData, listOfColumnNames, listOfColumnModels, '@(ViewBag.titreRapport)');
        });
        function CreateJQGrid(myArraydata, colNoms, colModeles, titre) {
            jQuery("#grid_ListeNomee").jqGrid({
                datatype: 'clientSide',
                colNames: colNoms,
                colModel: colModeles,
                rowNum: 100000,
                gridview: true,
                loadonce: true,
                autowidth: true,
                pager: $('#pager_ListeNomee'),
                rowList: [5, 10, 20, 50, 100000],
                rownumbers: true,
                height: '100%',
                width: 1000,
                emptyrecords: "Pas d'enregistrement à afficher",
                shrinkToFit: false,
                multiselect: false,
                sortname: 'Code_du_Demandeur',
                sortorder: "asc",
                loadComplete: function () {
                    $("option[value=100000]").text('Tout');
                },
                viewrecords: true,
                caption: 'Liste des personnes qui tirent leur revenu principal de: ' + titre
            });

            for (var i = 0; i < myArraydata.length; i++){
                var x = formatJsonDate(myArraydata[i].Date_Naissance_Demandeur);
                myArraydata[i].Date_Naissance_Demandeur = (Number(x.slice(-4))>1900)? x : "" ;
                x =formatJsonDate(myArraydata[i].Date_Ouverture_Dossier);
                myArraydata[i].Date_Ouverture_Dossier =  (Number(x.slice(-4))>1900)? x : "" ;
                myArraydata[i].Handicape =  (myArraydata[i].Handicape == true)? "OUI" : "" ;
                jQuery("#grid_ListeNomee").addRowData("1", myArraydata[i]);
            };
        };
        function formatJsonDate(jsonDate) {
            var nais = new Date(parseInt(jsonDate.substr(6)));
            var nais1 = new Date('1900-01-01');
            if (nais.getTime() < nais1.getTime())
                return '';
            return nais.toLocaleDateString();
        };
    </script>

<style type="text/css">
        .ui-jqgrid-btable .ui-state-highlight {
            background: #003366;
        }

        .ui-jqgrid table.ui-jqgrid-htable th.ui-th-column input,
        .ui-jqgrid table.ui-jqgrid-htable th.ui-th-column select {
            background-color: lightcyan;
        }

        .ui-jqgrid-bdiv {
            max-height: 500px;
        }
    </style>  
  

@model IEnumerable<FEC.Models.VentilationDemandeurs>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link href="../Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <link href="../Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
    <script src="../Scripts/i18n/grid.locale-en.js"></script>
    <script src="../Scripts/jquery.jqgrid.min.js"></script>
    
  <body>
    <table id="grid_ListeNomee"></table>
    <div id="pager_ListeNomee"></div>
</body>

Answer 1

Short answer; Make sure you only have a single column with 'key' attribute equals to true.

Answer 2

I think I have my response to my own answer and I experienced it this week-end. In fact I have an "OnSelect" event that is not shown in the snapshots above, and it tries to catch the value of the key from the selected row. But in my JqGrid, there is no key, all my columns have "key: false" thus it confuses the event.

My week-end experience was else where but it had the same behavior. This time I was populating data from a table from my Database that had 2 combined columns as primary key. Once populated, JqGrid could not deal with it whenever I don't mirror the same keys from my DB.