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

Populate Dropdown within Grid

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

6 Replies

PS Pavithra Subramaniyam Syncfusion Team December 3, 2019 12:42 AM

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. 



SS Stephan Schrade December 3, 2019 02:03 PM

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



PS Pavithra Subramaniyam Syncfusion Team December 4, 2019 12:55 AM

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. 



SS Stephan Schrade December 4, 2019 01:25 AM

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



SS Stephan Schrade December 4, 2019 11:48 AM

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


PS Pavithra Subramaniyam Syncfusion Team December 4, 2019 08:38 PM

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon