Title: SUBGRID ROWEDITING - onClickCell not working
Post by: rannacher on April 26, 2023, 12:52:18 PM
Hi, sorry one more request for help in the context of rowediting with a subgrid. appendrow and insertrow work fine and put the entire line on editing, with tabindex OK etc. just when I apply any standard version of onClickCell that usually works fine for a datagrid, with the subgrid it simply does not work. Problem is when clicking a cell only this cell goes into editing, but not the entire row as in append and insert. This causes then several problems incl. with tabindex. Thanks again in advance! Greetings from Vienna. BR Michael. function onClickCell(index, field)
{
if (editIndex != index)
{
if (endEditing())
{
// next lines simply not working, whatever datagrid reference I put...
// strange is even if I click row 1 and put f.e. "2" hard coded instead of index
// then the cell I clicked in row 1 gets in edit mode, and full line 2 is in edit mode
// just if I click cell in row 1 and put index 1 then just this one cell and not the full line gets in edit mode
$('#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);
}
}
}
Title: Re: SUBGRID ROWEDITING - onClickCell not working
Post by: jarry on April 28, 2023, 01:18:28 AM
Please refer to this example. <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.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>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-detailview.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>
<script>
var data = [
{ "productid": "FI-SW-01", "unitcost": 10.00, "status": "P", "listprice": 16.50, "attr1": "Large", "itemid": "EST-1" },
{ "productid": "K9-DL-01", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-2" },
{ "productid": "RP-SN-01", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Venomless", "itemid": "EST-3" },
{ "productid": "RP-LI-02", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Green Adult", "itemid": "EST-5" },
{ "productid": "FL-DSH-01", "unitcost": 12.00, "status": "P", "listprice": 58.50, "attr1": "Tailless", "itemid": "EST-6" },
{ "productid": "FL-DSH-01", "unitcost": 12.00, "status": "P", "listprice": 23.50, "attr1": "With tail", "itemid": "EST-7" },
{ "productid": "FL-DLH-02", "unitcost": 12.00, "status": "P", "listprice": 93.50, "attr1": "Adult Female", "itemid": "EST-8" },
{ "productid": "FL-DLH-02", "unitcost": 12.00, "status": "P", "listprice": 93.50, "attr1": "Adult Male", "itemid": "EST-9" },
{ "productid": "RP-SN-01", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Rattleless", "itemid": "EST-4" },
{ "productid": "AV-CB-01", "unitcost": 92.00, "status": "P", "listprice": 193.50, "attr1": "Adult Male", "itemid": "EST-10" }
];
var detailData = [{ "orderid": "1004", "linenum": "2", "itemid": "EST-12", "quantity": "1", "unitprice": "18.50" }, { "orderid": "1013", "linenum": "1", "itemid": "EST-12", "quantity": "1", "unitprice": "18.50" }, { "orderid": "1014", "linenum": "1", "itemid": "EST-12", "quantity": "1", "unitprice": "18.50" }]
$(function () {
$('#dg').datagrid({
title: 'DataGrid - DetailView',
width: 800,
height: 350,
singleSelect: true,
nowrap: false,
fitColumns: true,
data: data,
columns: [[
{ field: 'itemid', title: 'Item ID', width: 80 },
{ field: 'productid', title: 'Product ID', width: 100, sortable: true },
{ field: 'listprice', title: 'List Price', width: 80, align: 'right', sortable: true },
{ field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', sortable: true },
{ field: 'attr1', title: 'Attribute', width: 150, sortable: true },
{ field: 'status', title: 'Status', width: 60, align: 'center' }
]],
view: detailview,
detailFormatter: function (index, row) {
return '<div style="padding:2px;position:relative;"><table class="ddv"></table></div>';
},
onExpandRow: function (index, row) {
var ddv = $(this).datagrid('getRowDetail', index).find('table.ddv');
ddv.edatagrid({
singleSelect:true,
rownumbers:true,
columns: [[
{ field: 'orderid', title: 'Order ID', width: 200,editor:'textbox' },
{ field: 'quantity', title: 'Quantity', width: 100, align: 'right',editor:'numberbox' },
{ field: 'unitprice', title: 'Unit Price', width: 100, align: 'right',editor:'numberbox' }
]],
data:detailData
})
$('#dg').datagrid('fixDetailRowHeight', index);
}
});
});
</script>
</head>
<body>
<table id="dg"></table>
</body>
</html>
Title: Re: SUBGRID ROWEDITING - onClickCell not working
Post by: rannacher on April 29, 2023, 04:11:35 AM
Dear Jarry,
thanks for your reply, but in your answer nothing is editable.
And my problem refers to an editable subgrid.
Thx again!
Michael.
Title: Re: SUBGRID ROWEDITING - onClickCell not working
Post by: jarry on May 01, 2023, 06:25:14 PM
Please double click on the subgrid to begin editing a row. For more information about the editable datagrid, please look at https://www.jeasyui.com/extension/edatagrid.php
|