Overview
Modules
Classes
Widgets
serenity.autocompleteserenity.chartserenity.colorpalettelistserenity.colorpalettepanelserenity.comboboxserenity.contextmenuserenity.datawidgetserenity.dropdownlistserenity.editorserenity.gridserenity.intervalselectionserenity.kanban
serenity.listview
serenity.notificationserenity.panelserenity.ratingserenity.schedulerserenity.splitterserenity.tableserenity.tagcloudserenity.timepickerserenity.toolbarserenity.treeserenity.widgetserenity.listview
inherits serenity.datawidget
Listview displays a list of items that can be viewed using one of 2 different modes.
Version Added: 2017.4
QuickNav
Options
DOM Element
div
EXAMPLE
<div id="listview"></div>
<script>
$("#listview").serenityListview({
dataSource: employees,
titleField: "fullName",
selectable: true,
mode: "tile"
});
</script>
Options
Height of the table.
Version Added: 2017.4
EXAMPLES
Initialize the table with the height option specified
JavaScript
$(".selector").serenityListview({
height: "400px"
});
list - Object
Options for the listview when rendered in list mode.
Version Added: 2017.4
Flag indicating whether a border is displayed around each item.
Version Added: 2017.4
EXAMPLES
Initialize the listview with the list.border option specified
JavaScript
$(".selector").serenityListview({
list: {
border: true
}
});
CSS Class to apply to the selected list item.
Version Added: 2017.4
EXAMPLES
Initialize the listview with the list.selectedClass option specified
JavaScript
$(".selector").serenityListview({
list: {
selectedClass: "ui-state-highlight"
}
});
CSS Selector of the HTML element that is selectable in the list item. By default the entire item is selected.
Version Added: 2017.4
EXAMPLES
Initialize the listview with the list.selector option specified
JavaScript
$(".selector").serenityListview({
list: {
template: "<i class='fa fa-user' aria-hidden='true' style='margin-right:5px;'></i> {{titleField}}",
selector: "i.fa-user"
}
});
Template used to render the listview in list mode.
Version Added: 2017.4
EXAMPLES
Initialize the listview with the list.template option specified
JavaScript
$(".selector").serenityListview({
list: {
template: "<i class='fa fa-user' aria-hidden='true' style='margin-right:5px;'></i> {{titleField}}"
}
});
CSS Selector for the HTML element that contains the template used to render the listview in list mode.
Version Added: 2017.4
EXAMPLES
Initialize the listview with the list.templateSelector option specified
JavaScript
$(".selector").serenityListview({
list: {
templateSelector: "#listTemplate"
}
});
The initial mode to view the litems in the listview.
Options are:
- list
- tile
Version Added: 2017.4
EXAMPLES
Initialize the listview with the mode option specified
JavaScript
$(".selector").serenityListview({
mode: "tile"
});
Determine whether the mode can be selected. If true, then a header is displayed with a dropdown list
containing "List" and "Tile". When selected, the mode is updated and the widget is rendered.
Version Added: 2017.4
EXAMPLES
Initialize the listview with the mode.selectable option specified
JavaScript
$(".selector").serenityListview({
mode: { selectable: true }
});
The initial mode to view the litems in the listview.
Options are:
- list
- tile
Version Added: 2017.4
EXAMPLES
Initialize the listview with the mode.view option specified
JavaScript
$(".selector").serenityListview({
mode: { view: "tile" }
});
Flag indicating whether the listview pager panel is displayed.
Version Added: 2017.4
EXAMPLES
Initialize the listview with the pageable option specified
JavaScript
$(".selector").serenityListview({
pageable: true
});
The message to be displayed on the pager panel for the input field to go to a page.
Version Added: 2016.1
EXAMPLES
Initialize the listview with the pageable.messages.goto option specified
JavaScript
$(".selector").serenityListview({
pageable: { messages: { goto: "Page:" } }
});
pageable.messages.items - Function | Handlebars template (default: Handlebars.compile("{{start}}-{{end}} of {{size}}"))
The message to be displayed on the pager panel for what page items are currently displayed.
Version Added: 2016.1
EXAMPLES
Initialize the listview with the pageable.messages.items option specified
JavaScript
$(".selector").serenityListview({
pageable: { messages: { items: Handlebars.compile("from {{start}} to {{end}} of {{size}}") } }
});
The message to be displayed on the pager panel for the page size.
Version Added: 2016.1
EXAMPLES
Initialize the listview with the pageable.messages.pagesize option specified
JavaScript
$(".selector").serenityListview({
pageable: { messages: { pagesize: "Rows per page:" } }
});
The pages sizes available in the pager panel.
Version Added: 2016.1
EXAMPLES
Initialize the listview with the pageable.pagesizes option specified
JavaScript
$(".selector").serenityListview({
pageable: { pagesizes: [10, 20, 30, 40, 50] }
});
Flag indicating whether the items in the listview can be selected.
Version Added: 2017.4
EXAMPLES
Initialize the listview with the selectable option specified
JavaScript
$(".selector").serenityListview({
selectable: true
});
tile - Object
Options for the listview when rendered in tile mode.
Version Added: 2017.4
Height in pixels for the tile.
Version Added: 2017.4
EXAMPLES
Initialize the listview with the tile.height option specified
JavaScript
$(".selector").serenityListview({
tile: {
height: 200
}
});
CSS Class to apply to the selected tile.
Version Added: 2017.4
EXAMPLES
Initialize the listview with the tile.selectedClass option specified
JavaScript
$(".selector").serenityListview({
tile: {
selectedClass: "ui-state-highlight"
}
});
CSS Selector of the HTML element that is selectable in the tile. By default the entire tile is selected.
Version Added: 2017.4
EXAMPLES
Initialize the listview with the tile.selector option specified
JavaScript
$(".selector").serenityListview({
tile: {
template: "<div style='font-weight:bold;width:100%;margin-top:10px;text-align:center;'>{{titleField}}</div>" +
"<i class='fa fa-2x fa-user' aria-hidden='true' style='position:absolute;bottom:5px;right:5px;'></i>",
selector: "i.fa-user"
}
});
Template used to render the listview in list mode.
Version Added: 2017.4
EXAMPLES
Initialize the listview with the tile.template option specified
JavaScript
$(".selector").serenityListview({
tile: {
template: "<div style='font-weight:bold;width:100%;margin-top:10px;text-align:center;'>{{titleField}}</div>" +
"<i class='fa fa-2x fa-user' aria-hidden='true' style='position:absolute;bottom:5px;right:5px;'></i>"
}
});
CSS Selector for the HTML element that contains the template used to render the listview in tile mode.
Version Added: 2017.4
EXAMPLES
Initialize the listview with the tile.templateSelector option specified
JavaScript
$(".selector").serenityListview({
tile: {
templateSelector: "#tileTemplate"
}
});
Width in pixels for the tile.
Version Added: 2017.4
EXAMPLES
Initialize the listview with the tile.width option specified
JavaScript
$(".selector").serenityListview({
tile: {
width: 200
}
});
The field in the dataSource to be displayed as the title for the items in the listview.
Version Added: 2017.4
EXAMPLES
Initialize the listview with the titleField option specified
JavaScript
$("#dropdownlist").serenityListview({
titleField: "fullName"
})
Functions
dataSource (serenity.datawidget)
Get the data source.
Version Added: 2016.1
RETURN
serenity.DataSource
The data source for the widget.
EXAMPLES
Get the DataSource for the widget.
JavaScript
var dataSource = $(".selector").data("serenityListview").dataSource();
Render the widget.
Version Added: 2017.4
EXAMPLES
Render the listview.
JavaScript
$(".selector").data("serenityListview").render();
Set the data source.
Version Added: 2017.4
PARAMETERS
ds serenity.DataSource
Contains the data to be displayed.
EXAMPLES
Set the DataSource for the listview.
JavaScript
$(".selector").data("serenityListview").setDataSource(new serenity.DataSource({ data: employees }));
Events
create (jQuery.Widget)
Triggered when the widget is created.
PARAMETERS
event jQuery.Event
A jQuery.Event object.
ui jQuery Object
The ui object is empty but included for consistency with other events.
EXAMPLES
Initialize the widget with the create callback specified.
JavaScript
$(".selector").serenityListview({
create: function( event, ui ) {}
});
Triggered when the data has been bound to the widget.
Version Added: 2017.4
PARAMETERS
event jQuery.Event
A jQuery.Event object.
ui.sender serenity.listview
Instance of the listview.
EXAMPLES
Initialize the listview with the dataBound callback specified
JavaScript
$(".selector").serenityListview({
dataBound: function (event, ui) {
console.log("dataBound event raised");
}
});
Triggered when the mode has changed.
Version Added: 2017.4
PARAMETERS
event jQuery.Event
A jQuery.Event object.
ui.sender serenity.listview
Instance of the listview.
ui.mode String
The mode that was selected.
EXAMPLES
Initialize the listview with the modeChange callback specified
JavaScript
$(".selector").serenityListview({
modeChange: function (event, ui) {
console.log("modeChange event raised");
}
});
Triggered when the current page has changed.
Version Added: 2017.4
PARAMETERS
event jQuery.Event
A jQuery.Event object.
ui.sender serenity.listview
Instance of the listview.
ui.page.before String
The page that was displayed in the listview before it was changed.
ui.page.current String
The current page that is displayed in the listview.
EXAMPLES
Initialize the listview with the pageChange callback specified
JavaScript
$(".selector").serenityListview({
pageChange: function (event, ui) {
console.log("pageChange event raised");
}
});
Triggered when an item is selected.
Version Added: 2017.4
PARAMETERS
event jQuery.Event
A jQuery.Event object.
ui.sender serenity.listview
Instance of the listview.
ui.item Object
Item from the DataSource that was used to render the item in the listview.
EXAMPLES
Initialize the listview with the select callback specified
JavaScript
$(".selector").serenityListview({
select: function (event, ui) {
console.log("select event raised");
}
});
Subscribe
Why Subscribe?
Get the monthly newsletter with the latest news about Serenity UI including new features, releases and downloads!
Thank you
Thank you for subscribing to Serenity UI!