Undefined in DropdownList

[Michael]

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>

 

 

 

 

 

[Michael]

Sorry forgot to mention this is a Razor Pages 2.0 project using Visual Studio 2017

[Neli]

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

[Michael]

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

 

[Neli]

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

[ofzapata]

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!

[Neli]

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

[Dan]

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

 

 

 

[Dimitar]

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

[Punprom]

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).

[Dimitar]

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:

• https://docs.telerik.com/aspnet-core/tag-helpers/overview#handling-widget-events
  

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

[majed]

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