GeezerVison is showing mindfusion.dev — Interactive JavaScript UI Libraries | MindFusion JS ListView

buy now

English

Deutsch

Espanol

Products
- Suites
  - JavaScript
  - WinForms
  - WPF
  - .NET MAUI
  - Java Swing
- Bundles
  - Diagramming
  - Scheduling
- JavaScript
- Blazor
  - Diagram
  - Chart
- Avalonia
  - Diagram
  - Virtual Keyboard
- ASP.NET MVC
  - Diagram
- Java Swing
- WinForms
  - Diagram
  - Scheduler
  - Spreadsheet
  - Chart & Gauge
  - Report
  - Map
  - Virtual Keyboard
  - Dock Control
- .NET MAUI
  - Diagram
  - Calendar
  - Chart
- ActiveX
  - Diagram
- WPF
  - Diagram
  - Scheduler
  - Gantt Chart
  - Spreadsheet
  - Chart & Gauge
  - Report
  - Map
  - Virtual Keyboard
  - UI
- WinUI 3
  - Diagram
- Android
  - Diagram
  - Chart
- iOS
  - Diagram
- WordPress
  - Org Chart Plugin
  - Timetable Plugin
- Applications
  - XML Viewer
  - InSight Diagrammer
- Web Tools
  - Keyboard Creator
  - Shape Designer
Downloads
Support
- E-mail
- Forums
- Documentation
- Samples
- FAQ
- Help Desk
Company
- About Us
- Contacts
- Blog
- Newsletter
- Services
- Clients
- Testimonials
- Join Us
Web store

Home / Components / JavaScript / ListView

JS ListView

Build classical or templated JavaScript lists with a few lines of code.

Download Install from npm

The Fast Way to Add a ListView to Your JavaScript Application

Horizontal or vertical, classical or with a user template, stylish and interactive - MindFusion JS ListView has what you are looking for in a list control.

List Items

The ListView control supports unlimited number of items, which can be templated to meet best your needs. You can create a block of HTML elements and assign them as a content to the list item through the template property.

Online Sample: A List with Fruit Dishes

Intuitive API

The ListView allows you to create both advanced and traditional interactive HTML lists. In order to build a list with items you need only to create instances of the ListItem class, give them titles and add them to the ListView item's collection. Each ListItem exposes various properties for style and user interaction.

API Overview: ListView and ListItem

Multiple Selection in a JavaScript ListView

User Interaction

Users can select multiple items at once as well drag and drop items. Scrolling is enabled by default for longer lists.

Online Sample: Interactive ListView
Tutorial: Drag and Drop in a ListView Control

Events

The ListView raises events for any action the user performs on the list and its items - selection, drag, drop, move, resize. There are also a set of validation events that allow you to cancel the action. Events are also fired when the control is loaded or gets focus.

Online Sample: JavaScript Chat Application with the ListView Control
Online Reference: The ListView Class

JavaScript ListView with Image Thumbnail

Appearance

Each list item can be styled the way you want to the tiniest details. The cssClass property lets you bind the appearance of items to CSS styles created specially for them. The control supports themes and a set of predefined themes lets you apply directly beautiful designer-created styles in various color schemes.

Online Sample: JavaScript ListView with Image Thumbnails