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

Populate Dropdown within Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

149582 Dec 2,2019 08:49 AM UTC Dec 5,2019 04:38 AM UTC JavaScript - EJ 2 6
loading
Tags: Grid
Stephan Schrade
Asked On December 2, 2019 08:49 AM UTC

Hi support,
I have trouble to get my dropdown list within a grid populated with local (or remote) data.

I have made a grid with hierarchical binding which works perfect.
I can update the cells of the parent and the child grid with my crud operations on the server.

Now I want to add a dropdown to the first column in my child grid.
But I only get a dropdown with one empty element.

Here is my code of the grid:

[code]
var contacttypes = [
{
value: "1",
text: 'Test1',
},
{
value: "2",
text: 'Test2'
}
];

ej.grids.Grid.Inject(ej.grids.DetailRow, ej.grids.Edit, ej.grids.Toolbar);
var grid = new ej.grids.Grid({
dataSource: clubData,
allowPaging: false,
allowGrouping: false,
allowSorting: false,
allowPdfExport: false,
allowExcelExport: false,
actionFailure: failure,
toolbar: ['Search'],
sortSettings: { columns: [{ field: 'name', direction: 'Ascending' }] },
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
columns: [
{ field: 'clubid', headerText: 'ID', width: 120, textAlign: 'Right', visible: false, isPrimaryKey: true },
{ field: 'name', headerText: '<?=Yii::t('app', 'Club Name')?>', width: 120, textAlign: 'Left' },
{ field: 'zipcode', headerText: '<?=Yii::t('app', 'Zip')?>', width: 130, textAlign: 'Right' },
{ field: 'city', headerText: '<?=Yii::t('app', 'City')?>', width: 130, textAlign: 'Right' },
{ field: 'street', headerText: '<?=Yii::t('app', 'Street')?>', width: 130, textAlign: 'Right' },
],
childGrid: {
dataSource: clubcontactData,
queryString: 'clubid',
actionFailure: failure,
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
columns : [
{ field: 'clubcontactid', headerText: 'ID', width: 120, textAlign: 'Right', visible: false, isPrimaryKey: true },
{ field: 'type', headerText: '<?=Yii::t('app', 'Typ')?>', width: 120, textAlign: 'Left', editType: 'dropdownedit', edit: {params: {foreignKeyField: "id", foreignKeyValue: "text", dataSource: contacttypes, fields: {value: 'value', text: 'text'}, placeholder: 'Select Type'}}},
{ field: 'name', headerText: '<?=Yii::t('app', 'Name')?>', width: 120, textAlign: 'Left' },
{ field: 'email', headerText: '<?=Yii::t('app', 'Email')?>', width: 120, textAlign: 'Left' },
{ field: 'mobile', headerText: '<?=Yii::t('app', 'Mobile')?>', width: 120, textAlign: 'Left' },
{ field: 'phone', headerText: '<?=Yii::t('app', 'Phone')?>', width: 120, textAlign: 'Left' },
],
},
});
grid.appendTo('#Grid');
[/code]

What can I do?

Many thanks, 
Stephan

Pavithra Subramaniyam [Syncfusion]
Replied On December 3, 2019 08:42 AM UTC

Hi Stephan, 
 
Thanks for contacting Syncfusion support. 
 
While setting the data source to the DropDownList by using the columns.edit.params property, we need to provide a new query property for the DropDownList. Please refer to the below code example and documentation link for more information. 
 
[index.js] 
 { field: 'ShipCity', editType: 'dropdownedit',edit: {params: { query:new ej.data.Query(),dataSource: contacttypes,  
fields: {value: 'value', text: 'text'}, placeholder: 'Select Type'}} , headerText: 'Ship City', width: 120 }, 
 
  
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 


Stephan Schrade
Replied On December 3, 2019 10:03 PM UTC

Thank you very much.
Now my dropdown list is populated :-)

But there is still another problem:
If I open the child grid, the value (1,2) of the dropdown list is shown and not the text (Test1, Test2).
If I edit this row, then suddenly the correct text is shown.
How can I have this behavior right away from the beginning?

The same happens when editing is finished. Then the value is shown and not the text.

TIA
Stephan


Pavithra Subramaniyam [Syncfusion]
Replied On December 4, 2019 08:55 AM UTC

Hi Stephan, 
 
Thanks for your update. 
 
In Essential JavaScript 2 DropDownList, the text(Test1, Test2) property is only for displaying purpose. The value property will be saved and processed in Grid. So it displays the value(1,2) in column which is default behavior.  
 
If you want to save and show the text, then you can set the same field for “value” and “text” property of DropDownList. Or if you want to save the “value” and display the “text” in Grid column, then you can use Foreign Key column feature of Grid component. Using this feature you can display the “text” in Grid column for corresponding “value”.   Please refer to the below documentation and sample link for more information. 
 
 
 
Please get back to us if you need further assistance on this. 
 
Regards, 
Pavithra S. 


Stephan Schrade
Replied On December 4, 2019 09:25 AM UTC

Many thanks for your answer.

As you can see in my very first example I have already set the foreign values with:
foreignKeyField: "id", foreignKeyValue: "text"
Of course this is now wrong with the current datasource. ButI have changed it to
foreignKeyField: "value", foreignKeyValue: "text"
and it still does not work.

TIA
Stephan


Stephan Schrade
Replied On December 4, 2019 07:48 PM UTC

Ok, now I did found the solution.
You have to set the datasource for the field parameters and for the edit parameters.
The working code for this column now looks as follows:
{ field: 'type', headerText: '<?=Yii::t('app', 'Typ')?>', width: 120, textAlign: 'Left', editType: 'dropdownedit', foreignKeyField: "value", foreignKeyValue: "text", dataSource: contacttypes, edit: {params: {query:new ej.data.Query(), dataSource: contacttypes, fields: {value: 'value', text: 'text'}, placeholder: 'Select Type'}}},

Regards,
Stephan

Pavithra Subramaniyam [Syncfusion]
Replied On December 5, 2019 04:38 AM UTC

Hi Stephan,  

Thanks for your update. 

We are glad to hear that your requirement has been achieved. 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards,  
Pavithra S. 


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