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.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

142840 Feb 21,2019 02:49 PM UTC Feb 25,2019 11:24 AM UTC jQuery 3
loading
Tags: ejGrid
Malcolm van Staden
Asked On February 21, 2019 02:49 PM UTC

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


Malcolm van Staden
Replied On 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?

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

 


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