This is a migrated thread and some comments may be shown as answers.

Undefined in DropdownList

11 Answers 517 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 11 Feb 2018, 02:27 AM

I'm trying to follow the most basic example of a binding to remote data for the dropdownlist.  I am using the following code but when I run the page, I get the image shown below.  I am supposed to have 4 results, and if I step through the EF code, I can see it pulling the proper results back.  What am I doing wrong?

Code Behind

public JsonResult GetRegions()
        {
            //Get Distinct Regions and put into a Select List
            List<StationRegionLookup> distinctItems = new List<StationRegionLookup>();
            distinctItems = (from d in _context.StationRegionLookup
                             select d).ToList()
                .GroupBy(x => x.Region)
                .Select(x => x.First()).ToList();
            return new JsonResult(distinctItems);
        }

 <div class="demo-section k-content">
        <h4>Regions</h4>
        @(Html.Kendo().DropDownList()
                  .Name("regions")
                  .DataTextField("Region")
                  .DataValueField("Region")
                  .DataSource(source =>
                  {
                      source.Read(read =>
                      {
                          read.Action("GetRegions", "DropDownList");
                      });
                  })
                  .HtmlAttributes(new { style = "width: 100%" })
        )
    </div>

 

 

 

 

 

11 Answers, 1 is accepted

Sort by
0
Michael
Top achievements
Rank 1
answered on 11 Feb 2018, 02:28 AM
Sorry forgot to mention this is a Razor Pages 2.0 project using Visual Studio 2017
0
Neli
Telerik team
answered on 15 Feb 2018, 07:17 AM
Hi Michael,

In order to have remote end point when using Razor Pages, the using of  'asp-page-handler' attribute is needed, as it is described in the linked article. Currently, this attribute is not supported.

A suggestion is to create a Controller as in standard MVC project and define action, responsible for the population with data for the widget. You will find such implementation in the attached sample project (razor-pages-dropdownlist-remote). 

Another possibility is to bind the data using the BindTo method.
@(Html.Kendo().DropDownList()
      .Name("persons")
      .Filter("startswith")           
      .DataTextField("Name")
      .BindTo(new List<Person>(Model.MyOjectToBindTo))
)

I have attached also a sample project, which demonstrates how to bind items of the DropDownList using BindTo method and a property from the PageModel (razor-pages-dropdown-bindto).


Regards,
Neli
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Michael
Top achievements
Rank 1
answered on 15 Feb 2018, 02:34 PM

Hi Neli,

So I got busy but I did eventually figure out the same thing you are showing.  I used this on my codebehind

 

regionsMaster = _context.StationRegionLookup.Select(region => new RegionMaster
{ regionID = region.Id,
regionName = region.Region
}).ToList()
.GroupBy(x => x.regionName)
.Select(x => x.First()).ToList();

And this in the cshtml page

 

<div class="demo-section k-content">
<h4>Regions</h4>
@(Html.Kendo().DropDownList()
.Name("region")
.BindTo(new List<FacilityDataManager.Models.RegionMaster>(Model.regionsMaster))
.DataValueField("regionName")
.DataTextField("regionName")
.HtmlAttributes(new { style = "width: 100%" })
)
</div>

 

Thanks for your answer.  Does the same also apply to the grid? Meaning do I need the 'asp-page-handler' attribute?  As I've moved on to try to bind data from EF to your grid. (I can open up a new post since I'm diverging from the original one and mark this one as answered)

 

Thanks

Michael

 

0
Neli
Telerik team
answered on 20 Feb 2018, 08:27 AM
Hello Michael,

Note, that when the widget is bound to the data by using the BindTo method or by passing the model in the constructor, the data is bound by local data binding. This means that the binding is one-way and no editing is possible. 

When the widget is bound to remote endpoints, such as Controller in MVC, all CRUD operations could be defined. Currently, if you need to bind data remotely, you will need to reference a service, that is not located in the Razor Page. 

On the following link from our repo, you will find an example of Grid with Razor Pages (local-data-binding).

In case you have additional questions related to the implementation and configurations in Grid, I would suggest you to open a separate thread. 

Regards,
Neli
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
ofzapata
Top achievements
Rank 1
answered on 30 Apr 2018, 07:34 AM

Hi I have my widget like this

                @(Html.Kendo().DropDownListFor(x => x.Constructora.LocalizacionId)
                              .DataValueField("Id")
                              .DataTextField("Descripcion")
                              .DataSource(source =>
                              {
                                  source.Read(read =>
                                  {
                                      read.Action("GetLocalizacionByParent", "Localizacion", new {id = 1});
                                  });

                              })
                              .HtmlAttributes(new { style = "height: 10%" })
                )

