ListView

The ListView control provides the infrastructure to display a set of data items in different layouts or views.

About

To creating listview we use <ul> element with role data-role="listview". The items are defined with <li> element. A list can have multiple views: list, content, icons, icons-small, icons-large and tiles.


                    <ul data-role="listview">
                    ...
                    </ul>
                

Add item

Each listview item are defined with <li> element and special attributes for it: data-icon, data-caption.


                    <li data-icon="<span class='mif-file-empty'>" data-caption="desktop.ini"></li>
                    <li data-icon="images/setup.png" data-caption="setup.exe"></li>
                

To create icon you can define tag (for font icons) or path to image for <img>.

View types

A listview can have multiple views. To set view type use attribute data-view="..." with values: list (default), content, tiles, icons, icons-medium or icons-large. You can change this attribute at runtime to change listview view.


                    <ul data-role="listview" data-view="tiles">
                    ...
                    <ul>
                

View as content

For content view, you can define additional data with attribute data-content="...". Value for this attribute must be simple string or valid html. Also supports Metro 4 components definition.


                    <ul data-role="listview" data-view="content" data-select-node="true">
                        <li data-icon="<span class='mif-folder fg-orange'>"
                            data-caption="Video"
                            data-content="<div class='mt-1' data-role='progress' data-value='35' data-small='true'>"></li>
                        <li data-icon="<span class='mif-folder fg-cyan'>"
                            data-caption="Images"
                            data-content="<div class='mt-1' data-role='progress' data-value='78' data-small='true'>"></li>
                        <li data-icon="<span class='mif-file-empty'>"
                            data-caption="desktop.ini"
                            data-content="<span class='text-muted'>Created: 12.21.2017</span>"></li>
                        <li data-icon="images/setup.png"
                            data-caption="setup.exe"
                            data-content="<span class='text-muted'>Executable</span>"></li>
                        <li data-icon="<span class='mif-file-empty'>"
                            data-caption="file1.dat"
                            data-content="<span class='text-muted'>Data file</span>"></li>
                    </ul>
                

View as table

For table view, you must define additional structure for items with attribute data-structure="{...}". Value for this attribute must be valid json object stored as string. This structure define additional columns. Each item in structure writes as key/value, where key is a name for additional field and value can be true or false. True - field displayed, false - filed not displayed. Now for each listview item you can set additional fields with data attribute data-key_name="..." where key is a key from structure data.


                    <ul data-role="listview"
                        data-view="table"
                        data-select-node="true"
                        data-structure='{"date": true, "name": true}'>

                        <li data-icon="<span class='mif-folder fg-orange'>"
                            data-caption="Video"
                            data-date="12/21/2017"
                            data-name="Video library"></li>

                        <li data-icon="<span class='mif-folder fg-cyan'>"
                            data-caption="Images"
                            data-date="12/21/2017"
                            data-name="My images"></li>

                    </ul>
                

You can set styles for additional items. Each additional item stored in element with classes .node-data + .item-data-key_name.

Grouping

Component listview is supports a one level grouping of items. To create grouping you must place list of items to second level. It's all.


                    <ul data-role="listview" data-view="icons-medium">
                        <li data-caption="Folders">
                            <ul>
                                <li data-icon="<span class='mif-folder fg-orange'>" data-caption="Video"></li>
                                <li data-icon="<span class='mif-folder fg-cyan'>" data-caption="Images"></li>
                                <li data-icon="<span class='mif-folder fg-green'>" data-caption="Documents"></li>
                                <li data-icon="<span class='mif-folder-download fg-blue'>" data-caption="Downloads"></li>
                                <li data-icon="<span class='mif-folder'>" data-caption="Desktop"></li>
                            </ul>
                        </li>
                        <li data-caption="Devices and disks">
                            <ul>
                                <li data-icon="images/disk-os.png" data-caption="System (C:)"></li>
                                <li data-icon="images/disk.png" data-caption="DS1 (D:)"></li>
                                <li data-icon="images/disk.png" data-caption="DS2 (E:)"></li>
                                <li data-icon="images/disk.png" data-caption="FreeAgent (G:)"></li>
                                <li data-icon="images/disk-network.png" data-caption="Network"></li>
                            </ul>
                        </li>
                    </ul>
                

If you need to create collapsing node, add attribute data-collapsed="true" to item definition.

Selectable

Attribute data-selectable enable or disable selectable mode for listview. You can change this attribute at runtime. Each checkbox linked with listview item on data attribute node.


                    <ul data-role="listview" data-selectable="true">
                    ...
                    </ul>
                

Events

When listview works, it generated the numbers of events. You can use callback for this events to behavior with listview.

Event Data-* Desc
onNodeClick(node, listview) data-on-node-click Fired when user click on node caption
onNodeDblClick(node, listview) data-on-node-dblclick Fired when user dblclick on node caption
onNodeInsert(node, listview) data-on-node-insert Fired when node was inserted
onNodeDelete(node, listview) data-on-node-delete Fired when node was deleted
onNodeClean(node, listview) data-on-node-clean Fired when node was cleaned
onGroupNodeClick(state, check, node, listview) data-on-radio-click Fired when user click on radio input
onExpandNode(node, listview) data-on-expand-node Fired when node was expanded
onCollapseNode(node, listview) data-on-collapse-node Fired when node was collapsed
onListviewCreate(listview) data-on-listview-create Fired when node was created

Methods

You can use listview methods to interact with the component at runtime.

  • toggleNode(node) - toggle node state
  • add(parent, data) - add node
  • addGroup(data) - add group
  • insertBefore(node, data) - add new node before specified node
  • insertAfter(node, data) - add new node after specified node
  • del(node) - delete node from tree
  • clean(node) - clean node
  • getSelected() - get selected nodes