1. Home
  2. Forum
  3. Blazor
  4. Templates not working

Templates not working

With the latest version 18.1.0.36-beta your example with the listitem template is not working anymore.
Will there be an update in the near future or should we stay at 17.4.0.55?

6 Replies
SD Saranya Dhayalan Syncfusion Team March 24, 2020 11:32 AM UTC

Hi Thomas, 
 
Thank you for contacting Syncfusion support 
 
Query: With the latest version 18.1.0.36-beta your example with the listitem template is not working anymore. 
 
We have checked your reported issue in 18.1.0.36 beta version, we are not able to reproduce it in our end. Please find the below code snippet: 
 
@using Syncfusion.Blazor.DropDowns 
 
<SfListBox TValue="string[]" DataSource="@Data" TItem="ListData"> 
    <ListBoxFieldSettings Text="Text"></ListBoxFieldSettings> 
    <ListBoxTemplates TItem="ListData"> 
        <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> 
</SfListBox> 
 
@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; } 
    } 
} 
 
For your convenience we have prepared a sample. Please find the below sample link 
 
 
 
 
Query:  Will there be an update in the near future, or should we stay at 17.4.0.55? 
 
We would like to let you know that we will fix the bug if any reported in the future and suggest you to use the latest version to avail latest bug fixes or improvements. 
 
Please let us know if you need further assistance on this. 
 
Regards, 
Saranya Dhayalan 


TR Thomas Riml March 24, 2020 11:46 AM UTC

Hi,

thanks for quick reply. Tested your example. Its not the same as it was before 18.1.0.36-beta.

Attached a screenshot.

regards
thomas



Attachment: CaptureSF_6ba3288a.rar

SD Saranya Dhayalan Syncfusion Team March 25, 2020 01:25 PM UTC

Hi Thomas, 
 
We have checked ListBox items can be customized according to the requirement using ItemTemplate property. Please find the below code snippet: 
 
@using Syncfusion.Blazor.DropDowns 
 
<SfListBox TValue="string[]" DataSource="@Data" TItem="ListData"> 
    <ListBoxFieldSettings Text="Text"></ListBoxFieldSettings> 
    <ListBoxTemplates TItem="ListData"> 
        <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> 
</SfListBox> 
 
@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('1.png'); 
    } 
 
    .typescript { 
        background-image: url('2.png'); 
    } 
 
    .angular { 
       background-image: url('3.png'); 
    } 
 
    .vue { 
      background-image: url('4.png'); 
    } 
 
    .react { 
        background-image: url('5.png'); 
    } 
</style> 
 
For your convenience we have prepared a sample. Please find the below sample link 
 
 
 
Please replicate your reported issue in the above sample or please provide the video demonstration of the issue and get back to us if you need further assistance on this. 
 
Regards, 
Saranya D 


TR Thomas Riml March 25, 2020 02:10 PM UTC

Hi,

thanks for answer. But in your attached video the ListItems are not shown correctly.
They are overlapping and you do not see the ListData.Description.


How do i get it like in your example:
https://blazor.syncfusion.com/documentation/listbox/icons-and-templates/?no-cache=1

best regards
thomas



SD Saranya Dhayalan Syncfusion Team March 26, 2020 09:02 AM UTC

Hi Thomas, 
 
Sorry for the inconvenience caused 
 
They are overlapping and you do not see the ListData.Description. 
 
We have checked your reported issue, we can resolve this by using CSS styles. Please find the below code snippet: 
 
     <style> 
            .e-listbox-wrapper:not(.e-list-template) .e-list-item, .e-listbox-wrapper .e-selectall-parent { 
                height: 80px; 
                line-height: 1.5; 
                padding: 0px 16px 8px 16px; 
                position: relative; 
            } 
 
                .list-wrapper .e-avatar { 
                    position: absolute; 
                    left: 5px; 
                    background-color: transparent; 
                    font-size: 22px; 
                    top: calc(50% - 33px); 
                } 
     </style> 
 
For your convenience we have prepared a sample. Please find the below sample link 
 
 
Please let us know if you need further assistance on this. 
 
Regards, 
Saranya D 


SD Saranya Dhayalan Syncfusion Team June 9, 2020 02:45 PM UTC

 
Hi Thomas,  
 
We have validated your reported issue and we are able to reproduce this issue in our end. We have logged a defect report for this, and the fix will be available in our Essential studio 2020 volume 2 release. You can track the status of this defect using below link from our feedback portal,  
 
 
Regards, 
Saranya D 


Loader.
Up arrow icon