jQuery EasyUI DataGrid combogrid editor

by Hilarius Doren

HTML

<h2>Datagrid with Combogrid editor</h2>

<p>We use a datagrid and a combogrid as editor for the servername. The combogrid has a big data list so we use the "Datagrid Scroll View" extension inside the combogrid.
    <p><strong>When double click on a row to go in the edit mode and open the combogrid panel,
how can we select the combogrid value on the datagrid view if this is not on the first scrollview page?
</strong>

<div class="easyui-panel" style="width:100%; height:400px; padding:12px;">
     <table id="dg"></table>
 </div>

CSS

</style> 
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> 
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> 
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-scrollview.js"></script>
<style>

JavaScript

$(function(){
    var dg = $('#dg').edatagrid();
    
    dg.edatagrid({
		title:"edatagrid with combogrid editor",
        fit:true, pagination: true, singleSelect:true,	striped:true, rownumbers: true, fitColumns: true,

        data:gridData,

		columns:[[
        	{field:'server', title:'servername', width:200,
				editor:{
					type:'combogrid',
					options:{
						prompt: 'Server ...',
					    rownumbers: true,
					    singleSelect:true,
					    autoRowHeight:false,
                        panelHeight: 160,

					    view:scrollview,
					    pageSize: 5,
					    
					    idField:'value',
					    textField:'text',

                        data: data,
					    columns:[[
				           {field:'text', title:'Servername', width: 250}
				        ]],
                        
				        loadFilter: function(data){
				        	//the following code is important to fix a problem with loadfilter!
 				            if ($.isArray(data)){
				               data = {
                                   total:data.length,
                                   rows:data
                               };
				            }                            
				            return data;
				         }
					}
				}	
			},
            {field:'comments',title:'Comment',width:240,editor:'text'}
      	]]       
        
	});
});

var gridData = [
{server: 'server 11',  comments: 'testdaten server 11'},
{server: 'server 21',  comments: 'testdaten server 21'},
{server: 'server 3',  comments: 'testdaten server 3'},
{server: 'server 14',  comments: 'testdaten server 14'}
];

var data = [
{value: '1', text: 'Server 1'},
{value: '2', text: 'Server 2'},
{value: '3', text: 'Server 3'},
{value: '4', text: 'Server 4'},
{value: '5', text: 'Server 5'},
{value: '6', text: 'Server 6'},
{value: '7', text: 'Server 7'},
{value: '8', text: 'Server 8'},
{value: '9', text: 'Server 9'},
{value: '10', text: 'Server 10'},
{value: '11', text: 'Server 11'},
{value: '12', text: 'Server 12'},
{value: '13',...