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

Dropdownlistfor Displaying [object Object] when selecting items

4 Answers 923 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Gez
Top achievements
Rank 1
Gez asked on 07 Feb 2018, 10:19 AM

Hello,

Since updating to the latest version of UI for MVC, I've been having issues with DropdownListFor. Everything seems to work fine i.e. load the data and displaying it fine when you click on the icon to open the popup. However, when you select a value, the text displayed is [object Object]. I have no idea why this is and I have searched around for a solution to no avail. I would really appreciate some help on this issue. Below is a sample of my code:

@{
                        Html.Kendo().DropDownListFor(m => m.Centres)
                            .Name("cboCentres")
                            .DataTextField("CentreName")
                            .DataValueField("CentreId")
                            .OptionLabel(new
                            {
                                CentreName = "All",
                                CentreId = 0
                            })
                            .DataSource(ds =>
                            {
                                ds.Read(r => r.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "Lookup", action = "GetCentres" })).Type(HttpVerbs.Get));
                            })
                            .Events(e =>
                            {
                                e.Change("cboCentres_SelectedValueChanged");
                            })
                            .Value("0")
                            .Render();
                    }

 

Below is my code for getting the data using WebApi:

public async Task<HttpResponseMessage> GetCentres() => Request.CreateResponse(HttpStatusCode.OK, await _CentreServices.GetCentres(), Configuration.Formatters.JsonFormatter);

 

As an aside, another minor issue I am having is with the grid. Despite the grid displaying data, at the bottom right of it, I get the text "No items to display" instead of the previous "5 of 10 items" for example.

Regards

4 Answers, 1 is accepted

Sort by
0
Nencho
Telerik team
answered on 09 Feb 2018, 08:44 AM
Hello Gez,

I have performed some local tests, but I was unable to replicate the described issue, using our latest official release. The Text field is properly displayed in the dropdown element. Regarding the demonstrated implementation itself, I would like to ask the following questions, in order to clear up the usage:

- Once the DropdownListFor is bound to a list from the model (m.Centres) there is not need to specify the read action of the DataSource. Could you specify whether this is intentional?
- The main purpose of the For editors (DropdownListFor) is to have the ability to set the selected value from the model and then bind the widget to this fields e.g:

@(Html.Kendo().DropDownListFor(m => m.CentreId)     
          .BindTo(Model.Centres)
      .DataTextField("CentreName")
      .DataValueField("CentreId")
)
 
----------------------
        public ActionResult Index()
        {
            var model = new Centre
            {
                Centres = GetList(),               
                CentreId = "2"
            };
            return View(model);
        }

That being said, could you specify the need of the Value setting that is demonstrated in the code snippet?

In the attachment, you can find a runnable example, where the local tests were performed. Could you please modify it so we could observe the issues at your end.

Also, please provide an example of the Grid issue that you described in your question, so we could get a clearer picture on the implementation and the exact issue.

Regards,
Nencho
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
Gez
Top achievements
Rank 1
answered on 09 Feb 2018, 09:27 AM

Hello Nencho,

Thanks for the response. The Text field does display properly when they popup appears. However, when you do select an item, rather than display the Text field, it displays [object Object]. That's the issue.

Also, I realised that I was using the wrong widget. When I started the project, I did so with the DropDownListFor, but I realise there was no need for it and it wasn't actually bound to the model. Not sure how it's worked so far. I have modified that to use the DropDownList instead, but I am still having the same issue. The Value setting in the code snippet simply serves as a default value for passing to the grid. Without it, the grid doesn't actually display any data unless I change the selected item in the dropdown.

Below are the code snippets for the dropdownlist and grid. I have also attached a screenshot showing the issues.

@{
                        Html.Kendo().DropDownList()
                            .Name("cboCentres")
                            .DataTextField("CentreName")
                            .DataValueField("CentreId")
                            .OptionLabel(new
                            {
                                CentreName = "All",
                                CentreId = 0
                            })
                            .DataSource(ds =>
                            {
                                ds.Read(r => r.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "Lookup", action = "GetCentres" })).Type(HttpVerbs.Get));
                            })
                            .Events(e =>
                            {
                                e.Change("cboCentres_SelectedValueChanged");
                            })
                            .Value("0")
                            .Render();
                    }
 
@{
                        Html.Kendo().Grid<Leap.Models.spLearnersGetList_Result>()
                            .Name("grdLearners")
                            .Columns(col =>
                            {
                                col.Bound(g => g.LearnerId).Hidden(true);
                                col.Bound(g => g.ParentId).Hidden(true);
                                col.Bound(g => g.LearnerName).Title("Learner");
                                col.Bound(g => g.ParentName).Title("Parent");
                                col.Bound(g => g.CentreName).Title("Centre");
                                col.Bound(g => g.LevelName).Title("Level");
                                col.Bound(g => g.AllergiesOrMedical).Title("Allergies or Medical Conditions");
                                col.Bound(g => g.InformationForLeap).Title("Information");
                                col.Command(c =>
                                {
                                    c.Custom("btnViewLearner").Text(" ").Click("ViewLearner");
                                }).Width(50);
                            })
                            .Events(e => e.DataBound("grdLearners_AddIcons"))
                            .Pageable()
                            .Sortable()
                            .Scrollable()
                            .Selectable(s => s.Enabled(false))
                            .Editable(e => e.Enabled(false))
                            .NoRecords("No learner records available")
                            .DataSource(ds => ds
                                  .WebApi()
                                  .Read(read => read.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "Lookup", action = "GetLearnersList" }))
                                                    .Type(HttpVerbs.Get).Data("onGridRead"))
                                  .PageSize(20)
                            )
                            .Render();
                    }

 

Regards

0
Nencho
Telerik team
answered on 12 Feb 2018, 09:20 AM
Hello Gez,

The demonstrated implementation seems correct and I am afraid that we would need more details, in order to determine the exact reason for the described issue. It would be best, if you could isolate the issue in a simplified runnable example and provide us with it. Hence, we will be able to locally replicate the and examine the reason for it. In addition, you can use some dummy data for datasource.

Regards,
Nencho
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
Gez
Top achievements
Rank 1
answered on 20 Feb 2018, 09:02 AM

Hello Nencho,

Apologies for the delayed response. Just a quick update. I figured out what the issue was, and it's to do with including the "kendo.mobile.min.js" file with the bundle. Even those it doesn't produce any errors, I assume there must be some sort of conflict or something. Either way, removing the file from the bundle has fixed the issue. Thanks for the assistance.

Regards

Tags
DropDownList
Asked by
Gez
Top achievements
Rank 1
Answers by
Nencho
Telerik team
Gez
Top achievements
Rank 1
Share this question
or