Class SfListView<TValue>

The SfListView component displays data in an interactive hierarchical structure, offering various layouts and views. It provides features such as data-binding, templates, grouping,and virtualization.

Inheritance

System.Object

SfBaseComponent

SfListView<TValue>

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.OnInitializedAsync()

Namespace: Syncfusion.Blazor.Lists

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfListView<TValue> : SfBaseComponent

Type Parameters

Name	Description
TValue	The generic type parameter.

Examples

 
<SfListView DataSource="@Data">
 <ListViewFieldSettings TValue="DataModel" Id="Id" Text="Text"></ListViewFieldSettings>
</SfListView>
 @code
{
     private DataModel[] Data =
   {
        new DataModel { Text = "ArtWork", Id = "list-01" },
        new DataModel { Text = "Abstract", Id = "list-02" },
        new DataModel { Text = "Modern Painting", Id = "list-03" },
        new DataModel { Text = "Ceramics", Id = "list-04" },
        new DataModel { Text = "Animation Art", Id = "list-05" },
        new DataModel { Text = "Oil Painting", Id = "list-06" }
    };
  public class DataModel
   {
      public string Text { get; set; }
      public string Id { get; set; }
    }
}

Constructors

SfListView()

Declaration

public SfListView()

Properties

Animation

Gets or sets the Animation property, which allows you to apply various animations to the SfListView<TValue> component. animations to the SfListView<TValue> component.

Declaration

public AnimationSettings Animation { get; set; }

Property Value

Type	Description
AnimationSettings	Animation settings such as effect, duration and easing. The default value of ListViewEffect enumeration is SlideLeft with duration as 400.

Examples

 
<SfListView DataSource="@ListData" ShowHeader="true" HeaderTitle="Continent" Animation="ListAnimation">
 <ListViewFieldSettings TValue="DataModel" Id="Id" Text="Text" Child="Child"></ListViewFieldSettings>
</SfListView>
 @code {
    List<DataModel> ListData = new List<DataModel>();
    public AnimationSettings ListAnimation { get; set; } = new AnimationSettings() { Effect = ListViewEffect.Zoom, Duration = 500, Easing = "ease" };
    protected override void OnInitialized()
   {
           base.OnInitialized();
           ListData.Add(new DataModel
   {
       Text = "Asia",
       Id = "01",
       Category = "Continent",
       Child = new List<DataModel>() {
           new DataModel {
               Text = "India",
                   Id = "1",
                   Category = "Asia",
                   Child = new List<DataModel> () {
                       new DataModel {
                           Id = "1001",
                               Text = "Delhi",
                               Category = "India"
                       },
                       new DataModel {
                           Text = "Kashmir",
                               Id = "1002",
                               Category = "India"
                       }
                   }
           },
           new DataModel {
               Text = "China",
                   Id = "2",
                   Category = "Asia",
                   Child = new List<DataModel> () {
                       new DataModel {
                           Text = "Zhejiang",
                               Id = "2001",
                               Category = "China"
                       }
                   }
           }
       }
   });
   ListData.Add(new DataModel
       {
       Text = "North America",
       Id = "02",
       Category = "Continent",
       Child = new List<DataModel>() {
           new DataModel {
               Text = "USA",
                   Id = "3",
                   Category = "North America",
                   Child = new List<DataModel> () {
                       new DataModel {
                           Text = "New York",
                               Id = "3002",
                               Category = "USA"
                       }
                   }
           },
           new DataModel {
               Text = "Canada",
                   Id = "4",
                   Category = "North America",
                   Child = new List<DataModel> () {
                       new DataModel {
                           Text = "Alberta",
                               Id = "4002",
                               Category = "Canada"
                       }
                   }
           }
       }
     });
   }
  public class DataModel
   {
     public string Id { get; set; }
     public string Text { get; set; }
     public string Category { get; set; }
     public List<DataModel> Child { get; set; }
       }
   }

CheckBoxPosition

Gets or sets the position of the checkbox in a list item, as determined by the CheckBoxPosition when ShowCheckBox is true.

