DropDownList in Grid not displaying data

[Michael Lambert]

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();

          ....

          }

[Thavasianand Sankaranarayanan]

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, 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2-dotnet-core874960809 

 

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. 

[Michael Lambert]

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

[Mohammed Farook J]

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 

[Michael Lambert]

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

[Thavasianand Sankaranarayanan]

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> 

 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample2059563353  

 

Please get back to us if you need further assistance. 

 

Regards, 

Thavasianand S. 

[Michael Lambert]

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

[Thavasianand Sankaranarayanan]

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; 

 

            } 

 

        } 

 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/RazorpagesSample166159254  

 

Please get back to us if you need further assistance. 

 

Regards, 

Thavasianand S. 

[Michael Lambert]

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

[Thavasianand Sankaranarayanan]

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. 

Link: https://ej2.syncfusion.com/javascript/documentation/api/drop-down-list/fieldSettingsModel/#text 

Regards, 

Thavasianand S. 

[Michael Lambert]

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);
        }

[Thavasianand Sankaranarayanan]

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> 

... 

 

 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/RazorpagesMSample1792996515  

 

Refer the help documentation. 

 

Link: https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns/#foreign-key-column 

 

Please get back to us if you need further assistance. 

 

Regards,  

Thavasianand S. 

[Michael Lambert]

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

[Thavasianand Sankaranarayanan]

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. 

[Michael Lambert]

Perfect!  Thanks!

[Thavasianand Sankaranarayanan]

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.