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. Image for the cookie policy date
close icon

Dropdown binding in ejGrid

I'm trying to insert dropdown in grid which is bound to external collection (other visual collection on screen), there is an error where not all collection items are loaded into dropdown.. I'm only seeing results for items that already present on screen..
To clarify:
- It is add/edit screen for Orders..
- On the same screen there is a ejGrid with Order details loaded for specific order (in batch mode)..
- In Order detail row there is a dropdown for Product and on screen is added query named Productscol..
- This works until edit mode, when dropdown is displayed for editing I can see SOME Products -> and only Products which are loaded into this and other Order details, so if I have an Order with Order Details for Banana, Apple, Milk and Butter, only that items will be shown in single dropdown respectively..
I saw other posts where people have an issue with binding to other collections from ejGrid but I'm unaware of status if this is resolved or..
Here is also my code for the grid:
myapp.AddEditOrdersSF.OrderDetails1_render = function (element, contentItem) {
// Template
var itemTemplate = $("
").attr('id', 'OrderDetails1')
// Append the div element to screen
// Productscol is a screen query, and I can see results in drpsr
var drpsr = contentItem.parent.screen.Productscol.data;
contentItem.value.oncollectionchange = function () {
if (itemTemplate.hasClass('e-grid')) {
dataSource: contentItem.value.data,
editSettings: {
allowEditing: true,
allowAdding: true,
allowDeleting: true
toolbarSettings: {
showToolbar: true,
toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel]
columns: [
{ field: "Id", isPrimaryKey: true, headerText: "ID" },
{ field: "Order.Order_no", headerText: 'Order' },
//items shown in dropdown are items loaded in other OrderDetails, not all collection which is "present" in drpsr
{ field: "Product.Name", headerText: 'Product', editType: ej.Grid.EditingType.Dropdown, datasource: drpsr },
{ field: "Product.Code", headerText: 'Product code' },
{ field: "Price", headerText: 'Product_price', width: 90 },
{ field: "Tax", headerText: 'Tax', width: 90 },
{ field: "Quantity", headerText: 'Quantity', width: 90 },
Is there a way to display all items in dropdown? Thanks!

2 Replies

DR dr October 24, 2015 07:50 AM UTC

Well, I had a typo in datasource for dropdown, it is "dataSource".. Now I can see Productscol in dropdown.. However, I'm not sure how to setup column to have normal display in non edit mode and to bind to specific value when in edit mode..
If I set it up like this, in "view" mode under column Product I don't see anything (it is blank), but in "edit" mode dropdown shows values from Product without setting selectedItem:
 { field: "Product.Name", headerText: 'Product', editType: ej.Grid.EditingType.Dropdown, foreignKeyField: "Id", foreignKeyValue: "Name", dataSource: contentItem.parent.screen.Productscol.data },
If I remove foreignKeyField and foreignKeyValue, then display in view mode is ok (I can see "Name" of Product, but when click to go in edit mode I'm getting error:
JavaScript runtime error: Syntax error, unrecognized expression: input:hidden[id^='#'][name=OrderDetails1Product.Name]..

Product is navigation property in relation OrderDetails->Product..


SR Sellappandi Ramu Syncfusion Team October 26, 2015 09:29 AM UTC

Hi Kivito, 

We considered this “Complex binding with foreign key field” as an improvement feature and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates. 


Sellappandi R

Live Chat Icon For mobile
Up arrow icon