Declaration

public CheckBoxPosition CheckBoxPosition { get; set; }

Property Value

Type	Description
CheckBoxPosition	The default value is Left , which will appear before the text content in a list item.

Examples

 
<SfListView DataSource="@Data" ShowCheckBox="true" CheckBoxPosition="Syncfusion.Blazor.Lists.CheckBoxPosition.Right">
 <ListViewFieldSettings TValue="DataModel" Id="Id" Text="Text"></ListViewFieldSettings>
</SfListView>
 @code
{
     private DataModel[] Data =
   {
        new DataModel { Text = "ArtWork", Id = "list-01" },
        new DataModel { Text = "Abstract", Id = "list-02" },
        new DataModel { Text = "Modern Painting", Id = "list-03" },
        new DataModel { Text = "Ceramics", Id = "list-04" },
        new DataModel { Text = "Animation Art", Id = "list-05" },
        new DataModel { Text = "Oil Painting", Id = "list-06" }
    };
  public class DataModel
   {
      public string Text { get; set; }
        public string Id { get; set; }
    }
}

CssClass

Gets or sets a user-defined class name to apply to the root element of the SfListView<TValue> component, allowing for customization of both CSS and functionality.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	Accepts the CSS class string, separated by spaces, to customize the component's appearance. The default value is String.Empty.

DataSource

Gets or sets the data to be rendered in the SfListView<TValue> component which is mapped with the fields of ListView.

Declaration

public IEnumerable<TValue> DataSource { get; set; }

Property Value

Type
System.Collections.Generic.IEnumerable<TValue>

Remarks

Use this property to set the data source for the ListView. This property expects an IEnumerable of TValue, where TValue represents the type of the data object. To consume data from a remote services, use the SfDataManager component.

Examples

 
<SfListView DataSource="@Data">
 <ListViewFieldSettings TValue="DataModel" Id="Id" Text="Text"></ListViewFieldSettings>
</SfListView>
 @code
{
     private DataModel[] Data =
   {
        new DataModel { Text = "ArtWork", Id = "list-01" },
        new DataModel { Text = "Abstract", Id = "list-02" },
        new DataModel { Text = "Modern Painting", Id = "list-03" },
        new DataModel { Text = "Ceramics", Id = "list-04" },
        new DataModel { Text = "Animation Art", Id = "list-05" },
        new DataModel { Text = "Oil Painting", Id = "list-06" }
     };
     public class DataModel
   {
      public string Text { get; set; }
        public string Id { get; set; }
    }
}

Enabled

Gets or sets a value that determines whether the SfListView<TValue> component must be enabled.

Declaration

public bool Enabled { get; set; }

Property Value

Type	Description
System.Boolean	true, to allow users to interact with component. Otherwise, false. The default value is true.

Remarks

You can disable the component by setting this property value as false.

EnablePersistence

Enable or disable persisting component's state between page reloads.

Declaration

public bool EnablePersistence { get; set; }

Property Value

Type	Description
System.Boolean	true, if the persistence can be enabled. Otherwise, false.

Remarks

The checked items will be persisted when this property is set to true based on component unique id.

EnableRtl

Enable or disable rendering the SfListView<TValue> component in right to left direction.

Declaration

public bool EnableRtl { get; set; }

Property Value

Type	Description
System.Boolean	true, if the right to left direction can be enabled. Otherwise, false. The default value is false.

EnableVirtualization

Gets or sets a value that determines whether to enable virtualization in the SfListView<TValue> component

Declaration

public bool EnableVirtualization { get; set; }

Property Value

Type	Description
System.Boolean	true, if the virtualization can be enabled. Otherwise, false.

Remarks

If this property is set to true, the ListView’s performance will improve when loading a large amount of data.

GroupTemplate

Gets or sets the customised template design as a Microsoft.AspNetCore.Components.RenderFragment and assigns it to the group headers of the SfListView<TValue> component.

Declaration

