datagrid with combobox and inline cell editing newbie question

EasyUI Forum

April 29, 2024, 01:49:25 AM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > datagrid with combobox and inline cell editing newbie question

Pages: [1]

« previous next »

Author

Topic: datagrid with combobox and inline cell editing newbie question (Read 926 times)

ub2709

Newbie

Posts: 3

datagrid with combobox and inline cell editing newbie question

« on: March 28, 2023, 10:11:06 PM »

Hi,
since some days I sit here and have for me a big problem, because I am new with html, php and easyui datagrid, so I will post a piece of an example and I hope you can help me, because I don´t find the answer how it works.
I want to create a grid which load it contents from a database, this works.In the datagrid one column has to be a combobox. This comboxbox has also be filled out of a db and hast to be selected with the correponding item from the rest of the other data. This works not. And I dont know how to tell the datagrid that, if the user click into cell or becomes the focus, that editing start without pressing a edit button.
Can you please!!! help me? I hope you understand my not so perfect english. Thanks a lot.
Here now the code:

<div id="container" class="easyui-layout" fit="true">
<div region="center">
<table id="dgCustomers" toolbar="#toolbarCustomer" class="easyui-datagrid" fit="true" singleSelect="true" fitColumns="true" rowNumbers="false" pagination="true" url="<?= site_url('welcome/getcustomers') ?>" pageSize="25" pageList="[25,50,75,100,125,150,200]" nowrap="false">
<thead>
<tr>
<th field="customerNumber" width="80">Customer Number</th>
<th field="customerName" width="100",editor:'text'>Name</th>
<th field="contactFirstName" width="100">Contact First Name</th>
<th field="contactLastName" width="100">Contact Last Name</th>
<th field="phone" width="50",align:'right',editor:{type:'numberbox',options:{precision:1}}>Phone</th>
<th field="addressLine1" width="100">First Address</th>
<th field="addressLine2" width="100">Second Address</th>
<th field="city" width="50">City</th>
<th field="state" width="50,align:'center',editor:{type:'checkbox',options:on:'P',off:''}}">State</th>
<th field="postalCode" width="50",align:'right',editor:'numberbox'>Postal Code</th>
<th field="country" width="50">Country</th>
</tr>
</thead>
</table>
</div>
</div>


	Logged

jarry

Administrator
Hero Member

Posts: 2262

Re: datagrid with combobox and inline cell editing newbie question

« Reply #1 on: March 29, 2023, 01:30:18 AM »

Please try to use the Cell Editing extension.

https://www.jeasyui.com/extension/datagrid_cellediting.php

Here is the example using the 'combobox' editor.

Code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Cell Editing in DataGrid - jQuery EasyUI Demo</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-cellediting.js"></script>
    <script type="text/javascript">
        var 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" }
        ];
        var comboData = [
            { "productid": "FI-SW-01", "productname": "Koi" },
            { "productid": "K9-DL-01", "productname": "Dalmation" },
            { "productid": "RP-SN-01", "productname": "Rattlesnake" },
            { "productid": "RP-LI-02", "productname": "Iguana" },
            { "productid": "FL-DSH-01", "productname": "Manx" },
            { "productid": "FL-DLH-02", "productname": "Persian" },
            { "productid": "AV-CB-01", "productname": "Amazon Parrot" }
        ];

        $(function () {
            $('#dg').datagrid({
                data: data,
                fitColumns: true,
                columns: [[
                    { field: 'itemid', title: 'Item ID', width: 100 },
                    {
                        field: 'productid', title: 'Product', width: 150,
                        editor: {
                            type: 'combobox',
                            options: {
                                data: comboData,
                                valueField: 'productid',
                                textField: 'productname'
                            }
                        }
                    },
                    { field: 'listprice', title: 'List Price', width: 100, align: 'right', editor: { type: 'numberbox', options: { precision: 1 } } },
                    { field: 'unitcost', title: 'Unit Cost', width: 100, align: 'right', editor: 'numberbox' },
                    { field: 'attr1', title: 'Attribute', width: 250, editor: 'text' }
                ]]
            }).datagrid('enableCellEditing').datagrid('gotoCell', {
                index: 0,
                field: 'productid'
            });
        });
    </script>
</head>

<body>
    <table id="dg" title="Cell Editing in DataGrid" style="width:700px;height:400px"></table>
</body>

</html>


	Logged