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
  1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. DropDownList in Grid not displaying data

DropDownList in Grid not displaying data

This is not working for the DropDownEdit assignment, what I'm I missing or doing wrong?

    <ejs-grid id="grdTS" load="grdTS_Load" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true">
        <e-data-manager url="/Officers/TimeSheet?handler=DataSource" updateUrl="/Officers/TimeSheet?handler=UpdateData" adaptor="UrlAdaptor"></e-data-manager>
        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings>
        <e-grid-columns>
            <e-grid-column field="Description" headerText="Description" width="120"></e-grid-column>
            <e-grid-column field="DateStart" headerText="Starttest" width="120" type="date" edit="@( new { create = "createStart", read = "readStart", destroy = "destroyStart", write = "writeStart"} )" validationRules="@(new { required=true})"></e-grid-column>
            <e-grid-column field="Hours" headerText="Hours" width="120" editType="numericedit" format="0.0" edit="@(new { @params = new { format = "n1", decimals = "1", validateDecimalOnType = "true", min = "0", max = "23" } })" validationRules="@(new { required=true})"></e-grid-column>

            <e-grid-column field="Type" headerText="Type" width="120" editType="dropdownedit" edit="@(new { @params = new {dataSource = @Model.tsTypes, fields = new {value = "value", text = "text"} } })" ></e-grid-column>
   
         <e-grid-column field="TimeSheetId" headerText="ID" width="120" visible="false" isPrimaryKey="true" isIdentity="true"></e-grid-column>
        </e-grid-columns>
    </ejs-grid>


Controller:
        public List<object> tsTypes = new List<object>(); 
          .........

        public void  OnGet()
        {
          ....
            var tsTypes = res.TimeSheetTypes.Select(a => new { text = a.Name, value = a.TypeId.ToString() }).ToList();
          ....
          }




15 Replies
TS Thavasianand Sankaranarayanan Syncfusion Team January 16, 2019 09:56 AM UTC

Hi Michael, 

We have checked the reported issue at our end and DropDown List is working fine. Please find the below screenshot and sample which can be downloaded from the below link, 

 

 
Please provide the below information for us to analyze your query better and provide a solution as soon as possible, 
  1. Share video demonstration or screen shot of the issue.
  2. If you face any script error in console then share those details.
  3. Could you please try to reproduce the reported issue in the provided sample?
 
Regards, 
Thavasianand S. 


ML Michael Lambert January 23, 2019 07:25 PM UTC

Yea, that does not work with Razor pages in my example.  Can you explain to be why my code does not work?  I get nothing in the dropdown and no error messages in VS or the Browser.

Thanks

MF Mohammed Farook J Syncfusion Team January 25, 2019 09:02 AM UTC

Hi Michael, 
 
Please refer the following code  snippet to achieve your requirement in Razor page, 
 
Index.cstml 
 
@page 
@model IndexModel 
@{ 
    ViewData["Title"] = "Home page"; 
} 
 
@{  
    var dropDownData = (IndexModel.PaperViewModel)ViewData["Data"]; 
} 
 
<div> 
    <ejs-grid id="Grid" toolbar="@(new List<string>() {"ExcelExport", "Add", "Update", "Cancel" })"> 
        <e-grid-editsettings allowEditing="true" allowAdding="true"></e-grid-editsettings> 
       <e-grid-columns> 
             
            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150" 
                           editType="dropdownedit" edit="@(new { @params = new {dataSource = dropDownData.tsTypes, fields = new {value = "ShipCountry", text = "ShipCountry"} } })"></e-grid-column> 
        </e-grid-columns> 
    </ejs-grid> 
</div> 
 
Index.cshtml.cs 
 
public class IndexModel : PageModel 
    { 
        public void OnGet() 
        { 
            var enrolPapers = new List<EnrolPaper>() 
            { 
                new EnrolPaper(){ ShipCountry = "France" }, 
                new EnrolPaper(){ ShipCountry = "Denmark"}, 
                new EnrolPaper(){ ShipCountry = "Brazil"}, 
                new EnrolPaper(){ ShipCountry = "Germany"} 
            }; 
            ViewData["Data"] = new PaperViewModel 
            { 
                tsTypes = enrolPapers 
            }; 
       } 
        public class PaperViewModel 
        { 
            public IList<EnrolPaper> tsTypes { get; set; } 
 
        } 
 
        public class EnrolPaper 
        { 
            public string ShipCountry { get; set; } 
        } 
   } 
 
 
