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

DropDown List Not Populating

4 Answers 713 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Marcab
Top achievements
Rank 1
Veteran
Marcab asked on 13 Apr 2020, 12:38 PM

Hello,

I'm using a dropdown list to display a list of campaigns for a user to choose from. The dropdown list is part of a custom editor template for adding/editing donations. The campaigns are stored in a separate table, that has no cardinal relationship with the underlying donations table used by the template. In this  use case scenario, the campaign table is being used as a lookup. The donation table simply stores the campaign name, nothing else is required beyond that, so no relationship is required.

The campaigns are being stored in a separate table because campaigns are often edited, added, or deleted independent of the rest of the application. There are also too many of them to either hard code or include in the markup.

For some reason, I'm not able to retrieve the data from the campaign table, something I thought would be pretty straightforward.

I'm including a .zip file containing the following relevant files:

Models

Donation.cs 

Campaign.cs 

Controllers

DonationsController.cs

CampaignController.cs

 

Custom Editor Template

DonationTemplate.cshtml

 

I'm not sure what I've done wrong here. This seems like it should pretty straightforward. Any advice/feedback would be very much appreciated.

 

Thank you!

 

 

 

4 Answers, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 15 Apr 2020, 09:18 AM

Hello Marcab,

I suppose you are referring to the following ComboBox widget present in the edit template:

@(Html.Kendo().ComboBoxFor(model => model.Campaign)

If that is the case, it has hardcoded values in its source:

	.BindTo(new List<string>() {
		"Coalition",
		"DD Hot Meals",
		"DD Pantry",
...

Instead, in order to properly read from the remote, it should call a Controller action. Note that such a controller action should avoid the DataSourceRequest parameter and should return a collection of items instead of the DataSourceResult object. Having that said, the ComboBox definition should be altered to:

@(Html.Kendo().ComboBoxFor(model => model.Campaign)
	.Placeholder("Select campaign...")
	.DataValueField("CampaignId")
	.DataTextField("Name")
	.DataSource(ds => ds.Read(r => r.Action("Campaigns_Read", "Home")))
	.SelectedIndex(0)
	.Suggest(true)
)

While the endpoint should be defined as:

public ActionResult Campaigns_Read()
{
	List<Campaign> campaigns = new List<Campaign>()
	{
		new Campaign() { CampaignId = 1, Name = "one" },
		new Campaign() { CampaignId = 2, Name = "two" },
		new Campaign() { CampaignId = 3, Name = "three" }
	};

	return Json(campaigns, JsonRequestBehavior.AllowGet);
}

Attached you will find a small sample implementing the above suggestion.

Regards,
Veselin Tsvetanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Marcab
Top achievements
Rank 1
Veteran
answered on 16 Apr 2020, 08:52 PM

Hi Veselin,

Thank you for your help.

I used a modified version of your solution, using a dropdown list and slightly different code in the controlller.

DropDown List definition

<div class="k-dropdown">
            <div class="k-dropdown">
                @(Html.Kendo().DropDownListFor(model => model.Campaign)
                    .Name("campaignDropDownList")
                    .DataTextField("Name")
                    .DataValueField("Name")
                    .OptionLabel("Select Campaign....")
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("Campaigns_ReadList", "Campaigns");
                        })
                        .ServerFiltering(true);
                    })
                    .SelectedIndex(0)

                )
            </div>
        </div>

 

Endpoint

public ActionResult Campaigns_ReadList()
{
            List<Campaign> result = db.Campaigns.ToList();
            return Json(result, JsonRequestBehavior.AllowGet);
 }

 

This works nicely, and populates my DropDown list with the names of various campaigns. 

I still have an issue though. The above solution works well when adding a new donation record. When editing an existing record, I'd like the selected item (campaign name)  in the DropDown list to be the same as the campaign name stored with the donation record. (The campaign name is being stored because there's no relationship between the Campaign and Donation tables).For example, if I'm editing a record with a donation for General Campaign, I'd like General Campaign to be selected in the DropDown by defaul

Also, when editing, if I select a new campaign, then save, the donation record isn't updated. I'm guessing that the issue here has something to do with the models and the underlying table relationships.

Is there a way to do this without there being a relationship between the tables? Am I missing something obvious?

Do I need to do something in the DropDown list Change event, to achieve the results I want? I looked, but I haven't been able to find the relevant documentation.

Thanks!

 

0
Accepted
Veselin Tsvetanov
Telerik team
answered on 20 Apr 2020, 12:56 PM

Hello Marcab,

In order model binding to work properly for each editor, the name attribute of the editor should match the field that is being edited. When using a strongly typed HTML helper (like the DropDownListFor()) that mapping is made automatically. Having that said, you should not explicitly specify Name() for the helper (editor), as that would break the binding. Try changing the DropDownList definition to:

                @(Html.Kendo().DropDownListFor(model => model.Campaign)
                    .DataTextField("Name")
                    .DataValueField("Name")
                    .OptionLabel("Select Campaign....")
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("Campaigns_ReadList", "Campaigns");
                        })
                        .ServerFiltering(true);
                    })
                    .SelectedIndex(0)
                )

If the above change does not help, please, modify the previously attached sample, so it replicates the issue in question and send it back to me. This way I will be able to troubleshoot the problem locally and to provide you with the most appropriate assistance for that case.

Regards,
Veselin Tsvetanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Marcab
Top achievements
Rank 1
Veteran
answered on 13 May 2020, 02:55 PM

Thank you again Veselin, and sorry for the delay in my reply.

I had to take some time off due to family issues and I'm just starting to get caught up with things again.

 

 

 

 

 

 

Tags
DropDownList
Asked by
Marcab
Top achievements
Rank 1
Veteran
Answers by
Veselin Tsvetanov
Telerik team
Marcab
Top achievements
Rank 1
Veteran
Share this question
or