Edit foreign key field with NumericTextBox

[lam]

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

[Manivannan Padmanaban]

Hi Lam, 

 

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, 

https://jsplayground.syncfusion.com/se3zu5p2 

 

Also refer the below link for knowledge base help documentation, 

https://www.syncfusion.com/kb/8310/how-to-use-edit-template-to-edit-foreign-key-column  

 

If you have further queries, please get back to us. 

 

Regards, 

Manivannan Padmanaban. 

[lam]

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?

[Farveen Sulthana Thameeztheen Basha]

Hi Lam, 

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 

[lam]

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

[Farveen Sulthana Thameeztheen Basha]

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