Regards, 
J Mohammed Farook 


ML Michael Lambert January 28, 2019 10:11 PM UTC

So maybe I'm confused a bit on how this control works.  Your example works, though not quite want I or expected.  First it appears that the column field name and 'text' value in the datasource MUST be the same and I cannot figure how to bind the field to the value instead of the text..  If you change the name of the field or the value in 'text', it won't work.

<e-grid-column field="ShipCountry"
headerText="Ship Country" width="150" 
                          editType="dropdownedit" edit="@(new { @params = new {dataSource = dropDownData.tsTypes, fields = new {value = "ShipCountry",
text = "ShipCountry"
} } })"></e-grid-column> 

What I want to do is: Grid is bound to a DB using URL adapter. A field in the table is a GUID.  The dropdownlist will be populated with a text/value list which will contain a GUID and a friendly name. The box will show the friendly name of the bound GUID.  During editing it will show all the friendly names(text), but selection will be defaulted to the value(guid) in the column field.

Thanks,
Mike

Thanks,
Mike

TS Thavasianand Sankaranarayanan Syncfusion Team January 29, 2019 12:32 PM UTC

Hi Michael, 
 
Query: What I want to do is: Grid is bound to a DB using URL adapter. A field in the table is a GUID.  The dropdownlist will be populated with a text/value list which will contain a GUID and a friendly name. The box will show the friendly name of the bound GUID.  During editing it will show all the friendly names(text), but selection will be defaulted to the value(guid) in the column field. 
 
We have validated your query and created a sample based on your requirement. Here, we have bind dropdown list column with key value pair by using cell edit template. When editing the dropdown column, it shows as text and when storing it will be number. Please find the below code example and sample for your reference. 
 
[code example] 
 
<ejs-grid id="Grid1" toolbar="@(new List<string>() { "Add", "Edit", "Update", "Delete", "Cancel" })" allowGrouping="true" allowPaging="true"> 
    <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editsettings> 
    <e-data-manager url="/Home/UrlDatasource" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/CellEditDelete" adaptor="UrlAdaptor"></e-data-manager> 
   <e-grid-columns> 
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 
        <e-grid-column field="CustomerID" headerText="Customer ID" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" width="150"></e-grid-column> 
        <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="120"></e-grid-column> 
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" width="120"></e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 
 
<script> 
        var elem; 
        var dObj; 
        function create(args) { 
            elem = document.createElement('input'); 
            return elem; 
    } 
    function write(args) { 
            dObj = new ej.dropdowns.DropDownList({ 
                dataSource: new ej.data.DataManager({ 
                    url: "/Home/DropDatasource", 
                    adaptor: new ej.data.UrlAdaptor() 
                }), 
                fields: { text: 'OptionText', value: 'countryId' }, 
                popupHeight: '230px', 
                value: args.rowData[args.column.field] 
            }); 
            dObj.appendTo(elem); 
        } 
 
        function destroy() { 
            dObj.destroy(); 
        } 
        function read(args) { 
            return dObj.value; 
        } 
</script> 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Thavasianand S. 


ML Michael Lambert February 13, 2019 12:16 PM UTC

That didn't work.  Since I'm using razor I tried this:

function writeType(args) {
            dObjType = new ej.dropdowns.DropDownList({
                dataSource: new ej.data.DataManager({
                    url: "/Officers/TimeSheet?handler=GetTSTypes",
                    adaptor: new ej.data.UrlAdaptor()
                }),
                fields: { text: 'text', value: 'value' },
                popupHeight: '230px',
                value: args.rowData[args.column.field]
            });
            dObjType.appendTo(elemType);
        }

Handler:
public ActionResult GetTSTypes(DataManagerRequest dm)
        {
            System.Collections.IEnumerable tsT = res.TimeSheetTypes.Select(a => new { text = a.Name, value = a.TypeId.ToString() }).ToList();
            int count = tsT.Cast<TimeSheetTypes>().Count();
            return new JsonResult(new { result = tsT, count = count });
        }

But get this error:

I've also tried binding to the Model by this:
function writeType(args) {
            dObjType = new ej.dropdowns.DropDownList({
                dataSource: "@Model.tsTypes",
                fields: { text: 'text', value: 'value' },
                popupHeight: '230px',
                value: args.rowData[args.column.field]
            });
            dObjType.appendTo(elemType);
        }

