1. Home
  2. Forum
  3. Blazor
  4. AllowCustomValue and ValueTemplate at the same time

AllowCustomValue and ValueTemplate at the same time

Hi,

If i have the following:

<SfMultiSelect TValue="string[]" Placeholder="" ModelType="@models" DataSource="@Emails" AllowCustomValue="true" Mode="@VisualMode.Box">    
    <MultiSelectTemplates>
        <ValueTemplate>
            <span>@((context as Email).FullAddress)</span>
        </ValueTemplate>
    </MultiSelectTemplates>
    <MultiSelectFieldSettings Text="Name" Value="Address"></MultiSelectFieldSettings>
</SfMultiSelect>

@code {

    Type models = typeof(Email);

    public class Email
    {
        public string Name { get; set; }
        public string Address { get; set; }


        public string FullAddress
        {
            get
            {
                return $"{Name} <{Address}>";
            }
        }
    }

    private List<Email> Emails = new List<Email>
{
        new Email {Name ="Reggy Lambert",Address="[email protected]"},
        new Email {Name ="Saxon Stangroom",Address="[email protected]"},
        new Email {Name ="Cassey Swash",Address="[email protected]"},
        new Email {Name ="Beth Buzek",Address="[email protected]"},
        new Email {Name ="Thatcher Brient",Address="[email protected]"},
        new Email {Name ="Jesse McMains",Address="[email protected]"},
        new Email {Name ="Woody Pietasch",Address="[email protected]"},
    };
}

If the user selects something custom, it should just display the custom that the user typed, not use the itemtemplate, since it will never exist in the Emails list.



1 Reply
SN Sevvandhi Nagulan Syncfusion Team April 13, 2020 10:28 AM UTC

Hi Kjartan, 

Greetings from Syncfusion support. 

We achieved the reported requirement using the valueTemplate. We showed the custom value as used typed manner, and other values template will be applied. Kindly refer the below code, 

<SfMultiSelect TValue="string[]" Placeholder="" ModelType="@models" DataSource="@Emails" AllowCustomValue="true" Mode="@VisualMode.Box"> 
    <MultiSelectTemplates> 
        <ValueTemplate> 
            @if (this.Emails.Where(name => name.Name == (context as Email).Name).Count() > 0) 
            { 
                <span> 
                    @((context as Email).Name) 
                    <span>&lt;@((context as Email).Address)&gt;</span> 
                </span> 
            } 
            else 
            { 
                <span>@((context as Email).Name) </span> 
            } 
        </ValueTemplate> 
    </MultiSelectTemplates> 
    <MultiSelectFieldSettings Text="Name" Value="Address"></MultiSelectFieldSettings> 
</SfMultiSelect> 
 
@code { 
 
    Type models = typeof(Email); 
 
    public class Email 
    { 
        public string Name { get; set; } 
        public string Address { get; set; } 
        public bool CustomValue { get; set; } 
    } 
 
    private List<Email> Emails = new List<Email> 
{ 
        new Email {Name ="Reggy Lambert",Address="[email protected]"}, 
        new Email {Name ="Saxon Stangroom",Address="[email protected]"}, 
        new Email {Name ="Cassey Swash",Address="[email protected]"}, 
        new Email {Name ="Beth Buzek",Address="[email protected]"}, 
        new Email {Name ="Thatcher Brient",Address="[email protected]"}, 
        new Email {Name ="Jesse McMains",Address="[email protected]"}, 
        new Email {Name ="Woody Pietasch",Address="[email protected]"}, 
    }; 
} 
 




Regards, 
Sevvandhi N 


Loader.
Up arrow icon