Please help loading combogrid columns inside onShowPanel event like attached example.
When clicking any product combobox, there should be a dropdown panel with 3 columns and pagination and this is not occuring for me.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Row Editing in DataGrid</h2>
<p>Click the row to start editing.</p>
<div style="margin:20px 0;"></div>
<div id="dg"></div>
<script type="text/javascript">
$('#dg').datagrid({
iconCls: 'icon-edit',
singleSelect: true,
onClickCell: onClickCell,
onEndEdit: onEndEdit,
columns: [[{ field: 'itemid', title: 'Item ID', width: 80 }
, {
field: 'productid',
title: 'Product',
width: 100,
formatter: function (value, row) { return row.productname; },
editor: {
type: 'combogrid', options: {
panelWidth: 450
, valueField: 'productid',
textField: 'productname',
required: true,
onShowPanel: function () {
$(this).combogrid({
columns: [[{ field: 'field1', title: 'field1', width: 80 }, { field: 'field2', title: 'field2', width: 80 }, { field: 'field3', title: 'field3', width: 80 }]]
, pagination: true
});
}
}
}
},
{ field: 'listprice', title: 'listprice', width: 80, align: 'right', editor: { type: 'numberbox', options: { precision: 2 } } }
, { field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', editor: { type: 'numberbox', options: { precision: 2 } } }
, { field: 'attr1', title: 'attr1', width: 250, editor: 'textbox' }
, { field: 'status', title: 'status', width: 60, align: 'center', editor: { type: 'checkbox', options: { on: 'P', off: '' } } }
]]
, data: [
{ "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" },
{ "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" }
]
});
function onClickCell(index, field) {
if (editIndex != index) {
if (endEditing()) {
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
var ed = $('#dg').datagrid('getEditor', { index: index, field: field });
if (ed) {
($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
}
editIndex = index;
} else {
setTimeout(function () {
$('#dg').datagrid('selectRow', editIndex);
}, 0);
}
}
}
var editIndex = undefined;
function endEditing() {
if (editIndex == undefined) { return true }
if ($('#dg').datagrid('validateRow', editIndex)) {
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onEndEdit(index, row) {
var ed = $(this).datagrid('getEditor', {
index: index,
field: 'productid'
});
row.productname = $(ed.target).combobox('getText');
}
</script>
</body>
</html>
