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

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

Reply | Reply with quote

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.

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

Reply | Reply with quote

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?

Reply | Reply with quote

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

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

Reply | Reply with quote