this is in a razor page.

and I have created a core controller to handle the call for the population with data. (not in the code behind of the razor page)

 public List<LocalizacionVM> GetLocalizacionByParent(int id)
        {
           

            var l = new List<LocalizacionVM>();

            var x =new LocalizacionVM()
            {
                Id = 1,
                Descripcion = "T"
            };
            l.Add(x);

            return l;
        }

this is like the attached examples but still not working.

 thnkas for your help!

0
Neli
Telerik team
answered on 03 May 2018, 06:22 AM
Hello,

I have modified one of the projects I have sent previously. I added a LocalizationVM class to the Index model. In the DropDownListController you will find the getLocalizationByParent method. The project is working correctly on my end. Usually the value in the DropDownList is 'undefined' when the dataTextField is not set correctly. Could you please double check the the response from the controller in order to confirm that the correct dataTextField is received?

Attached you will find the modified sample project. I would like to ask you to try to modify it, so to replicate the issue. Another possibility is to sent us an isolated sample where the issue is replicated. This way we could run it locally and assist you further. 

Regards,
Neli
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dan
Top achievements
Rank 1
Veteran
answered on 14 Mar 2019, 05:08 PM

I am just learning to use mvc core.  Following your example (razor-pages-dropdownlist-remote), I am trying to bind a drop down list to the results from a controller action, but i end up with "undefined" as the choices.  I am hoping you can point out where i have gone wrong.

on my index.cshtml page:

<div class="col-3" >
                     @(Html.Kendo().DropDownList()
                       .Name("ListClientType")
                       .DataTextField("ClientType")
                       .DataValueField("ClientType")
                        .DataSource(source =>
                          {
                              source.Read(read =>
                              {
                                  read.Action("GetClientTypes", "Home");
                              });
                          })               
                       .HtmlAttributes(new { style = "width: 95%" })
                    )
                </div>

in my controller:

public List<LuClientType> GetClientTypes()
        {
            var clientTypes = _context.LuClientType.Select(y => y).ToList();
            return clientTypes;
        }

public partial class LuClientType
    {
        public LuClientType()
        {
            ProviderService = new HashSet<ProviderService>();
        }

        public string ClientType { get; set; }
        public string ModifiedBy { get; set; }
        public DateTime? ModifiedDate { get; set; }
        public bool? Active { get; set; }

        public virtual ICollection<ProviderService> ProviderService { get; set; }
    }

 

 

 

0
Dimitar
Telerik team
answered on 18 Mar 2019, 09:13 AM
Hi Dan,

I would suggest you to debug to verify if the collection returned by the controller matches the fields defined for DataTextField and DataValueField and that the casing is correct. Then inspect the request in browser's network tab to verify again that the returned data is as expected. If this does not help you to resolve the issue, let's continue this discussion in the support ticket on this topic to avoid threads duplication.

Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Punprom
Top achievements
Rank 2
answered on 12 Sep 2019, 11:23 AM
Hi Neli, thanks for info as I am new to Core Razor Pages. Question, how do you get selected item normally in MVC5 I uses event from the drop down control, how do you do this in the Razor Pages (2.2 version).
0
Dimitar
Telerik team
answered on 17 Sep 2019, 09:31 AM

Hi Punprom,

The DropDownList TagHelper allows to use all of the events of the widget that can be configured with the MVC5 HtmlHelpers. Subscribing to events through the TagHelpers is described in the following section of the documentation:

Taking the above into consideration, in order to get the data item after selecting it and perform an action, the change event of the DropDownList could be used:

<kendo-dropdownlist name="products" filter="FilterType.StartsWith" on-change="onChange"></kendo-dropdownlist>

<script>
  function onChange(e) {
    var item = e.sender.dataItem();

    // ...
  }
</script>

Regards,
Dimitar
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
majed
Top achievements
Rank 1
answered on 03 Apr 2020, 10:51 PM

Add this code services
              .AddControllersWithViews()
              .SetCompatibilityVersion(CompatibilityVersion.Version_3_0)
              // Maintain property names during serialization. See:
              // https://github.com/aspnet/Announcements/issues/194
              .AddNewtonsoftJson(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());

at Startup in the ConfigureServices method

Tags
DropDownList
Asked by
Michael
Top achievements
Rank 1
Answers by
Michael
Top achievements
Rank 1
Neli
Telerik team
ofzapata
Top achievements
Rank 1
Dan
Top achievements
Rank 1
Veteran
Dimitar
Telerik team
Punprom
Top achievements
Rank 2
Dimitar
Telerik team
majed
Top achievements
Rank 1
Share this question
or