How to bind Kendo DropDownList to nested object

Question

Note: this is using the Kendo UI for .NET Core package which while similar has differences from the Jquery version so please focus on this platform only.

Initially I had a client dropdown that was bound to IEnumerable<Client> returned from Controller and it worked fine:

 @(Html.Kendo().DropDownList()
            .Name("ddlClient")
            .DataTextField("ClientName")
            .DataValueField("ClientID")
            .DataSource(source => {
                source.Read(read => {
                    read.Action("GetClient", "Home");
                });
            })           
        )

But after restructuring some code I wanted to be able to return an IEnumerable<ClientViewModel> from the Controller instead, where ClientViewModel would be:

public class ClientViewModel{
   public Client SelectedClient {get; set;}
   public ClientDivison SelectedClientDivision {get; set;}
   public SomeOtherProperty TheSomeOtherProperty {get; set;}
   //etc
}

I modified the dropdownlist to be as follows but it is not working as expected. I verified that the Controller call is still firing and is still returning records as it should be (of type ClientViewModel).

Here is the modified DropDownList code

  @(Html.Kendo().DropDownList()
            .Name("ddlClient")
            .DataTextField("SelectedClient.ClientName")
            .DataValueField("SelectedClient.ClientID")
            .DataSource(source => {
                source.Read(read => {
                    read.Action("GetClient", "Home");
                });
            })           
        )

Also note, I cannot bind this to the main model defined for the view itself since that is a different model altogether, this a standalone dropdown.

I feel like I've referenced nested properties like this before.

What have I got wrong here?

Answer 1

It seems you are extremely close: just bear in mind MVC serialises JSON object keys into camelCase by default:

this worked for me:

  @(Html.Kendo().DropDownList()
            .Name("ddlClient")
            .DataTextField("selectedClient.clientName") // notice casing on both properties
            .DataValueField("selectedClient.clientID") // notice casing on both properties
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetClient", "Home");
                });
            })
            )