Dropdownlist template format after selection

[Francisco]

Hi,

The dropdownlist tempalte is working properly but after a record is selected it only shows the first record and not the whole structure of the template.

 <SfDropDownList TValue="string" TItem="Location" Placeholder="Location" DataSource="@SiteList" @bind-Value="ModifiedModel.Site">

           <DropDownListTemplates TItem="Location">

                                <ItemTemplate>

                                    <table><tbody><tr><td class="e-text-center column-width">@((context as Location).Recid)</td><td>@((context as Location).Displayname)</td></tr> </tbody></table>

                                </ItemTemplate>

                                <ValueTemplate>

                                    <span>@((context as Location).Recid)</span>

                                </ValueTemplate>

                </DropDownListTemplates>

              <DropDownListFieldSettings Value="Recid" Text="Recid"></DropDownListFieldSettings>

 </SfDropDownList>

How can i fix this?

[UdhayaKumar Duraisamy]

You can use the same structure of the ItemTemplate in the ValueTemplate to display the selected item, just like the data item in the popup. Please refer to the code snippet shared below for more information.

@page "/"

 

@using Syncfusion.Blazor.DropDowns

@using Syncfusion.Blazor.Popups

 

<div style="margin:130px auto;width:300px">

    <SfDropDownList TValue="string" TItem="Country" Placeholder="Location" DataSource="Countries" Width="300px">

        <DropDownListTemplates TItem="Country">

            <ItemTemplate>

                <table>

                    <tr>

                        <td width="150px"><span class='name'>@((context as Country).Name)</span></td>

                        <td width="150px"><span class='destination'>@((context as Country).Code)</span></td>

                    </tr>

                </table>

            </ItemTemplate>

            <ValueTemplate>

                <table>

                    <tr>

                        <td width="150px"><span class='name'>@((context as Country).Name)</span></td>

                        <td width="150px"><span class='destination'>@((context as Country).Code)</span></td>

                    </tr>

                </table>

            </ValueTemplate>

        </DropDownListTemplates>

        <DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings>

    </SfDropDownList>

</div>

@code {

 

    public class Country

    {

        public string Name { get; set; }

 

        public string Code { get; set; }

    }

    List<Country> Countries = new List<Country>

    {

        new Country() { Name = "Australia", Code = "AU" },

        new Country() { Name = "Bermuda", Code = "BM" },

        new Country() { Name = "Canada", Code = "CA" },

        new Country() { Name = "Cameroon", Code = "CM" },

        new Country() { Name = "Denmark", Code = "DK" },

        new Country() { Name = "France", Code = "FR" },

    };

}

<style>

    .e-ddl.e-input-group .e-input-value {

        margin: 5px;

    }

 

    table, td, th {

        border: none;

    }

 

    th {

        text-align: left;

        padding: 5px;

    }

</style>