Populate Dropdown within Grid

[Stephan Schrade]

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]

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 }, 

 

  

Documentation: https://ej2.syncfusion.com/javascript/documentation/grid/how-to/provide-custom-data-source-and-enabling-filtering-to-drop-down-list/ 

 

Please get back to us if you need any further assistance on this. 

 

Regards, 

Pavithra S. 

[Stephan Schrade]

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]

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. 

 

Documentation: https://ej2.syncfusion.com/javascript/documentation/grid/columns/ 

 

Demo                  : https://ej2.syncfusion.com/javascript/demos/#/material/grid/foreign-key.html 

 

Please get back to us if you need further assistance on this. 

 

Regards, 

Pavithra S. 

[Stephan Schrade]

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]

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]

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.