How to populate grid edit dropdown

[Michael Tracey]

I have a fairly simple question.

I am trying to enable editing in my grid, and I have found that the docs say to do this:

col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Edit(new { @params = new { value = "Germany" } }).Width("150").Add();

In my own code, I have a similar column:

col.Field("Status").HeaderText("Status").AllowEditing(true).EditType("dropdownedit").Edit(new { @params = new { value = "Inactive" }}).Width("100").Add();

The dropdown is not populated with any data, or any choices, do I need to add a list where the @params = new... line is?

Do I need to have the data in my .cs file and the "Inactive" value maps to it? The documentation is rather vague.

[Thiyagu Subramani]

Hi Michael, 

Thanks for contacting Syncfusion support. 

By default in EJ2 Grid, when using editType as dropdownedit in Grid column, dropdown popup list will be generated automatically based on required column’s field values which is defined in Grid’s DataSource property. Based on your shared requirement we have prepared a sample as per your requirement but we did not faced your reported an issue “The dropdown is not populated with any data, or any choices” at our end. For more reference, please refer to the below code and sample link. 

<div class="control-section"> 

    @Html.EJS().Grid("DefaultPaging").DataSource(ds => ds.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor").InsertUrl("/Home/Insert").RemoveUrl("/Home/Remove").UpdateUrl("/Home/Update")).Columns(col => 

{ 

 

    . . . . . . . 

    col.Field("Status").HeaderText("Status").AllowEditing(true).EditType("dropdownedit").Edit(new { @params = new { value = "Inactive" }}).Width("100").Add(); 

    col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Edit(new { @params = new { value = "Germany" } }).Width("150").Add(); 

 

}).Height("400").AllowPaging().Toolbar(new List<string> 

        () { "Add", "Edit", "Delete", "Update", "Cancel" }).AllowFiltering().FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).EditSettings(edit => { edit.AllowEditing(true).AllowAdding(true).AllowDeleting(true); }).Render() 

</div> 

 

public void BindData() 

        { 

            int code = 10000; 

            for (int i = 1; i < 10; i++) 

            { 

                orddata.Add(new OrdersDetails(code + 2, "ANATR", "Active", . . . . . )); 

                orddata.Add(new OrdersDetails(code + 3, "ANTON", "Inactive", . . . . )); 

                . . . . . . . 

                } 

        } 

 

  public class OrdersDetails 

        { 

            public OrdersDetails() 

            { 

            } 

            public OrdersDetails(int OrderID, string CustomerId, string Status, . . . . .) 

            { 

                this.OrderID = OrderID; 

                this.CustomerID = CustomerId; 

                this.Status = Status; 

                    . . . . . . . . 

            } 

            public int? OrderID { get; set; } 

            public string CustomerID { get; set; } 

 

            public string Status { get; set; } 

          . . . . . . . . . 

        } 

 

Sample link:  https://www.syncfusion.com/downloads/support/forum/167721/ze/145475-mvc-url-adaptor-334788859 

If still facing the issue, please share below details then only we can provide the appropriate solution as soon as possible. 

1. Share the complete Grid rendering code.
2. If possible share issue reproducing sample or reproduce the issue in above sample.
3. Syncfusion package version.
4. Share your Grid DataSource structure.

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

 

Regards, 

Thiyagu S 

[Michael Tracey]

Thanks Thiyagu,

I should have been more clear, there is data in the dropdown, but it is not meaningful at all, the datasource object that I have is as follows:

public class UserDisplay

{

        public int Id { get; set; }

        public string Username { get; set; }

        public string FirstName { get; set; }

        public string LastName { get; set; }

        public string Role { get; set; }

        public string Status { get; set; }

}

And I am trying to edit the Role and Status fields in the grid. The problem is that the correct options show up only some of the time. For example, if all of my objects in the datasource have the Role "Administrator" then only the option "Administrator" shows up in the dropdownedit. However, if at least one of my objects in the datasource have the Role "User", and the rest are "Administrator", then the dropdown will be populated with both options, which is the behaviour I am after.

So, how can I get the dropdown to have both the "User" and "Administrator" at the same time, regardless of the object in datasource?

Cheers

[Joseph Christ Nithin Issack]

Hi Michael, 

   Thanks for the update. 

   Based on your requirement you need to populate the edit dropdown  with both the "User" and "Administrator" at the same time, regardless of the object in datasource. This can be achieved by providing custom datasource to the edit dropdown. 

Please refer the below code example. 

 

@{ 

    var StatusDropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = ViewBag.StatusDropdownData, Query = "new ej.data.Query()", Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "Status", Text = "Status" }, AllowFiltering = true}; 

    var RoleDropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = ViewBag.RoleDropdownData, Query = "new ej.data.Query()", Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "Role", Text = "Role" }, AllowFiltering = true }; 

} 

 

<div class="control-section"> 

    @Html.EJS().Grid("DefaultPaging").DataSource(ds => ds.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor").InsertUrl("/Home/Insert").RemoveUrl("/Home/Remove").UpdateUrl("/Home/Update")).Columns(col => 

{ 

 

    col.Field("OrderID").HeaderText("Order ID").Width("120").IsPrimaryKey(true).Filter(new { type = "CheckBox" }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.Field("CustomerID").HeaderText("Customer Name").Width("170").Add(); 

    col.Field("OrderDate").HeaderText("Order Date").Width("130").EditType("datepickeredit").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

   col.Field("Status").HeaderText("Status").AllowEditing(true).EditType("dropdownedit").Edit(new { @params = StatusDropDownList }).Width("100").Add(); 

    col.Field("Role").HeaderText("Role").AllowEditing(true).EditType("dropdownedit").Edit(new { @params = RoleDropDownList }).Width("100").Add(); 

    col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Edit(new { @params = new { value = "Germany" } }).Width("150").Add(); 

}).Height("400").AllowPaging().Toolbar(new List<string> 

        () { "Add", "Edit", "Delete", "Update", "Cancel" }).AllowFiltering().FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).EditSettings(edit => { edit.AllowEditing(true).AllowAdding(true).AllowDeleting(true); }).Render() 

</div> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/167721/ze/145475-mvc-url-adaptor586156696 

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

Please refer the attached sample and the documentation. Please revert to us for more queries. 

Regards, 

Joseph I.