Listbox Template updating on every new Item

[Eli]

I have a Listbox which is meant to contain multiple MediaCard components. My issue is that everytime Add Media is called, it updates all the MediaCards in the ListBox so they all have the same ListIndex. I think my issue is that I am misusing the ItemTemplate tag. I also think that I am doing this in a much more clunky way than I could. Finally I would like to disable selection, if it's possible.

@page "/test"

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.DropDowns

<div class="container px-5">

    <SfButton @onclick="AddMedia">Add Media</SfButton>

    <SfListBox TValue="int[]" DataSource="@Data" TItem="ViewMedia" @ref="MediaListBoxObj">

        <ListBoxFieldSettings></ListBoxFieldSettings>

        <ListBoxTemplates TItem="ViewMedia">

            <ItemTemplate>

                <MediaCard media="new ViewMedia { ListIndex = MediaCount }" ></MediaCard>

            </ItemTemplate>

        </ListBoxTemplates>

        <ListBoxSelectionSettings Mode="SelectionMode.Single"></ListBoxSelectionSettings>

    </SfListBox>   

</div>

@code { 

    // public ListData Model = new ListData();

    SfListBox<int[], ViewMedia> MediaListBoxObj;

    public List<ViewMedia> Data = new List<ViewMedia>

    {

        new ViewMedia{ ListIndex = 0}

    };  

    int MediaCount = 0;

    public List<ViewMedia> NewMediaItem { get; set; } = new List<ViewMedia>();

    public List<ViewMedia> NewMedia()

    {

        NewMediaItem.Add(new ViewMedia { ListIndex = MediaCount});

        return NewMediaItem;

    }

    private void AddMedia()

    {

        var newMediaItem = NewMedia();

        MediaListBoxObj.AddItems(newMediaItem);

        Data.Add(newMediaItem[0]);

        MediaCount++;        

        NewMediaItem.Clear();

    }

My MediaCard file:

<div class="AddMedia">

    <div name="mediaAdd" class="container-fluid px-4">

        <div class="form-row align-middle mb-2 pl-1">

            <SfTextBox CssClass="e-filled" Placeholder="Provide a brief description" @bind-Value="media.Blurb"></SfTextBox>

        </div>

        <div class="form-row">

            <label class="form-check-label">

                Is there any blood or gore in the video?<span class="text-danger ml-1">*</span>

            </label>

            <div class="row">

                <div class="form-check m-2 d-inline">

                    <SfRadioButton Label="No" Name="@media.ListIndex.ToString()" Value="0" Checked="@media.Gore"></SfRadioButton>

                </div>

                <div class="form-check m-2 d-inline">

                    <SfRadioButton Label="Yes" Name="@media.ListIndex.ToString()" Value="1" Checked="@media.Gore"></SfRadioButton>

                </div>

            </div>

        </div>

    </div>

</div>

@code {

    [Parameter]

    public ViewMedia media { get; set; } 

}

[Mohan Kumar Ramasamy]

Hi Eli, 

 

We have checked your reported query, we can achieve your requirement using Observable Collection. Please refer below code snippets. 

 

<div class="container px-5"> 

    <SfButton @onclick="AddMedia">Add Media</SfButton> 

    <SfListBox TValue="int[]" DataSource="@Data" TItem="ViewMedia" @ref="MediaListBoxObj"> 

        <ListBoxFieldSettings></ListBoxFieldSettings> 

        <ListBoxTemplates TItem="ViewMedia"> 

            <ItemTemplate> 

                @{ 

                    var data = (context as ViewMedia); 

                    <MediaCard media="new ViewMedia { ListIndex = data.ListIndex }"></MediaCard> 

                } 

            </ItemTemplate> 

        </ListBoxTemplates> 

        <ListBoxSelectionSettings Mode="SelectionMode.Single"></ListBoxSelectionSettings> 

    </SfListBox> 

</div> 

 

@code { 

 

    SfListBox<int[], ViewMedia> MediaListBoxObj; 

    public ObservableCollection<ViewMedia> Data { get; set; } 

    int MediaCount = 0; 

 

    protected override void OnInitialized() 

    { 

        this.Data = ViewMedia.getListData(); 

    } 

 

    private void AddMedia() 

    { 

        MediaCount++; 

        this.Data.Add(new ViewMedia() { ListIndex = MediaCount }); 

    } 

public class ViewMedia 

    { 

        public int ListIndex { get; set; } 

        public int Gore { get; set; } 

        public string Blurb { get; set; } 

 

        public static ObservableCollection<ViewMedia> getListData() 

        { 

            ObservableCollection<ViewMedia> Data = new ObservableCollection<ViewMedia>(); 

            Data.Add(new ViewMedia() { ListIndex = 0 }); 

            return Data; 

        } 

    } 

 

For your reference, we have prepared a sample based on this, please refer link. 

 

Link: https://www.syncfusion.com/downloads/support/forum/157526/ze/292132-BlazorApp1-1793775471  

 

Regards, 

Mohankumar R 

[Eli]

Thank you very much for this, it works perfectly!

[Mohan Kumar Ramasamy]

Hi Eli, 

 

Thanks for the update.  

 

We are happy to hear that your issue has been resolved. Please feel free to contact us if you need any further assistance on this. 

 

Regards, 

Mohankumar R