Unplanned
Last Updated: 08 May 2020 08:57 by ADMIN
ben
Created on: 01 May 2020 11:54
Category: ComboBox
Type: Feature Request
7
Combobox - Support Nested / Complex Models

Related to https://docs.telerik.com/blazor-ui/knowledge-base/grid-bind-navigation-property-complex-object

However I'm looking to do this for the Combobox, i.e.

<TelerikComboBox Data="@Users"                               
                                 @bind-Value="@FormElement.UserInitials"
                                 ValueField="Dto.UserInitials"                                 
                                 TextField="Dto.UserInitials"
               >
</TelerikComboBox>

 

public class Users

{

   //bunch of properties 

   public UserSubProperties Dto {get; set;}

}

 

public class UserSubProperties

{

   public string UserInitials {get; set;}

}

8 comments
ben
Posted on: 01 May 2020 14:33

That is exactly what I was looking for!

Sorry for the confusion on my part with my initial example.

-ben

ADMIN
Marin Bratanov
Posted on: 01 May 2020 14:31

Hello Ben,

Thank you for getting back to me. I got what I was missing. The Dto object (in this example) is not supposed to be a collection of the combo data, as I had understood, but simply another model.

I think this is the goal (some comments and dummy data added to clarify the concept), could you confirm if I got it right this time?

 

@FormElement.UserInitials @* You should see here things like "one", "two", "three" and that is what the combo dropdown should show *@
<br />

<TelerikComboBox Data="@Users"
                 @bind-Value="@FormElement.UserInitials"
                 ValueField="Dto.UserInitials"
                 TextField="Dto.UserInitials">
</TelerikComboBox>

@code{
    public List<User> Users { get; set; } = new List<User>()
    {
        new User{ Dto = new UserSubProperties { UserInitials = "one"   } },
        new User{ Dto = new UserSubProperties { UserInitials = "two"   } },
        new User{ Dto = new UserSubProperties { UserInitials = "three" } }
    };

    public TheFormModel FormElement { get; set; } = new TheFormModel() { UserInitials = "two" };

    public class User
    {
        //bunch of properties
        public UserSubProperties Dto { get; set; }
    }

    public class UserSubProperties
    {
        public string UserInitials { get; set; }
    }

    public class TheFormModel
    {
        public string UserInitials { get; set; }
    }
}

 

Regards,
Marin Bratanov
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.
ben
Posted on: 01 May 2020 13:19

Marin,

I think there is a disconnect, not an issue as I've gone a head and flattened my model on the backend with AutoMapper.

Thank you, and I appreciate the insight on how Telerik is reasoning about how these controls should be used.

-ben


ADMIN
Marin Bratanov
Posted on: 01 May 2020 13:09

Hello Ben,

Once you have a collection of nested fields, this means that the parent collection is not flat, it has a hierarchy, and that's not something a combo box can show - that's a task for a grid, treeview, treelist, menu or other similar hierarchical component. The combo box could show the main list, or the list of nested objects in one of its elements. In either case, you would pass the appropriate list to the combo box, either Data=@MainList, or Data=@MainList[3].TheChildList and set the value and text fields accordingly - they must be simple types for the ID (number, string, enum or guid), and a string for the text, and not collections.

Could you show me a valid example where the combo box data cannot be a flat list of objects that represent its data? The general approach is to provide a view-model that will have the needed data in the expected shape and the combo box is not an editor, nor does it provide pivoting capabilities (such as filtering, grouping and so on) so that it will need nested fields.


Am I missing something?

 

Regards,
Marin Bratanov
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.
ben
Posted on: 01 May 2020 13:04

Marin,

My main thrust is to use a List<ComplexObject> as the source of data for the Combobox, and then use one of the navigation properties in the ComplexObject to bind to and show the value, much like one does with the grid.

I've worked around this by flattening my Object I want to use with the combobox, however I think, possibly incorrectly, that others may stumble into this, thinking they can use the combobox like one does with the grid and a complex object.

 

ADMIN
Marin Bratanov
Posted on: 01 May 2020 12:53

Hello Ben,

The second example has the same issue as the first - the combo box data is not a collection of models, but a class type. This will not work. In this sample, the combo box data must be a collection of type UserSubProperties, as I showed in my previous post.

 

Regards,
Marin Bratanov
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.
ben
Posted on: 01 May 2020 12:48

Marin,

Sorry, I completely botched my example.  tldr If my list of elements that I'm binding to my Combobox is a complex object with navigation properties, I can't use it with the Combobox today with ValueField and TextField.

<TelerikComboBox Data="@Users"                               
                                 @bind-Value="@FormElement.UserInitials"
                                 ValueField="Dto.UserInitials"                                 
                                 TextField="Dto.UserInitials"
               >
</TelerikComboBox>

public List<User> Users {get; set;}

public class User

{

   //bunch of properties 

   public UserSubProperties Dto {get; set;}

}

 

public class UserSubProperties

{

   public string UserInitials {get; set;}

}

ADMIN
Marin Bratanov
Posted on: 01 May 2020 12:39

Hello Ben,

The Data of the combo box must be the collection of items you want in it: https://docs.telerik.com/blazor-ui/components/combobox/data-bind. The Users class is just a class, not a collection of models.

Here's how this should look:

@FormElement.UserInitials
<br/>
<TelerikComboBox Data="@ComboData"
                 @bind-Value="@FormElement.UserInitials"
                 ValueField="UserInitials"
                 TextField="UserInitials">
</TelerikComboBox>

@code{
    List<UserSubProperties> ComboData { get; set; }

    public class Users
    {
        //bunch of properties
        public UserSubProperties Dto { get; set; }
    }

    public class UserSubProperties
    {
        public string UserInitials { get; set; }
    }

    public class TheFormModel
    {
        public int Id { get; set; }
        public string UserInitials { get; set; }
    }

    TheFormModel FormElement { get; set; }

    protected override async Task OnInitializedAsync()
    {
        // use the actual business logic to fetch the data, this is just to get the sample running
        FormElement = new TheFormModel() { Id = 123, UserInitials = "item2" };
        ComboData = Enumerable.Range(1, 7).Select(x => new UserSubProperties { UserInitials = $"item{x}" }).ToList();
    }
}

 

Regards,
Marin Bratanov
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.