public RenderFragment<ComposedItemModel<TValue>> GroupTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<Syncfusion.Blazor.Lists.ComposedItemModel<TValue>>	The default value is null.

HeaderTemplate

Gets or sets the customised design content as a Microsoft.AspNetCore.Components.RenderFragment of SfListView<TValue> header title.

Declaration

public RenderFragment HeaderTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A template content that defines the appearance of the list header. The default value is null.

HeaderTitle

Gets or sets the header title value of the SfListView<TValue> component.

Declaration

public string HeaderTitle { get; set; }

Property Value

Type	Description
System.String	Accepts the string value. The default value is String.Empty.

Height

Gets or sets the height of the SfListView<TValue> component.

Declaration

public string Height { get; set; }

Property Value

Type	Description
System.String	Accepts the string value.

HtmlAttributes

Gets or sets additional attributes, such as id, class, and more, in a key-value pair format.

Declaration

public Dictionary<string, object> HtmlAttributes { get; set; }

Property Value

Type	Description
System.Collections.Generic.Dictionary<System.String, System.Object>	A dictionary of additional HTML attributes for the root element of the SfListView<TValue> component.

Examples

 
<SfListView DataSource="@Data" HtmlAttributes="@(new() { { "style", "background:#cbe0f3;" } })">
 <ListViewFieldSettings TValue="DataModel" Id="Id" Text="Text"></ListViewFieldSettings>
</SfListView>
 @code
{
     private DataModel[] Data =
   {
        new DataModel { Text = "ArtWork", Id = "list-01" },
        new DataModel { Text = "Abstract", Id = "list-02" },
        new DataModel { Text = "Modern Painting", Id = "list-03" },
        new DataModel { Text = "Ceramics", Id = "list-04" },
        new DataModel { Text = "Animation Art", Id = "list-05" },
        new DataModel { Text = "Oil Painting", Id = "list-06" }
     };
     public class DataModel
   {
      public string Text { get; set; }
        public string Id { get; set; }
    }
}

ID

Gets or sets the element ID of the component.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	Accepts the string value.

Query

Gets or sets the Query used to retrieve specific data from the data source by using the where and select keywords.

Declaration

public Query Query { get; set; }

Property Value

Type	Description
Query	The query that utilizes the where and select keywords to filter and extract data.

Examples

 
<SfListView HeaderTitle="Products" ShowHeader="true" TValue="DataModel" Query="@query">
  <ListViewFieldSettings TValue="DataModel" Id="ProductID" Text="ProductName"></ListViewFieldSettings>
  <SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/" Adaptor="Adaptors.ODataV4Adaptor"></SfDataManager>
</SfListView>
 @code
{
   Syncfusion.Blazor.Data.Query query = new Query().From("Products").Select(new List<string>() { "ProductID", "ProductName" }).Take(10);    
   public class DataModel
   {
        public int ProductID { get; set; }
        public string ProductName { get; set; }
    }
}

ShowCheckBox

Gets or sets a value that determines whether the checkbox will be displayed or hidden in the SfListView<TValue> component.

Declaration

public bool ShowCheckBox { get; set; }

Property Value

Type	Description
System.Boolean	true, if the checkbox should be displayed. Otherwise, false.

ShowHeader

Gets or sets a value that determines whether the header of the SfListView<TValue> component will be displayed or hidden.

Declaration

public bool ShowHeader { get; set; }

Property Value

Type	Description
System.Boolean	true, if the header should be displayed. Otherwise, false.

ShowIcon

Gets or sets a value that determines whether the list item's icon should be displayed or hidden.

Declaration

public bool ShowIcon { get; set; }

Property Value

Type	Description
System.Boolean	true, if the icon should be displayed. Otherwise, false.

SortOrder

Gets or sets the sorting order for arranging list items. The available type of sort orders are, None - The data source will not be sorted. Ascending - The data source will be sorted in ascending order. Descending - The data source will be sorted in descending order.

Declaration

public SortOrder SortOrder { get; set; }

Property Value

Type	Description
SortOrder	The default value is None.

