First post and I'm not sure of how to use the forum interface.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic ComboGrid - jQuery EasyUI Demo</title>
<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.css">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic ComboGrid as base for my example</h2>
<p>
Click the right arrow button to show the DataGrid.<br>
On hovering the datagrid, a tooltip should show on the left hand side.<br>
Is a bad example but is what I need help with. How to properly code it.
</p>
<div style="margin:20px 0"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 160px;">
<div style="margin-bottom:20px">
<select class="easyui-combogrid" style="width:100%" data-options="
panelWidth: 500,
idField: 'itemid',
editable: false,
textField: 'productname',
data:{'total':11,'rows':[
{'productid':'FI-SW-01','productname':'Koi','unitcost':10.00,'status':'P','listprice':36.50,'attr1':'Large','itemid':'EST-1'},
{'productid':'K9-DL-01','productname':'Dalmation','unitcost':12.00,'status':'P','listprice':18.50,'attr1':'Spotted Adult Female','itemid':'EST-10'},
{'productid':'RP-SN-01','productname':'Rattlesnake','unitcost':12.00,'status':'P','listprice':38.50,'attr1':'Venomless','itemid':'EST-11'},
{'productid':'RP-SN-01','productname':'Rattlesnake','unitcost':12.00,'status':'P','listprice':26.50,'attr1':'Rattleless','itemid':'EST-12'},
{'selected':true,'productid':'RP-LI-02','productname':'Iguana','unitcost':12.00,'status':'P','listprice':35.50,'attr1':'Green Adult','itemid':'EST-13'},
{'productid':'FL-DSH-01','productname':'Manx','unitcost':12.00,'status':'P','listprice':158.50,'attr1':'Tailless','itemid':'EST-14'},
{'productid':'FL-DSH-01','productname':'Manx','unitcost':12.00,'status':'P','listprice':83.50,'attr1':'With tail','itemid':'EST-15'},
{'productid':'FL-DLH-02','productname':'Persian','unitcost':12.00,'status':'P','listprice':23.50,'attr1':'Adult Female','itemid':'EST-16'},
{'productid':'FL-DLH-02','productname':'Persian','unitcost':12.00,'status':'P','listprice':89.50,'attr1':'Adult Male','itemid':'EST-17'},
{'productid':'AV-CB-01','productname':'Amazon Parrot','unitcost':92.00,'status':'P','listprice':63.50,'attr1':'Adult Male','itemid':'EST-18'}
]}
,
method: 'get',
columns: [[
{field:'itemid',title:'Item ID',width:80},
{field:'productname',title:'Product',width:120},
{field:'listprice',title:'List Price',width:80,align:'right'},
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
{field:'status',title:'Status',width:60,align:'center'}
]],
fitColumns: true,
label: 'Select Item:',
onLoadSuccess:function(data){
$(this).datagrid('getPanel').find('tr.datagrid-row').bind('mouseover',function(e){
var index = parseInt($(this).attr('datagrid-row-index'));
$(this).tooltip({trackMouse:false,showDelay:0,position:'left', content: data.rows[index]['attr1']});
})
},
labelPosition: 'top'
">
</select>
</div>
</div>
</body>
</html>
There is a multitude of problems with my code.
The mouse bind should no be used.
What I need is the proper code for my desired view of mouse over on the row.
Also fix the tooltip from falling under the datagrid. Changing the z order.
Thanks.