Handler:
        public List<object> tsTypes = new List<object>();
        tsTypes = res.TimeSheetTypes.Select(a => new { text = a.Name, value = a.TypeId.ToString() }).ToList();

But that doesn't work.  I'd be happy with either way of binding.

Mike

TS Thavasianand Sankaranarayanan Syncfusion Team February 15, 2019 11:03 AM UTC

Hi Michael, 
 
Query: That didn't work.  Since I'm using razor I tried this: 
 
We have validated your query with the provided information and we suspect that the data coming from controller is not properly. Here, we have prepared a sample based on your requirement in razor pages. Please find the below code example and sample for your reference. 
 
[code example] 
... 
 
<script> 
    ... 
   function create(args) { 
        elem = document.createElement('input'); 
        return elem; 
    } 
    function write(args) { 
        dObj = new ej.dropdowns.DropDownList({ 
            dataSource: new ej.data.DataManager({ 
                url: "/Index?handler=DropDataSource", 
                adaptor: new ej.data.UrlAdaptor() 
            }), 
            fields: { text: 'OptionText', value: 'countryId' }, 
            popupHeight: '230px', 
            value: args.rowData[args.column.field], 
        }); 
        dObj.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }] 
        dObj.appendTo(elem); 
    } 
 
    ... 
</script> 
public JsonResult OnPostDataSource([FromBody]Data dm) 
        { 
            var data = OrdersDetails.GetAllRecords(); 
 
            int count = data.Cast<OrdersDetails>().Count(); 
            return dm.requiresCounts ? new JsonResult(new { result = data.Skip(dm.skip).Take(dm.take), count = count }) : new JsonResult(data); 
 
 
        } 
 
        public JsonResult OnPostDropDataSource([FromBody]Data dm) 
        { 
            var data = Customer.GetDropData(); 
 
            int count = data.Cast<Customer>().Count(); 
            return dm.requiresCounts ? new JsonResult(new { result = data, count = count }) : new JsonResult(data); 
 
 
        } 
 
        public class Customer 
        { 
            public static List<Customer> drop = new List<Customer>(); 
            public int countryId { get; set; } 
            public string OptionText { get; set; } 
            public Customer() 
            { 
 
            } 
            public Customer(int id, string name) 
            { 
                this.countryId = id; 
                this.OptionText = name; 
            } 
 
            public static List<Customer> GetDropData() 
            { 
                drop.Add(new Customer() { countryId = 1, OptionText = "Reims" }); 
                ... 
               drop.Add(new Customer() { countryId = 5, OptionText = "Resende" }); 
                return drop; 
 
            } 
 
        } 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Thavasianand S. 


ML Michael Lambert February 17, 2019 09:40 PM UTC


Hi Thavasianand,

Well that works when editing, but now it shows the value instead to the text in the grid. How do I have it display the 'text' instead of the value?
Thanks,
Mike

TS Thavasianand Sankaranarayanan Syncfusion Team February 18, 2019 01:08 PM UTC

Hi Michael, 

We suggest you to ensure the field which you given for text property in fields API of EJ2 DropDownList refer the below code example. 


function write(args) {  
        dObj = new ej.dropdowns.DropDownList({  
            dataSource: new ej.data.DataManager({  
                url: "/Index?handler=DropDataSource",  
                adaptor: new ej.data.UrlAdaptor()  
            }),  
            fields: { text: 'OptionText', value: 'countryId' }, // Provide the field name in text property to show in DropDownList 
            popupHeight: '230px',  
            value: args.rowData[args.column.field],  
        });  
        dObj.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }]  
        dObj.appendTo(elem);  
    }  
  



Refer the help documentation. 


Regards, 
Thavasianand S. 


ML Michael Lambert February 19, 2019 09:03 PM UTC

Hi,
Actually the DropDownList displays the information correctly when I'm editing the row, but the grid (not in edit mode) displays the field value, not the text.

function writeType(args) {
            dObjType = new ej.dropdowns.DropDownList({
                dataSource: new ej.data.DataManager({
                    url: "/Emps/TimeSheet?handler=GetTSTypes",
                    adaptor: new ej.data.UrlAdaptor()
                }),
                fields: { text: 'text', value: 'value' },
                popupHeight: '230px',
                value: args.rowData[args.column.field]
            });
            dObjType.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }]
            dObjType.appendTo(elemType);
        }

