1. Home
  2. Forum
  3. Blazor
  4. MultiSelect ItemTemplates not working

MultiSelect ItemTemplates not working

Hi Support

I am trying to use simple MultiSelect with ItemTemplate to allow a user to select a databound item and enter a value for that item - follows a very simple example that does not work - The ItemTemplate part does not show anything let alone allow the user to enter a value in the input box to bind to the Quantity property of the datasource. I would really appreciate some help Thanks!

Display is meant to end up like image below



<SfMultiSelect TValue="List<ActivityCode>" Placeholder="Select Activity" DataSource="Codes">
    <MultiSelectTemplates>
        <ItemTemplate Context="item">
            <div style="background:red;width:100px;height:30px">
                @((item as ActivityCode).Code) - @((item as ActivityCode).Name)
            </div>
            <span>
                <input type="text" class="form-control" @bind="@((item as ActivityCode).Quantity)" />
            </span>
        </ItemTemplate>
        <ValueTemplate Context="item">
            <input type="text" class="form-control" @bind="@((item as ActivityCode).Quantity)" />
        </ValueTemplate>
    </MultiSelectTemplates>
    <MultiSelectFieldSettings Text="Code" Value="Name"></MultiSelectFieldSettings>
</SfMultiSelect>

@code{

    List<ActivityCode> Codes;
    protected override void OnInitialized()
    {
        Codes = new List<ActivityCode>();
        Codes.Add(new ActivityCode() { Code = "A1", Name = "Act1" });
        Codes.Add(new ActivityCode() { Code = "A2", Name = "Act2" });
        Codes.Add(new ActivityCode() { Code = "A3", Name = "Act3" });
    }

    private class ActivityCode
    {
        public string Code { get; set; }
        public string Name { get; set; }
        public int Quantity { get; set; }
    }
}

3 Replies 1 reply marked as answer
BC Berly Christopher Syncfusion Team December 2, 2020 01:16 PM UTC

Hi Laurence, 
  
Greetings from Syncfusion support. 
  
The reported issue is caused due to missing of models property defined in the MultiSelect component when we render with help of template concept. Please refer the below code snippet. 
  
<SfMultiSelect TValue="List<ActivityCode>"  ModelType="@models"  Placeholder="Select Activity" DataSource="Codes"> 
    <MultiSelectTemplates> 
        <ItemTemplate Context="item"> 
            <div style="background:red;width:100px;height:30px"> 
                @((item as ActivityCode).Code) - @((item as ActivityCode).Name) 
            </div> 
            <span> 
                <input type="text" class="form-control" @bind="@((item as ActivityCode).Quantity)" /> 
            </span> 
        </ItemTemplate> 
        <ValueTemplate Context="item"> 
            <input type="text" class="form-control" @bind="@((item as ActivityCode).Quantity)" /> 
        </ValueTemplate> 
    </MultiSelectTemplates> 
    <MultiSelectFieldSettings Text="Code" Value="Name"></MultiSelectFieldSettings> 
</SfMultiSelect> 
 
@code{ 
    Type models = typeof(ActivityCode); 
    List<ActivityCode> Codes; 
    protected override void OnInitialized() 
    { 
        Codes = new List<ActivityCode>(); 
        Codes.Add(new ActivityCode() { Code = "A1", Name = "Act1" }); 
        Codes.Add(new ActivityCode() { Code = "A2", Name = "Act2" }); 
        Codes.Add(new ActivityCode() { Code = "A3", Name = "Act3" }); 
    } 
 
    private class ActivityCode 
    { 
        public string Code { get; set; } 
        public string Name { get; set; } 
        public int Quantity { get; set; } 
    } 
} 
  
  
We will correct and update the documentation in Volume 4 Main release which is expected to be rolled out on end of December 2020. 
  
Regards, 
Berly B.C 


Marked as answer
LA Laurence December 2, 2020 05:27 PM UTC

Thank you so much that works better!

BC Berly Christopher Syncfusion Team December 3, 2020 05:49 AM UTC

Hi Laurence, 
  
Most welcome. Please let us know if you need further assistance on this. 
 
  
Regards, 
Berly B.C 


Loader.
Up arrow icon