Grid not showing dropdownlist column

[Prince Ocenar]

Hi,

I have a view model that has a List of class, and I want to add items to datagrid from dropdownlist selector of products and qty 

But the dropdownlist is empty .. the Bank class has the properites of string Id, and string of 'BankName'

 public class AddDirectSalesViewModel

    {

        public List<Clients> Clients { get; set; }

        public string SelectedClient { get; set; }

        public List<Banks> Banks { get; set; } <- I want this List to be on my dropdown of my column in Grid

        public string SelectedBank { get; set; }

        public DateTime OrderedDate { get; set; } = DateTime.Now;

        public List<ProductsOrdered> ListProductsOrdered { get; set; } = new List<ProductsOrdered>();

        public ProductsOrdered ProductsOrderedTest { get; set; }

  }

<div class="container">

    <div class="card text-black" style="border-radius: 25px;">

        <div class="card-body p-md-5">

            <form method="post" class="mx-1 mx-md-4">

                <div class="row justify-content-center">

                    <div asp-validation-summary="All" class="text-danger"></div>

                    <table>

                        <tr>

                            <td>

                                <div class="d-flex flex-row align-items-center">

                                    <i class="fas fa-user fa-lg me-3 fa-fw"></i>

                                    <div class="form-outline flex-fill mb-0">

                                        <ejs-dropdownlist ejs-for="@Model.SelectedClient" dataSource="Model.Clients"

                                                          placeholder="Select Client" floatLabelType="Always" filterType="Contains" popupHeight="220px">

                                            <e-dropdownlist-fields value="Id" text="StrFullName"></e-dropdownlist-fields>

                                        </ejs-dropdownlist>

                                        <span asp-validation-for="Clients" class="text-danger"></span>

                                    </div>

                                </div>

                            </td>

                            <td>

                                <br />

                            </td>

                            <td>

                                <div class="d-flex flex-row align-items-center">

                                    <i class="fas fa-user fa-lg me-3 fa-fw"></i>

                                    <div class="form-outline flex-fill mb-0">

                                        <ejs-dropdownlist id="DropDownBanks" ejs-for="@Model.SelectedBank" dataSource="Model.Banks"

                                                          placeholder="Select Bank" floatLabelType="Always">

                                            <e-dropdownlist-fields value="Id" text="BankName"></e-dropdownlist-fields>

                                        </ejs-dropdownlist>

                                        <span asp-validation-for="Banks" class="text-danger"></span>

                                    </div>

                                </div>

                            </td>

                        </tr>

                        <tr>

                            <td>

                                <div class="d-flex flex-row align-items-center mb-4">

                                    <i class="fas fa-user fa-lg me-3 fa-fw"></i>

                                    <div class="form-outline flex-fill mb-0">

                                        <ejs-datepicker id="date" ejs-for="OrderedDate" placeholder="Date"

                                                        format="MMM-dd-yy" floatLabelType="Always"></ejs-datepicker>

                                        <span asp-validation-for="Clients" class="text-danger"></span>

                                    </div>

                                </div>

                            </td>

                            <td>

                                <br />

                            </td>

                        </tr>

                        <tr>

                        </tr>

                    </table>

                    <div>

                        <ejs-grid id="Grid" queryCellInfo="dropdown" dataSource="@Model.ListProductsOrdered" allowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">

                            <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editsettings>

                            <e-grid-columns>

                                <e-grid-column field="Banks" editType='dropdownedit' headerText="Product" textAlign="Right" width="120">

                                </e-grid-column>

                                <e-grid-column field="Qty" headerText="Qty" textAlign="Right" width="120"></e-grid-column>

                            </e-grid-columns>

                        </ejs-grid>

                    </div>

                </div>

                <div class="form-group row">

                    <div>

                        <button type="submit" class="btn btn-primary" style="width: auto">Save</button>

                        <a asp-action="ListClients" class="btn btn-danger">Cancel</a>

                    </div>

                </div>

            </form>

        </div>

    </div>

</div>

[Rajapandiyan Settu]

Hi Prince,

Thanks for contacting Syncfusion support.

In your dataSource, the Banks field contains an array of object values and you want to perform CRUD action on that field. By default, the EJ2 Grid column only supports number, string, date, dateTime, Boolean, and checkbox type values, and it does not support array type values. Refer to the below documentation.

columnType: https://ej2.syncfusion.com/documentation/api/grid/columnType/ 

So, the Grid does not support any data actions like CRUD, Filtering, Sorting, Editing, Searching, Grouping, etc., on the array type of column. This is the behavior of EJ2 Grid.

Regards,

Rajapandiyan S