Template

Gets or sets the customised design content as a Microsoft.AspNetCore.Components.RenderFragment of individual list items.

Declaration

public RenderFragment<TValue> Template { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<TValue>	A template content that defines the appearance of list item. The default value is null.

Width

Gets or sets the width of the SfListView<TValue> component.

Declaration

public string Width { get; set; }

Property Value

Type	Description
System.String	Accepts the string value.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

CheckItemsAsync(IEnumerable<TValue>)

Check items in the ListView You can check specific list items by providing field-value pairs or check all items by passing an empty argument.

Declaration

public Task CheckItemsAsync(IEnumerable<TValue> listItems = null)

Parameters

Type	Name	Description
System.Collections.Generic.IEnumerable<TValue>	listItems	Specifies the list items argument.

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

DisableItemAsync(TValue)

Disables list items by specifying the Id and text fields. Use listItem with fields like TValue { fieldName: fieldValue }.

Declaration

public Task DisableItemAsync(TValue listItem)

Parameters

Type	Name	Description
TValue	listItem	Specifies the list item argument.

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

EnableItemAsync(TValue)

Enables previously disabled list items by specifying the Id and text fields. Use listItem with fields like TValue { fieldName: fieldValue }.

Declaration

public Task EnableItemAsync(TValue listItem)

Parameters

Type	Name	Description
TValue	listItem	Specifies the list item argument.

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

GetCheckedItemsAsync()

Retrieves information about the currently checked item from the list of items.

Declaration

public Task<SelectedItems<TValue>> GetCheckedItemsAsync()

Returns

Type	Description
System.Threading.Tasks.Task<SelectedItems<TValue>>	System.Threading.Tasks.Task.

GetPropertyStyle()

Get style Attributes value.

Declaration

protected string GetPropertyStyle()

Returns

Type	Description
System.String	returns property styles.

OnAfterRenderAsync(Boolean)

Method invoked after each time the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender	Set to true for the first time component rendering; otherwise gets false.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfBaseComponent.OnAfterRenderAsync(Boolean)

OnInitialized()

Declaration

protected override void OnInitialized()

OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

Overridable Method for INotifyCollectionChanged event handler to track the changes.

Declaration

protected override void OnObservableChange(string propertyName, object sender, bool isCollectionChanged = false, NotifyCollectionChangedEventArgs e = null)

Parameters

Type	Name	Description
System.String	propertyName	Observable property name.
System.Object	sender	Observable model object.
System.Boolean	isCollectionChanged	Sets true if the observable collection changed.
System.Collections.Specialized.NotifyCollectionChangedEventArgs	e	Changed Event Args

Overrides

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

OnParametersSetAsync()

Declaration

protected override Task OnParametersSetAsync()

Returns

Type
System.Threading.Tasks.Task

RemoveItems(IEnumerable<TValue>)

Removes item(s) from the ListView by providing an array of field objects. Use the listItems parameter with fields like TValue { fieldName: fieldValue }.

Declaration

public void RemoveItems(IEnumerable<TValue> listItems)

Parameters

Type	Name	Description
System.Collections.Generic.IEnumerable<TValue>	listItems	Specifies the list items argument.

UncheckItemsAsync(IEnumerable<TValue>)

Unchecks items in the ListView. You can uncheck specific list items by providing field-value pairs or uncheck all items by passing an empty argument.

Declaration

public Task UncheckItemsAsync(IEnumerable<TValue> listItems = null)

Parameters

Type	Name	Description
System.Collections.Generic.IEnumerable<TValue>	listItems	Specifies the list item argument.

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

UpdateListViewDataSource(Boolean, IEnumerable<TValue>)

Updates listview datasource.

Declaration

protected void UpdateListViewDataSource(bool updateSortedData = false, IEnumerable<TValue> dataSource = null)

Parameters

Type	Name	Description
System.Boolean	updateSortedData	specifies the update sorted data.
System.Collections.Generic.IEnumerable<TValue>	dataSource	specifies the data source.