We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

modelType in ListBox

@using Syncfusion.EJ2.Blazor.DropDowns

<EjsListBox TValue="string[]" DataSource="@Data" ModelType="@Model">
<ListBoxFieldSettings Text="Text"></ListBoxFieldSettings>
            <div class="list-wrapper">
                <span class="@((context as ListData).Pic) e-avatar e-avatar-xlarge e-avatar-circle"></span>
                <span class="text">@((context as ListData).Text)</span><span class="description">@((context as ListData).Description)</span>

@code {
    public ListData Model = new ListData();
    public List<ListData> Data = new List<ListData>
        new ListData { Text = "Javascript", Pic = "javascript", Description = "It is a lightweight interpreted or JIT-compiled programming language." },
        new ListData { Text = "Typescript", Pic = "typescript", Description = "It is a typed superset of Javascript that compiles to plain JavaScript." },
        new ListData { Text = "Angular", Pic = "angular", Description = "It is a TypeScript-based open-source web application framework." },
        new ListData { Text = "React", Pic = "react", Description = "A JavaScript library for building user interfaces. It can also render on the server using Node." },
        new ListData { Text = "Vue", Pic = "vue", Description = "A progressive framework for building user interfaces. it is incrementally adoptable." }

    public class ListData
        public string Text { get; set; }
        public string Pic { get; set; }
        public string Description { get; set; }

    .e-listbox-wrapper {
        margin: auto;
        max-width: 400px;
        box-sizing: border-box;

    .list-wrapper {
        height: inherit;
        position: relative;
        padding: 14px 12px 14px 78px;

    .list-wrapper .text,
    .list-wrapper .description {
        display: block;
        margin: 0;
        padding-bottom: 3px;
        white-space: normal;

    .list-wrapper .description {
        font-size: 12px;
        font-weight: 500;

    .e-listbox-wrapper .list-wrapper .text {
        font-weight: bold;
        font-size: 13px;

    .list-wrapper .e-avatar {
        position: absolute;
        left: 5px;
        background-color: transparent;
        font-size: 22px;
        top: calc(50% - 33px);

    .javascript {
        background-image: url('./images/javascript.svg');

    .typescript {
        background-image: url('./images/typescript.svg')

    .angular {
        background-image: url('./images/angular.svg');

    .vue {
        background-image: url('./images/vue.svg');

    .react {
        background-image: url('./images/react.svg');

Attachment: ModelTypeInListBox_10f2bcd0.zip

1 Reply

SD Saranya Dhayalan Syncfusion Team January 7, 2020 01:43 AM

Hi Ebi, 
Thank you for contacting Syncfusion support 
We have checked your reported issue, ModelType’s type has been changed from object to Type for better user experience in tag generation for non-generic type component templates. Please find the below code snippet: 
<EjsListBox TValue="string[]" DataSource="@Data" ModelType="@typeof(ListData)"> 
Please find the release notes for the ModelType 
Could you please check the above sample link and get back to us, if you need any further assistance on this? 
Saranya D 

Live Chat Icon For mobile
Up arrow icon