modelType in ListBox

[ebi torabi]

@using Syncfusion.EJ2.Blazor.DropDowns

<EjsListBox TValue="string[]" DataSource="@Data" ModelType="@Model">
<ListBoxFieldSettings Text="Text"></ListBoxFieldSettings>
    <ListBoxTemplates>
        <ItemTemplate>
            <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>
            </div>
        </ItemTemplate>
    </ListBoxTemplates>
</EjsListBox>

@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; }
    }
}

<style>
    .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');
    }
</style>

Attachment: ModelTypeInListBox_10f2bcd0.zip

[Saranya Dhayalan]

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 

 

https://ej2.syncfusion.com/blazor/documentation/release-notes/17.4.39/#common 

 

Could you please check the above sample link and get back to us, if you need any further assistance on this? 

 

Regards, 

Saranya D