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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Template Support

Thread ID:

Created:

Updated:

Platform:

Replies:

145927 Jul 14,2019 05:34 PM UTC Jul 16,2019 07:05 AM UTC Blazor 3
loading
Tags: Dropdown List
ITninja
Asked On July 14, 2019 05:34 PM UTC

It appears that template support for Dropdown List exists, but I do not see any documentation around this.

Is it implemented fully? If so can you provide an example of how to render a custom template for a drop down list item?

Berly Christopher [Syncfusion]
Replied On July 15, 2019 09:01 AM UTC

Hi Ozzie,     
   
Greetings from Syncfusion Support.   
   
We are currently working on providing the template support sample in UG, and we will update within a week. However, in the Syncfusion product version V17.2.28-beta, we have given template support. In DropDownList, we have prepared the sample with custom template.   
  
Please find below the release notes,   
  
Please find the sample below,   
  
Regards,   
Berly B.C  


ITninja
Replied On July 15, 2019 10:28 AM UTC

Berly, thanks for the quick response.

The template does work with the fields listed in DropDownListFieldSettings, however we'd like to use other properties.

For instance I have a drop down list of users, I'd like to not only get their email but their name.

My list setup looks like this:

<EjsDropDownList Placeholder="Choose Existing User" FloatLabelType="FloatLabelType.Auto" DataSource="@existingUsers" @bind-Value="@existingUser" ShowClearButton="false">
                        <DropDownListTemplates>
                            <ItemTemplate>
                                    <span><span>@context.FullName</span><span>@context.EmailAddress</span></span>
                            </ItemTemplate>
                        </DropDownListTemplates>
                        <DropDownListFieldSettings Text="EmailAddress" Value="Id"></DropDownListFieldSettings>
</EjsDropDownList>


When running the code above we get blank lines on the DropDown list for each item we are trying to show. There's also an exception thrown for 'FullName' being null. It appears the context object doesn't pass every available property through, just the ones in Text and Id.

Is it possible to get access to all available properties?


Thanks!

Gopi Govindasamy [Syncfusion]
Replied On July 16, 2019 07:05 AM UTC

Hi Ozzie, 

Thanks for the update.   
  
We have checked your code snippet and we could see that you have missed to add ModelType property. The DropDownList must be linked to the named model in order to use the templates. This can be done by specifying the type of model using the DropDownList component's ModelType property. Ensure to update name(text, value) based on the value in the dropdownlist component. Therefore, please add the text and value field alone and do not add any other data fields.   
  
Template context: Most of the templates used by DropDownList are RenderFragment < T > type where the parameters are passed. Using the implicit parameter named context, you can access the parameters are passed in the templates. You can also use the context variable to modify this implicit name of the parameter.   
   
Based on your requirement, we have altered the code and prepared a sample.   
 
 
<EjsDropDownList ModelType="@existingUserData" Placeholder="Choose Existing User" FloatLabelType="@FloatLabelType.Auto" DataSource="@existingUsers" ShowClearButton="false"> 
    <DropDownListTemplates> 
        <ItemTemplate> 
            <span><span>@((context as DDLData).FullName)</span>-<span></span><span>@((context as DDLData).EmailAddress)</span></span> 
        </ItemTemplate> 
        <ValueTemplate> 
            <span><span>@((context as DDLData).FullName)</span>-<span></span><span>@((context as DDLData).EmailAddress)</span></span> 
        </ValueTemplate> 
    </DropDownListTemplates> 
    <DropDownListFieldSettings Text="EmailAddress" Value="Id"></DropDownListFieldSettings> 
</EjsDropDownList> 
 
@code{ 
    public DDLData existingUserData = new DDLData(); 
 
    public object existingUser { get; set; } 
    public List<DDLData> 
    existingUsers 
    { get; set; } = new DDLData().GetData(); 
 
    public class DDLData 
    { 
        public string FullName { get; set; } 
        public string EmailAddress { get; set; } 
        public int Id { get; set; } 
 
        public List<DDLData> 
            GetData() 
        { 
            List<DDLData> 
                data1 = new List<DDLData> 
                    (); 
 
            data1.Add(new DDLData() { FullName = "Hennessey Venom", Id = 1, EmailAddress = "Hennessey123@outlook.com" }); 
            data1.Add(new DDLData() { FullName = "Bugatti Chiron", Id = 2, EmailAddress = "Bugatti987@outlook.com" }); 
            return data1; 
        } 
 
    } 
} 
 

Regards, 
Gopi G. 
 


CONFIRMATION

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