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>

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?

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.

Further examination indicates that a problem is occurring somewhere in the element width javascript calculations. the .datagrid-view2 div gets assigned zero width, so nothing but the panel header and empty content panel gets displayed. I can generate a display of the datagrid table by overriding the assigned .datagrid-view2 div width in css, i.e. with the css !important rule, but other widths get mangled in the process.

Apparently, there is some conflict between Wordpress css or javascript and the easyui counterparts but I cannot sort out what it is. If anyone with knwoledge about easyui datagrid element width calculations can suggest something, I would greatly appreciate it. Thanks.

I cannot seem to get datagrid to work in a Wordpress content page. The datagrid which appears on the page is just a blank panel header with an empty content area.

I am using the basic "Create datagrid from an existing table element, defining columns, rows, and data in html" example in the datagrid documentation, i.e. the three column "code, name, price" table example with both thead and tbody content explifitly declared in html. I have enqueued the required easyui css and javascript links and they load correctly in the browsed page. Additionally, other easyui plugins (e.g. tooltip, layout, accordion, tabs, etc.) function as expected when embedded in other page content in the same Wordpress site.

Careful examination of the page with embedded datagrid in chrome developer tools reveals no javascript errors and the easyui elements (i.e. the "panel datagrid" div and its descendants) are configured but the datagrid-view1 and datagrid-view2 table  cell elements are empty.

Am I overlooking  something about using datagrid in Wordpress?

Please ignore my reply above. Based upon the previous reply by jarry, I have managed to sort it out. Sorry for jumping off too early.

I don't think using the 'getData' method on the expanding node solves my problem. The problem appears to me to be that the children of the expanding node do not all have their 'target' property assigned, at least not when the 'onExpand' handler gets invoked. I have carefully examined/verified this via debugging using Chrome developer tools. In fact, the observed behavior when the 'onExpand' handler is invoked is that the first child has its 'target' property set properly but the second and all subsequent children have no assigned 'target' property. The result is that the first child, which as it happens is a folder, gets expanded recursively as expected but no subsequent folder nodes in the children list do.

Following is a code snippet representing the 'onExpand' handler with which the tree is initialized and a more detailed description of the node set and observed behavior -

onExpand: function(node){
   console.log(node.text);
   for(var i=0; i<node.children.length; i++){
       $('#places_tree').tree('expand', node.children.target);
        }
},                  }

The node being expanded is a folder node with 53 child nodes, eight of which are folders with children and 45 of which are leaf nodes. As it happens, the first of the 53 children is a folder containing 6 leaf node children, and the remaining seven folders are scattered throughout the 53 children list. When the state is trapped in the 'onExpand' handler, the first child node has its 'target' property assigned correctly but none of the other 52 children have a 'target' property assigned. The result of continuing execution is that the first child folder is expanded as expected but none of the remaining seven folders gets expanded, presumably because the 'node.children.target' parameter passed in the 'expand' method invocation loop is undefined for all but the first loop iteration.

Hopefully, this clarifies the issue. An alternative clarification may be the question - How can one recursively expand a folder and all of its descendants?

I am trying to implement some recursive behavior in an essyui tree while using the built in asynchronous loading mode. The overall purpose of the desired behavior is to control visibility of map features of a separate, non-easyui javascript object - a google map. Almost everything I am attempting to implement works as I expect, but I have one niggling problem. The problem reduces to the availability of the "target" property of the children of nested folder nodes when trying to recursively expand a tree branch. Following is a description of the implementation, expected behavior, observed behavior and some key debugging observations, with a concluding question.

I implement a tree using asynchronous loading from a hierarchical node data set with nested folders. The tree is initialized with check boxes which control the visibility of map features in a companion google map. If a folder is checked (or expanded while checked), subordinate folders should be expanded (to force loading) and checked. This is implemented by looping through and recursively expanding children, using the "expand" method with [child].target as parameter, in an OnExpand handler.  The problem is that when a folder which includes a mix of leaf nodes and multiple folder child nodes is expanded, only the first child folder gets expanded. Careful debugging reveals that only the first child folder has an assigned "target" property, so the "expand" attempt on the first child folder works as expected, but on the second and subsequent folder children it does nothing.

Question - On folder expansion/node data loading, when/how does the "target" property get assigned, or more to the point, when/how does the "target" property and associated DOM node become available to user code?

Thanks.

I am trying to use the tree component to control a non easyui object (a google map) and have a question about interaction of the cascadeCheck property and the onCheck event. Specifically, I would like to have the following behavior: check of a parent node causes check of its descendants (cascadeCheck) and triggers the onCheck event for parent and descendants. What I observe is that cascadeCheck works as expected (i.e. descendants get checked recursively) but the onCheck event gets triggered only for the parent node, i.e. the node which I check manually. Am I correctly interpreting the intended and actual behavior?