Controller
 public ActionResult OnPostGetTSTypes([FromBody]Models.DataClass dm)
        {
            var tsT = res.TimeSheetTypes.Select(a => new { text = a.Name, value = a.TypeId }).ToList();
            int count = tsT.Cast<object>().Count();
            return dm.RequiresCounts ? new JsonResult(new { result = tsT, count = count }) : new JsonResult(tsT);
        }



TS Thavasianand Sankaranarayanan Syncfusion Team February 20, 2019 06:05 AM UTC

Hi Michael, 
 
Query: Actually the DropDownList displays the information correctly when I'm editing the row, but the grid (not in edit mode) displays the field value, not the text. 
 
We have validated your query and modified the sample based on your requirement. In dropdown column, the dropdown list is based on text and value pair. Here, text is for display purpose and value is for mapping(such as for editing, sorting) purpose. To achieve your requirement, we suggest you to use the foreign key column. It shows text in grid and while editing. In server side, corresponding id value is used for other operations. Please find the below code example and sample for your reference. 
 
[code example] 
... 
 
<ejs-grid id="Grid" allowPaging="true" load="onLoad"  toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})"> 
    <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editsettings> 
    <e-data-manager url="/Index?handler=DataSource" insertUrl="/Index?handler=Insert" updateUrl="/Index?handler=Update" removeUrl="/Index?handler=Delete"  adaptor="UrlAdaptor"></e-data-manager> 
    <e-grid-pageSettings pageCount="5" pageSize="5"></e-grid-pageSettings> 
 
    <e-grid-columns> 
 
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 
        <e-grid-column field="CustomerID" headerText="Text" foreignKeyField="CustomerID" foreignKeyValue="OptionText" dataSource="@Model.DropDatasource" width="150"></e-grid-column> 
        <e-grid-column field="CustomerName" headerText="CustomerName" textAlign="Right" width="120"></e-grid-column> 
 
    </e-grid-columns> 
</ejs-grid> 
... 
 
 
 
Refer the help documentation. 
 
 
Please get back to us if you need further assistance. 
 
Regards,  
Thavasianand S. 


ML Michael Lambert February 21, 2019 12:41 AM UTC

Hi Thavasianand,
Thanks that worked, but I have one question.  When I tried to bind the dropdownlist to @Model, it doesn't work, when I use the urladapter it works fine.  I'm just curious why this wouldn't work.  I'm sure it's a syntax issue.

        function writeType(args) {
            dObjType = new ej.dropdowns.DropDownList({
                dataSource: "@Model.tsTypes",
                fields: { text: 'text', value: 'value' },
                popupHeight: '230px',
                value: args.rowData[args.column.field]
            });
            dObjType.appendTo(elemType);
        }

Mike

TS Thavasianand Sankaranarayanan Syncfusion Team February 21, 2019 09:53 AM UTC

Hi Michael, 
 
Query: Thanks that worked, but I have one question.  When I tried to bind the dropdownlist to @Model, it doesn't work, when I use the urladapter it works fine.  I'm just curious why this wouldn't work.  I'm sure it's a syntax issue. 
 
We have validated your query and you can achieve your requirement by using below way. Here, we have bind model datasource to dropdown datasource by using Json.Serialize. Please find the below code example for your reference. 
 
[code example] 
<script> 
    ... 
   function write(args) { 
        dObj = new ej.dropdowns.DropDownList({ 
            dataSource: @Html.Raw(Json.Serialize(Model.DropDatasource)), 
            fields: { text: 'OptionText', value: 'countryId' }, 
            popupHeight: '230px', 
            value: args.rowData[args.column.field], 
        }); 
       dObj.appendTo(elem); 
    } 
 
    function destroy() { 
        dObj.destroy(); 
    } 
    function read(args) { 
        return dObj.value; 
    } 
</script> 
 
Please get back to us if you need further assistance. 
 
Regards, 
Thavasianand S. 


ML Michael Lambert February 21, 2019 05:06 PM UTC

Perfect!  Thanks!

TS Thavasianand Sankaranarayanan Syncfusion Team February 22, 2019 03:43 AM UTC

Hi Michael, 
 
We are happy that the problem has been solved. 
 
Please get back to us if you need any further assistance.  
                          
Regards, 
Thavasianand S.

Loader.
Live Chat Icon For mobile
Up arrow icon