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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

modelType in ListBox

Thread ID:





150415 Jan 6,2020 03:35 PM UTC Jan 7,2020 06:43 AM UTC Blazor 1
Tags: ListBox
ebi torabi
Asked On January 6, 2020 03:35 PM UTC

@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

Saranya Dhayalan [Syncfusion]
Replied On January 7, 2020 06:43 AM UTC

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 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon