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

[Malcolm van Staden]

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

[Vignesh Natarajan]

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.  

 

Sample: http://jsplayground.syncfusion.com/zwzf5dzo  

 

Refer our UG Doc and online sample for your reference 

 

Sample: https://js.syncfusion.com/demos/web/#!/bootstrap/grid/columns/foreignkeycolumn  

 

UG 

 

https://help.syncfusion.com/js/grid/columns#foreign-key-column  

 

https://help.syncfusion.com/api/js/ejdropdownlist#methods:selectitembyvalue  

 

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.  

 

KB: https://www.syncfusion.com/kb/2675/cant-edit-any-row-except-the-first-row-in-grid 

 

Please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan 

[Malcolm van Staden]

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?

[Vignesh Natarajan]

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 

 

Sample:    https://jsplayground.syncfusion.com/5xg10nhm  

 

Note: dataSource from model will return entire data only when it is local data. 

 

Refer our API documentation for your reference 

 

https://help.syncfusion.com/api/js/ejgrid#methods:getcurrentviewdata  

  

 

https://help.syncfusion.com/api/js/ejgrid#members:datasource  

Please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan