Bind value dropdown and load from datasource

[haryzad]

Hi Syncfusion Team Support

I have an issues on the dropdown part which

1. i wan to load the dropdown from datasource e.g. veiwbag.datasourcegender

2. i wan to populate to the drop down based on the item in grid

here is my code

a. i using the grid with the dialog template, which on the listing it show the data

<e-column field="JHGenderDesc" header-text="Gender" is-primary-key="false" width="75"></e-column>

b. In dialog template, which when i select, it show the value, but not able to change on the drop down

 <td style="text-align: left;">

                            Gender

                        </td>

                        <td style="text-align: left">

                            <input type="text" id="JHGenderDesc" name="JHGenderDesc" value={{:JHGenderDesc}} onclick="complete()" />

                        </td>

c. code in script

<script>

    function complete(args) {

        $("#DOB").ejDatePicker();

        $('#JHGenderDesc').ejDropDownList(

            {

                dataSource: @ViewBag.datasourceGender,

                fields: {

                    text: "GenderName",

                    value: "GenderId"

                }

            }

        ); 

    }

</script>

attach also the screenshot

Attachment: dropdown_issues_a441ba0d.rar

[Keerthana Rajendran]

Hi Haryzad,   

   

Thank you for contacting Syncfusion Support.   

   

We have checked your attachment and code. This issue is due to Viewbag value is passed directly inside DropDownList. We suggest to use pass the  dataSource using @Html.Raw  before assigning to DropDownList in complete event of Grid as shown below   

   

<script>   

        function complete(args) {   

            if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") {   

                    $('#OrderID').ejDropDownList(   

                       {   

                         dataSource: @Html.Raw(Json.Serialize(@ViewBag.dataSource)),   

                        fields: {   

                          text: "orderID",   

                           value: "orderID"   

                        }   

                    }   

       );   

            }   

   

        }   

    </script>   

   

We have prepared a sample by rendering DropDownList with Viewbag datasource within DialogEditTemplate of Grid. Please download the sample from http://www.syncfusion.com/downloads/support/forum/132722/ze/Grid_with_DialogEditTemplate-598994361.zip   

   

Regards,   

Keerthana   

 

[haryzad]

Hi Keerthana   

Thanks for the feedback, i try to use the code that has been shared as reference, not sure where is the mistake, the list appear 'undefined'.

Since i'm using the web api to return the data in json format that has been serialized, in controller i'm using below code

var jsonstring = responseGenderData.Content.ReadAsStringAsync();

                lGender = JsonConvert.DeserializeObject<List<GenderEntity>>(jsonstring.Result);

                ViewBag.datasourceGender = new SelectList(lGender, "JHGenderDesc", "JHGenderDesc");

in view, i try to use the sample code that has been shared

$('#JHGenderDesc').ejDropDownList(

            {

                

                dataSource: @Html.Raw(Json.Serialize(@ViewBag.datasourceGender)),

                fields:

                {

                    text: "JHGenderDesc",

                    value: "JHGenderDesc"

                },

                watermarkText: "Select Gender"

            }

        );

the count of the data appear, but it's show undefined

refer attachment for your reference

Attachment: dropdownlist_undefined_24b475b4.rar

[Keerthana Rajendran]

Hi Haryzad,   

   

On checking your attachment, it seems the casing of field name has been changed(“JHGenderDesc” has been changed to jhGenderDesc”) while returning JSON data from server side. This camel case issue occurs in ASP.NET core 1.1 app while returning JSON data so, we suggest you to  add the following code example in Startup.cs page in your ASP.NET core 1.1 app.   

   

public IConfigurationRoot Configuration { get; }    

    

        // This method gets called by the runtime. Use this method to add services to the container.    

        public void ConfigureServices(IServiceCollection services)    

        {    

            // Add framework services.    

            services.AddMvc().AddJsonOptions(x =>    

            {    

    

                x.SerializerSettings.ContractResolver = null;    

            });     

        }    

    

   

DropDownList fields will be bound correctly if the name in the “text” field is mapped correctly.  So, after adding these lines; please ensure whether the field name assigned to “text” field is same as that returned in JSON data.   

   

Regards,   

Keerthana   

 

[haryzad]

Thanks Keerthana

It's resolve my problem.

[Keerthana Rajendran]

Hi Haryzad,   

 

Thanks for your update. We are glad to hear that our suggestion helped you to achieve your requirement. Please get back to us if you require further assistance on this. We will be happy to assist you 

 

Regards, 

Keerthana.