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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Edit foreign key field with NumericTextBox

Thread ID:

Created:

Updated:

Platform:

Replies:

145360 Jun 18,2019 03:49 AM UTC Jun 27,2019 04:12 PM UTC jQuery 5
loading
Tags: ejGrid
lam
Asked On June 18, 2019 03:49 AM UTC

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 [Syncfusion]
Replied On 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. 


lam
Replied On 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?

Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On 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 


lam
Replied On 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

Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon