Datagrid scrollview preserve selected row

[davistom]

I am using a datagrid with scrollview on a large remote data table. I have successfully set it up and obtain the desired scrolling behavior. However, I am unable to obtain a desired "selected row" behavior when scrolling. Specifically, I use 'singleSelect'=true and when I select a row that is not contained in the initial page request, then scroll away from it sufficiently to force retrieval of a new page, the selected row state is lost. This is a problem because I want to use the row selection state to control other UI components. I have noted that the new page data request forces an "unselectAll" event but don't understand why because it seems appropriate for the datagrid to have a selected row even if the selection is not contained in the currently displayed scroll window (or more precisely, contained in the current page). It appears that if the selected row happens to be contained in the initial page request, it gets preserved across subsequent scroll induced page requests, and this is the behavior I would like to extend to all rows. Can someone please clarify the datagrid scrollview selected row behavior for me? Thanks.

[jarry]

You have to set the 'idField' property to indicate the key field name. The selected row will be remained when scrolling rows.

[davistom]

I set the idField option at datagrid initialization but I think I misconstrued and incorrectly described the behavior I observe. Following is another attempt to describe what I see.

My datagrid rows are retrieved via remote access to a large MySql data table. I use 50 for the pageSize parameter and the datagrid scrolling behavior is as expected. If I select a row on page 1, scroll to another page and then return to page 1 so that the selected row is exposed in the datagrid window, the behavior is also as expected. That is, the row selection is preserved and the selected row is highlighted.

However, when I scroll to and select a row deep in the data table, the behavior is not what I expect and want. Specifically, the selection is preserved if I scroll to a new page then return to the page which contains the selection but the selected row highlighting is not preserved. Shouldn't the selected row highlight be preserved?

[jarry]

When set the 'idField' property correctly, the selected row will be remained, no matter you scroll to what page. Please look at this example:
https://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=material&dir=ltr&pitem=Virtual%20Scroll%20View&sort=

[davistom]

At the end of this post, I have included a code snippet representing a jeasyui datagrid configuration. The webpage in which the snippet is incorporated accesses a MySql database table via php. The snippet is functionally complete except for the required head element style sheet/javascript links and the php server script which extracts/returns data from the database. The database table includes 4342 data records and all initialization, sorting and scrolling behavior is exactly as expected when no row selection is involved. When a row selection is made anywhere in the 4342 record data set and the resulting selection is examined, e.g. by observing $(this).datagrid(''getSelected') via Chrome Developer Tools, the correct data record is presented. However, if the selected record exists in a page deep within the data set, any scrolling or sorting event which requires a new data request to the server results in loss of the row selection, with the previous $(this).datagrid(''getSelected') row data presentation replaced by the string "id". In that case, the configured onLoadSuccess alert is triggered.

<div>
   <table id="burials-list-datagrid" style="width: 100%; height: 222px;">
      <thead>
         <tr>
            <th field="id" data-options="hidden: true">id</th>
            <th field="cid" data-options="hidden: true">cid</th>
            <th field="decedent" style="width: 35%;" data-options="sortable: true">Decedent</th>
            <th field="dob" style="width: 10%;">Date of Birth</th>
            <th field="dod" style="width: 10%;">Date of Death</th>
            <th field="cemetery" style="width: 35%;" data-options="sortable: true">Cemetery</th>
            <th field="collection" style="width: 10%;" data-options="sortable: true">Collection</th>
         </tr>
      </thead>
   </table>
</div>
<script>
   $(document).ready(function(){
      $('#burials-list-datagrid').datagrid({
         idField: 'id',
         multiSort: true,
         onLoadSuccess: function(data){
            var s = $(this).datagrid('getSelected');
            if(s == 'id') alert(s);
         },
         pageSize: 50,
         queryParams: {ajax: true},
         rownumbers: true,
         singleSelect: true,
         sortName: 'decedent',
         sortOrder: 'asc',
         striped: true,
         url: '<?php echo NHGW_URL, 'test.php';?>',
         view: scrollview
      });
   });
</script>