EasyUI Forum
April 27, 2024, 11:03:39 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
EasyUI Forum > General Category > EasyUI for jQuery > SUBGRID ROWEDITING - onClickCell not working
Pages: [1]
« previous next »
  Print  
Author Topic: SUBGRID ROWEDITING - onClickCell not working  (Read 1120 times)
rannacher
Jr. Member
**
Posts: 52


View Profile
« 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.

Code:
        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);
                }
            }
        }
Logged
jarry
Administrator
Hero Member
*****
Posts: 2262


View Profile Email
« Reply #1 on: April 28, 2023, 01:18:28 AM »
Please refer to this example.
Code:
<!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>
Logged
rannacher
Jr. Member
**
Posts: 52


View Profile
« Reply #2 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.
Logged
jarry
Administrator
Hero Member
*****
Posts: 2262


View Profile Email
« Reply #3 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
Logged
Pages: [1]
  Print  
« previous next »
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!