How do you implement a simple dropdown colum on EJ2 Grid

[David Jackson]

I have this code from the examples but it doesn't work. The triangle for the dropdown is displayed but there is no list

I am using PHP

Can anyone help me

<div class="container">

    <div id="Grid"></div>    

</div>

<script>

    $(document).ready(function(){

        var data = new ej.data.DataManager({

            url: "http://xxxxxxx.xxxxxx/data.php",

            adaptor: new ej.data.WebApiAdaptor(),

            crossDomain: true

        });

        ej.grids.Grid.Inject(ej.grids.Edit);

        var grid = new ej.grids.Grid({

            dataSource: data,

            editSettings: { 

                allowEditing: true, 

                allowAdding: true, 

                allowDeleting: true

            }, 

            pageSettings: { pageCount: 3 },            

            allowPaging: true,

            columns: [

                { field: "ID", headerText: "ID", width: 140, textAlign: "Right", isPrimaryKey: true, visible: false }, 

                { field: "Menu", headerText: "Menu", width: 140, textAlign: "Right" }, 

                { field: "Item", headerText: "Item", width: 140, textAlign: "Right", allowEditing: false }, 

                { field: "Link", headerText: "Link", width: 140, textAlign: "Right" }, 

                { field: "MenuGroup", headerText: "MenuGroup", width: 140, textAlign: "Right", editType: "dropdownedit", edit: { params: { value: 'Germany' } } }, 

                { field: "MenuOrder", headerText: "MenuOrder", width: 140, textAlign: "Right" }, 

                { field: "Seperator", headerText: "Seperator", width: 140, textAlign: "Right" }, 

                { field: "Security", headerText: "Security", width: 140, textAlign: "Right" }, 

                { field: "Attr", headerText: "Attr", width: 140, textAlign: "Right" }

            ],

            actionBegin: function(args) {

                //alert("Begin");

            },

            actionComplete: function(args) {

                if (args.requestType === 'save') {

                    var url="include/admin-ajax.php"

                    formData = new FormData;

                    

                    formData.append('details', JSON.stringify(args.data));

                    formData.append('action', 'update-menus');    

    

                    $.ajax({

                        url: url,

                        type: 'POST',

                        data: formData,

                        processData: false,

                        contentType: false,

                        success: function(response){                              

                            result = JSON.parse(response);

                            alert(result.message);

                        },

                        error: function(err) {                              

                            alert(err.responseText);

                        }

                    });  

                }

                               

            },

        });

        grid.appendTo('#Grid');

    });

</script>

[Praveenkumar Gajendiran]

Hi David,

Greetings from Syncfusion support.

By default in EJ2 Grid, if you define the columns.editType as drowdownedit, it will render the dropdownlist as editor component for that particular column with corresponding field values as dropdown dataSource.

We checked your provided code example, in that we found you are using columns.edit.params feature. We would like to inform you that columns.edit.params feature is used to customize or override the behavior of the editor component. The dropdownlist will show the defined columns.edit.params.value should be in the dropdownlist dataSource or else it will not show the list.  

So, can please explain your exact requirement?

 

Documentation Link: https://ej2.syncfusion.com/javascript/documentation/grid/edit/#cell-edit-template  

Regards
Praveenkumar G