EasyUI 1.4 ScrollView DetailFormatter Index

[graveytrain]

detailFormatter while using Scrollview losses index when scrollview reloads data.  it then restarts at 0, causes expandRow issues

Workaround is to add a unique ID to data and run the detailFormatter and sub table based on that ID.

[jarry]

Please visit this example http://www.jeasyui.com/tutorial/datagrid/datagrid28_demo.html. It works fine.

[graveytrain]

No that one works because you are calling putting the entire table in the detailFormatter.  If you are using for instance

return '<div style="padding:2px"><table id="tt-' + index + '"></table></div>';

then calling the function to create tt

$('#tt-' + index).datagrid()

Then it will not work because it has the incorrect index.  So thanks for the quick reply, I hope this better explains the issue.  the index in scrollview resets itself to 0.  I used logging to verify.

[jarry]

How do you use the 'detailFormatter' function? Please provide more code snippets you are used to demonstrate your issue.

[graveytrain]

So I use detail formatter to place a div, and I use expand row to call and get my data to fill the row.  but what I discovered if I put an alert in the onExpandRow is that the row index would start back at 0 when scrollview was in play. and it caused me some headaches.  finally I added a unique ID in my data which was a good work around but here is the offending code

detailFormatter: function(index, data){
                  
                  return '<div style="padding:2px"><table id="tt-' + index + '"></table></div>';
               },
               onExpandRow: function(index,row){
                  $('#tt-'+index).datagrid({
                     url:'./scripts/subcong.php?date='+$('#td').datebox('getValue')+'&nodeid='+row.nodeid+'&table='+table,
                     fitColumns:false,
                     singleSelect:true,
                     autoRowHeight:false,
                     height:'auto',
                     scrollsize:0,
                     columns:[[
                     {field:'nodeid',title:'Nodeid',width:127, sortable:true},
                     {field:'1',title:'1',width:45, styler:styler100200, sortable:true},
                     {field:'2',title:'2',width:45, styler:styler100200, sortable:true},
                     {field:'3',title:'3',width:45, styler:styler100200, sortable:true},
                     {field:'4',title:'4',width:45, styler:styler100200, sortable:true},
                     {field:'5',title:'5',width:45, styler:styler100200, sortable:true},
                     {field:'6',title:'6',width:45, styler:styler100200, sortable:true},
                     {field:'7',title:'7',width:45, styler:styler100200, sortable:true},
                     {field:'8',title:'8',width:45, styler:styler100200, sortable:true},
                     {field:'9',title:'9',width:45, styler:styler100200, sortable:true},
                     {field:'10',title:'10',width:45, styler:styler100200, sortable:true},
                     {field:'11',title:'11',width:45, styler:styler100200, sortable:true},
                     {field:'12',title:'12',width:45, styler:styler100200, sortable:true},
                     {field:'13',title:'13',width:45, styler:styler100200, sortable:true},
                     {field:'14',title:'14',width:45, styler:styler100200, sortable:true},
                     {field:'15',title:'15',width:45, styler:styler100200, sortable:true},
                     {field:'16',title:'16',width:45, styler:styler100200, sortable:true},
                     {field:'17',title:'17',width:45, styler:styler100200, sortable:true},
                     {field:'18',title:'18',width:45, styler:styler100200, sortable:true},
                     {field:'19',title:'19',width:45, styler:styler100200, sortable:true},
                     {field:'20',title:'20',width:45, styler:styler100200, sortable:true},
                     {field:'21',title:'21',width:45, styler:styler100200, sortable:true},
                     {field:'22',title:'22',width:45, styler:styler100200, sortable:true},
                     {field:'23',title:'23',width:45, styler:styler100200, sortable:true},
                     {field:'24',title:'24',width:45, styler:styler100200, sortable:true},
                     {field:'25',title:'offpeak',width:50, styler:styler200400, sortable:true},
                     {field:'26',title:'onpeak',width:46, styler:styler200400, sortable:true}
                  ]],

[jarry]

Please try to select the datagrid by class instead of id.

Code:

$('#tt').datagrid({
	data:rows,
	detailFormatter: function(index, row){
		return '<div style="padding:2px"><table class="dg"></table></div>';
	},
	onExpandRow: function(index, row){
		$(this).datagrid('getRowDetail',index).find('table.dg').datagrid({
			columns:[[
				{field:'nodeid',title:'Nodeid',width:127}
			]]
		})
	}
});

Or download the updated scroll view from http://www.jeasyui.com/extension/datagridview.php

[graveytrain]

That worked also.  thanks for the help.