We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Edit foreign key field with NumericTextBox

I have a Grid with a foreign key field. I would like to make this field ("quantity") be editable as a NumericTextBox. I have tried to use the EditTemplate but the field always empty. Could you help me fix it?

function loadListProduct(orderId) {
            var dataManagerProduct = ej.DataManager({
                url: "/api/Product",
                adaptor: new ej.WebApiAdaptor(),
                offline: true
            });
            var dataManagerOrderProduct = ej.DataManager({
                url: "/api/OrderProduct/" + orderId,
                adaptor: new ej.WebApiAdaptor(),
                offline: true
            });

            dataManagerProduct.ready.done(function (e) {
                $("#GridProduct").ejGrid({
                    dataSource: ej.DataManager({
                        json: e.result,
                        adaptor: new ej.remoteSaveAdaptor()
                    }),
                    toolbarSettings: {
                        showToolbar: true,
                        toolbarItems: ["search", "printGrid"]
                    },
                    editSettings: {
                        allowEditing: true,
                        allowAdding: true,
                        allowDeleting: true,
                        editMode: "normal"
                    },
                    pageSettings: { pageSize: 10 },
                    columns: [
                        //{ field: "productId", headerText: 'Id', visible: false },
                        { field: "productName", headerText: "Sản phẩm", isPrimaryKey: true },
                        {
                            field: "productId", headerText: "Số lượng ",
                            foreignKeyField: "productId",
                            foreignKeyValue: "quantity",
                            dataSource: dataManagerOrderProduct,
                            //editType: 'numericedit',
                            //defaultValue: 0,
                            //editTemplate: { create: "create", read: "read", write: "write" }
                            //validationRules: { range: [0, 1000] }
                            editTemplate: {
                                create: function () {
                                    return "<input>";
                                },
                                read: function (args) {
                                    return args.ejNumericTextbox("getValue");
                                },
                                write: function (args) {
                                    args.element.ejNumericTextbox({
                                        minValue: 0,
                                    });
                                }
                            }
                        },
                        { field: "quantity", headerText: "Sos luong", editType: 'numericedit' },
                    ],
                    //actionBegin: "gridProductBegin"
                });
            });            
        }

Thank you,
Lam

5 Replies

MP Manivannan Padmanaban Syncfusion Team June 19, 2019 04:06 PM UTC

 
Thanks for contacting Syncfusion Support. 
 
Query: I would like to make this field ("quantity") be editable as a NumericTextBox. I have tried to use the EditTemplate but the field always empty. Could you help me fix it? 
 
The above reported issue will occur because in the write function value is not defined for the NumericTextBox. Kindly refer the below code example, 
 
  <script type="text/javascript"> 
            $(function () { 
……………………………………………………… 
                 
                $("#Grid").ejGrid({ 
………………………………………………………………………. 
                    columns: [ 
                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 }, 
………………………………………………………………………….. 
                        { 
                            field: "EmployeeID", headerText: 'Employee ID', foreignKeyField: "EmployeeID", foreignKeyValue: "num", dataSource: window.employeeView, validationRules: { required: true }, 
                            editTemplate: { 
                                create: function () { 
                                    return "<input>"; 
                                }, 
                                read: function (args) { 
                                    var val = args.ejNumericTextbox("model.value"); 
                                    var obj = args.closest('.e-grid').ejGrid('instance'); 
                                    var rec = obj.getColumnByField('EmployeeID').dataSource.filter(function (a) { return a['num'] === val }); 
                                    return rec[0] ? rec[0]['EmployeeID'] : 1; 
                                }, 
                                write: function (e) { 
                                    var obj = e.element.closest('.e-grid').ejGrid('instance'); 
                                    var rec = obj.getColumnByField('EmployeeID').dataSource.filter(function (a) { return a['EmployeeID'] === e.rowdata["EmployeeID"] }); 
                                    e.element.ejNumericTextbox({ 
                                        value: rec[0].num || "" 
                                    }) 
                                } 
                            }, width: 90 
                        }, 
                        ……………… 
                    ] 
                }); 
 
            }); 
        </script> 
  
Refer the below link for sample, 
 
Also refer the below link for knowledge base help documentation, 
 
If you have further queries, please get back to us. 
 
Regards, 
Manivannan Padmanaban. 



LA lam June 22, 2019 03:31 AM UTC

Thank you so much for your support. It's working now. Just another question, when I added or updated the data from the parent grid, how to update it to the child grid as well?


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team June 24, 2019 03:28 PM UTC


We have checked your query and you can apply the same to the child Grid to perform Editing operation. We need some more additional information to achieve your requirement. Share us the following details. 

  1. Exact scenario you need to achieve.
  2. Screenshot/Video Demo about your requirement.


Regards, 
Farveen sulthana T 



LA lam June 26, 2019 01:55 PM UTC

I want to create an order template in which may have several products. When I edit an order record, I can add a new order product in this order. I checked in the database and the new order product is added successfully, however after I close the edit form, the child grid which shows the ordered product is not updated (still displays no record). 

Attachment: Screenshot_63d708c9.rar


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team June 27, 2019 04:12 PM UTC

Hi Lam, 

We need some more additional details to find the cause of the issue. Share us the following details. 

  1. Complete Grid code example(both in server and client side).
  2. Video Demo to replicate the issue.
  3. Have you handled the filter query on server side to filter the childGrid records to display on the Grid.

Regards, 
Farveen sulthana T 


Loader.
Up arrow icon