jqGrid view wrong record with multiselect

Question

I'm developing a grid using jqGrid to handle a set of records. In this grid the user can view a record's details where it shows aditional information and multiselect is set to true to process several records at once on the backend.

However there is a problem viewing records details where the wrong record is displayed.

Steps to reproduce the error:

1. select record
2. view selected row (on navigation bar)
3. close dialog
4. select a different record
5. view selected row (on navigation bar)

On step 5 the record shown is the record select on step 1.

You can reproduce the error using this link:

http://struts.jgeppert.com/struts2-jquery-grid-showcase/index.action

Here is the code I'm using to create the grid

<sjg:grid id="rtvReplicationJobsGrid"
                autowidth="true" 
                gridview="true"
                indicator="true"
                dataType="json"
                onCompleteTopics="onCompleteGrid"
                href="%{remoteurl}"
                pager="true"
                gridModel="data"
                rowList="10,15,20,50"
                rowNum="15"
                rownumbers="false"
                editinline="false"
                navigator="true"
                navigatorAdd="false"
                navigatorEdit="false"
                navigatorDelete="false"
                navigatorView="true"
                navigatorSearchOptions="{multipleSearch:true}"
                multiselect="true"
                multiboxonly="true"
                navigatorExtraButtons="{
                    'delete' : {  id: 'deleteButton',
                        icon: 'ui-icon-trash',  
                        title: 'Delete Jobs',
                        onclick: deleteJobsDialogFunction
                    },
                    seperator: {
                        title : 'seperator'  
                    },
                    replicated : {
                        id : 'replicatedButton',
                        title : 'Mark as Replicated', 
                        caption : 'Replicated', 
                        icon: 'ui-icon-check',
                        onclick: markAsReplicatedDialogFunction
                    },
                    replicate : {
                        id : 'replicateButton',
                        title : 'Mark for Replication', 
                        caption : 'Replicate', 
                        icon: 'ui-icon-play', 
                        onclick: startReplicationDialogFunction
                    }}">

Thanks in advance.

Answer 1

I'm not struts2 developer. Thus I can't gives you exact instructions how you can fix the problem in struts2. Nevertheless I will gives you some tips which I hope will allows you to fix the problem.

First of all it seems to me that you use jqGrid 4.6. It has the bug which I described here and here together with the corresponding workaround.

You can solve the problem in many ways. The first one: you can replace old jqGrid 4.6 with new free jqGrid 4.9.2. To do this you can replace the file ui.jqgrid.css from /struts2-jquery-grid-showcase/struts/themes/ui.jqgrid.css to the new version from free jqGrid, copy/replace jquery.jqGrid.min.js, jquery.jqGrid.src.js and jquery.jqgrid.min.map in the folder /struts2-jquery-grid-showcase/struts/js/plugins/ and replace grid.filter.js and grid.formedit.js from /struts2-jquery-grid-showcase/struts/js/plugins/ with empty files with the same names. Finally yu should replace grid.locale-en.js from /struts2-jquery-grid-showcase/struts/i18n/ to the corresponding frome from free jqGrid. In the way you will full replace jqGrid 4.6 used by struts2 to free jqGrid which has vary good upwards compatibility with jqGrid 4.6. It should fix the described problem.

Alternatively you can hold usage of old jqGrid 4.6, but to add navigatorViewOptions and navigatorEditOptions which specify beforeInitData which removes previously created View or Edit/Add form. The corresponding code could be something like

navigatorViewOptions="{
                recreateForm: true,
                beforeInitData: function () {
                    $('#viewmod' + this.id).remove();
                }
            }"

and

navigatorViewOptions="{
                recreateForm: true,
                beforeInitData: function () {
                    $('#editmod' + this.id).remove();
                }
            }"

One more alternative would be the usage of the following JavaScript code

$.jgrid = $.jgrid || {};
$.jgrid.edit = $.jgrid.edit || {};
$.jgrid.view = $.jgrid.view || {};
$.extend(true, $.jgrid.view, {
    recreateForm: true,
    beforeInitData: function () {
        $("#viewmod" + this.id).remove();
    }
});
$.extend(true, $.jgrid.edit, {
    recreateForm: true,
    beforeInitData: function () {
        $("#editmod" + this.id).remove();
    }
});

which defines default implementation of beforeInitData.