How to bind the selected item in Syncfusion SfListView

Question

I have the following razor file:

@using Syncfusion.Blazor.Lists;
@inject NavigationManager NavigationManager
@page "/main_list"

<h1>Select the items</h1>

<SfListView DataSource="@ShopItems01.ToList()" @bind-Value="@SelectedItem" TValue="ShopItem" TItem="ShopItem">
  <ListViewFieldSettings Text="Description" Id="Id" TValue="ShopItem" />
</SfListView>

<SfListView DataSource="@ShopItems02.ToList()" @bind-Value="@SelectedItem" TValue="ShopItem" TItem="ShopItem">
  <ListViewFieldSettings Text="Description" Id="Id" TValue="ShopItem" />
</SfListView>

<SfListView DataSource="@ShopItems03.ToList()" @bind-Value="@SelectedItem" TValue="ShopItem" TItem="ShopItem">
  <ListViewFieldSettings Text="Description" Id="Id" TValue="ShopItem" />
</SfListView>

@code {

  public ShopItem SelectedItem {get; set;}

  protected override async Task OnInitializedAsync()
  {
    await base.OnInitializedAsync();
    ShopItems01 = await GetItems(id: 0);
    ShopItems02 = await GetItems(id: 1);
    ShopItems03 = await GetItems(id: 2);
  }

  public void Select()
  {
    var itemId = SelectedItem.Id; //always throws null reference exception
  }    
}

The bind for the DataSource always works but it can't bind the selected item. I checked the documentation and they offer all kinds of datasource binding but there is no sign of the selected item.

The closest thing is some kind of HTML DOM access with @ref and using each SfListView to get its SelectedItems property. I bet it works and I reckon also could use some DOM code with document.getElementById() but the whole point of using .Net is to avoid using these kinds of approach.

<SfListView @ref="@SfList"
        DataSource="@DataSource"
        ShowCheckBox="true">
   <ListViewFieldSettings TValue="ListDataModel" Id="Id" Text="Text"></ListViewFieldSettings>
</SfListView>

async void OnSelect()
{
  var items = await SfList.GetSelectedItems();
  if (items.Data != null)
  {
    SelectedItems = items.Data;
    this.StateHasChanged();
  }
}

Hypothetically, what if I have 20-30 ListView objects? Should I check each reference to find the selected item?

So, any idea how I could create a working binding for the selected item?

Answer 1

The ListView component doesn’t allow to select items by default. When streamline this component to Blazor standard in 2020 Volume 3 release, we have deprecated all the selection related APIs, methods, and events.

Find the details in the below release notes.

https://blazor.syncfusion.com/documentation/release-notes/18.3.35/?type=all#listview

So, you couldn’t bind the selected item directly. But you can check an item using ShowCheckbox property and CheckItems method in ListView.

<SfButton Content="data" ID="button" OnClick="click"></SfButton>
    <SfListView @ref="@SfList"
                DataSource="@ListData"
                ShowCheckBox="true">
        <ListViewFieldSettings TValue="DataModel" Id="Id" Text="Text"></ListViewFieldSettings>
    </SfListView>
    @code{
        SfListView<DataModel> SfList;
        public List<DataModel> ListData = new List<DataModel>
         {
            new DataModel() { Text = "Jenifer",Id = "1"},
            new DataModel() { Text = "Amenda", Id = "2"},
    
        };
        async void click()
        {
           await this.SfList.CheckItems(ListData);      
        }
        public class DataModel
        {
            public string Id { get; set; }
            public string Text { get; set; }
        }
    }