Serenity UI - Documentation

serenity.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

DOM Element

div

EXAMPLE


 
 <div id="listview"></div>

 <script>
 $("#listview").serenityListview({
   dataSource: employees,
   titleField: "fullName",
   selectable: true,
   mode: "tile"
 });
 </script>

Options

height - String (default: null)

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

list.border - Boolean (default: true)

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
  }
});

list.selectedClass - String (default: "ui-state-active")

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"
  }
});

list.selector - String (default: ".sr-content")

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"
   }
 });

list.template - String (default: "{{titleField}}")

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}}"
   }
 });

list.templateSelector - String (default: null)

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"
  }
});

mode - String | Object (default: "list")

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"
});

mode.selectable - Boolean (default: false)

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 }
});

mode.view - String (default: "list")

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" }
});

pageable - Boolean | Object (default: false)

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
});

pageable.messages.goto - String (default: "Go to page:")

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}}") } }
});

pageable.messages.pagesize - String (default: "Show rows:")

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:" } }
});

pageable.pagesizes - Array (default: [10, 25, 50, 100])

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] }
});

selectable - Boolean (default: false)

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

tile.height - Number (default: 150)

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
  }
});

tile.selectedClass - String (default: "ui-state-active")

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"
  }
});

tile.selector - String (default: ".sr-content")

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"
   }
 });

tile.template - String (default: "{{titleField}}")

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>"
   }
 });

tile.templateSelector - String (default: null)

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"
  }
});

tile.width - Number (default: 150)

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
  }
});

titleField - String (default: "title")

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

Render the widget.

Version Added: 2017.4

EXAMPLES

Render the listview.

JavaScript


$(".selector").data("serenityListview").render();

setDataSource

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 ) {}
});

dataBound

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");
  }
});

modeChange

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");
  }
});

pageChange

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");
  }
});

select

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");
  }
});

Thank you

Thank you for subscribing to Serenity UI!

Overview

Modules

Classes

Widgets

Options

Functions

Events

div

EXAMPLE

EXAMPLES

EXAMPLES

EXAMPLES

EXAMPLES

EXAMPLES

EXAMPLES

EXAMPLES

EXAMPLES

EXAMPLES

EXAMPLES

EXAMPLES

EXAMPLES

EXAMPLES

EXAMPLES

EXAMPLES

EXAMPLES

EXAMPLES

EXAMPLES

EXAMPLES

EXAMPLES

EXAMPLES

EXAMPLES

RETURN

EXAMPLES

EXAMPLES

PARAMETERS

EXAMPLES

PARAMETERS

EXAMPLES

PARAMETERS

EXAMPLES

PARAMETERS

EXAMPLES

PARAMETERS

EXAMPLES

PARAMETERS

EXAMPLES

Subscribe

Why Subscribe?

Thank you