Template Support

[ITninja]

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]

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,   

https://ej2.syncfusion.com/aspnet-core-blazor/documentation/release-notes/17.2.28/#common   

  

Please find the sample below,   

https://www.syncfusion.com/downloads/support/forum/145927/ze/WebApplication1-2056464837   

  

Regards,   

Berly B.C  

[ITninja]

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]

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 = "[email protected]" }); 

            data1.Add(new DDLData() { FullName = "Bugatti Chiron", Id = 2, EmailAddress = "[email protected]" }); 

            return data1; 

        } 

 

    } 

} 

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/145927/ze/WebApplication1-928938578  

Regards, 

Gopi G.