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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Bind value dropdown and load from datasource

Thread ID:

Created:

Updated:

Platform:

Replies:

132722 Sep 18,2017 08:21 AM UTC Sep 21,2017 04:32 AM UTC ASP.NET Core 5
loading
Tags: DropDownList
haryzad
Asked On September 18, 2017 08:21 AM UTC

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 [Syncfusion]
Replied On September 19, 2017 12:35 PM UTC

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
Replied On September 20, 2017 07:10 AM UTC

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 [Syncfusion]
Replied On September 20, 2017 11:29 AM UTC

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
Replied On September 20, 2017 01:30 PM UTC

Thanks Keerthana

It's resolve my problem.





Keerthana Rajendran [Syncfusion]
Replied On September 21, 2017 04:32 AM UTC

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. 



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;