1. Home
  2. Forum
  3. jQuery
  4. Add and edit rows to grid with external data using drop down lists

Add and edit rows to grid with external data using drop down lists

Hi,

I've setup an example of our scenario here: http://jsplayground.syncfusion.com/offj5cvf

We are trying to populate an empty grid with data using drop down lists linked to existing data sets. But when we add a new row (& save) the IDs are being shown instead of the display value. Also, when we open the row for editing the drop down doesn't retain the previously selected value.   

Is there any way to correct this?

Thank you

3 Replies
VN Vignesh Natarajan Syncfusion Team February 22, 2019 05:13 AM UTC

Hi Malcolm, 
 
Thanks for contacting Syncfusion support.  
 
Query: “ But when we add a new row (& save) the IDs are being shown instead of the display value. Also, when we open the row for editing the drop down doesn't retain the previously selected value” 
 
From your query, we understand that you are facing issue in ejGrid while binding the dataSource in form of text and value pair for dropdownlist. We have analyzed the reported issue and we are able to reproduce it in the provided sample. We have given support for ForeignKey column where, text will displayed in the cell and during CRUD operation its value will be considered. So we suggest you to achieve your requirement using foreignkey column feature of ejGrid.  
 
Ans Also while editing in the actionComplete event, we have selected the value based on row using selectItemByValue method of ejDropDownList 
 
Refer the below modified code example. 
 
<script type="text/javascript"> 
        jQuery(function ($) { 
            $("#Grid").ejGrid({ 
                //The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js' 
                dataSource: [], 
                toolbarSettings: { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] }, 
                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 
                allowPaging: false, 
                columns: [ 
                    { field: "ID", isPrimaryKey: true, headerText: "ID" }, 
                  { field: "Country", foreignKeyField: "Id", foreignKeyValue: "Name", headerText: "Country", dataSource: locations, editType: "dropdownedit" }, 
                  { field: "Company", foreignKeyField: "Id", foreignKeyValue: "Name", headerText: "Company", dataSource: companies, editType: "dropdownedit" } 
                ], 
                actionComplete: function (args) { 
                    if (args.requestType === 'add' || args.requestType === 'beginedit') { 
                        $('#GridCountry').ejDropDownList({ 
                            dataSource: locations, 
                            fields: { text: "Name", value: "Id" }, 
                            watermarkText: 'Select country', 
                            enableFilterSearch: true, 
                            width: '100%' 
                        }); 
 
                        $('#GridCompany').ejDropDownList({ 
                            dataSource: companies, 
                            fields: { text: "Name", value: "Id" }, 
                            watermarkText: 'Select company', 
                            enableFilterSearch: true, 
                            width: '100%' 
                        }); 
                        if (args.requestType == "beginedit") { 
                            var loc = locations.find(c=>c.Id == args.rowData.Country); 
                            var com = companies.find(c=>c.Id == args.rowData.Company); 
                            $('#GridCountry').ejDropDownList("selectItemByValue", com.Id); 
                            $('#GridCompany').ejDropDownList("selectItemByValue", com.Id); 
                        } 
                    } 
                } 
            }); 
 
 
        }); 
    </script> 
 
For your convenience we have modified the provide sample.  
 
 
Refer our UG Doc and online sample for your reference 
 
 
UG 
 
 
 
Note: in you sample you have not enabled isPrimaryKey for any of the available column. Kindly refer the below knowledge base document for importance of primarykey while performing CRUD operation.  
 
 
Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan 


MV Malcolm van Staden February 22, 2019 06:52 AM UTC

Excellent, thank you. That solves our problem.

And thank you for pointing out the primary key issue.

I just have one other question, is there a way to easily retrieve the records within the grid? I've tried to look through the UG (https://help.syncfusion.com/api/js/ejgrid) but can't seem to find which method to use?

VN Vignesh Natarajan Syncfusion Team February 25, 2019 11:24 AM UTC

Hi Malcolm, 
 
Thanks for the update. 
 
Query: "is there a way to easily retrieve the records within the grid?" 
 
From your query, we understand that you need to get the data from the ejGrid. We suggest you to use getCurrentViewData() method to retrieve current page records in Grid.  If you want to get entire dataSource, then you can use dataSource property from model.  
 
Refer the below sample 
 
 
Note: dataSource from model will return entire data only when it is local data. 
 
Refer our API documentation for your reference 
 
  
 

Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan  

 


Loader.
Up arrow icon