Problem with DataGrid Virtual Scroll View with Detail Rows

[jgautier]

Hi,

I try to use DataGrid Virtual Scroll View with Detail Rows, like in demo, but "datagrid-row-detail" divs are empty.

My code to load datagrid :

Code:

$('#dgstats_pdf').datagrid({
     
     	view:scrollview,
     	pageSize:100,
     	autoRowHeight:false,
     	url:'inc_getpdfonjson.php',
     	queryParams: {
		clientonly: true
		},
     	
     	onBeforeLoad: function(param){
  			// some stuff here
  		},

     	detailFormatter: function(rowIndex, rowData){
		    console.log(rowData.compte);
                    return rowData.compte;
        },
        		   
     	onLoadSuccess:function(){     	
			// some stuff here     		
		},
		
});

The "console.log(rowData.compte)" command returns the data I expect (from the json file).
But "return rowData.compte;" seems to do nothing : "datagrid-row-detail" div of each row remains empty when expanding.

If you need more code to understand, please let me know.

Thanks a lot.

JG

[stworthy]

Please look at this example https://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=material-teal&dir=ltr&pitem=Virtual%20Scroll%20View(Detail%20Rows)&sort=asc

The 'detailFormatter' function should return the html of the row detail content. What is the data 'rowData.compte'?

[jgautier]

In my datagrid, I load data from remote script : inc_getpdfonjson.php (that returns json content).

rowData.compte is one of the values returned by inc_getpdfonjson.php in json format :
For ex. : "compte":"<a href=\"edit_user.php?id=6\">jgautier<\/a>"

When I load the datagrid, detailFormatter function fires for each rows and values are ok : console.log(rowData.compte) returns the right value (for ex. "<a href="edit_user.php?id=6">jgautier</a>").

But there's nothing in the datagrid-row-detail div of the row, details div are empty, like that :

Code:

<div class="datagrid-row-detail"> </div>

Thanks for your answer.

JG

[stworthy]

Please look at this example http://code.reloado.com/elejew4/edit#preview. It works fine.

[jgautier]

Thanks for your answer.

I found the problem : if I use frozen options on "thead" of the data-grid, "datagrid-view2" div is on a wrong position (I don't understand why...).

Here's part of my original code :

Code:

	<table id="dgstats_pdf" style="width:1000px;height:558px">
        <thead data-options="frozen:true">

Here's the result :

Details ("testaa (Shop)") appear on a wrong place, at the right of the data-grid.

If I remove "data-options="frozen:true"" from thead, everything is fine.

Perhaps It can be usefull to know...

Thanks again for helping me.

JG