List Configuration

An object defining configuration options for the dxList widget.

activeStateEnabled

A Boolean value specifying whether or not the widget changes its state when interacting with a user.

Type: Boolean
Default Value: true

This option is used when the widget is displayed on a platform whose guidelines include the active state change for widgets.

Show Example:
jQuery
<div data-bind="dxList: { dataSource: listDataSource, activeStateEnabled: enableActiveState, height: '80%' }">
  <div class="listItem" data-options="dxTemplate:{ name:'item' }">
    <p style="font-size:larger;"><b data-bind="text: name"></b></p>
    <p>Capital: <i data-bind="text: capital"></i></p>
  </div>
</div>
<div style="margin-top: 15px;" class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Active state</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: enableActiveState }"></div>
  </div>
</div>
enableActiveState = ko.observable(true);

//An object passed to the dataSource configuration option of the tile view.
listDataSource = DevExpress.data.createDataSource({
  load: function (loadOptions) {
    var dfd = new $.Deferred();
    $.get("/Content/data/states.txt", function (data) {
      dfd.resolve(data);
    }, "json");
    return dfd.promise();
  }
});
body{
  text-align: center;
}

autoPagingEnabled

A Boolean value specifying whether or not to load the next page from the data source when the list is scrolled to the bottom.

Type: Boolean
Default Value: true

You can also load the next page's data on the "More" button click. Assign true to the showNextButton option to show the "more" button.

Show Example:
jQuery
<div class="list" data-bind="dxList: {
  dataSource: listDataSource,
  autoPagingEnabled: autoPaging,
  showNextButton: nextButton,
  pullRefreshEnabled: true,
  height: '65%'
}">
  <div class="listItem" data-options="dxTemplate:{ name:'item' }">
    <div style="display:inline-block; margin: 5px;">
      <img style="margin:5px;" data-bind="attr: { src: getImagePath(name) }" />
    </div>
    <div style="display:inline-block; margin: 5px;">
      <p style="font-size:larger;"><b data-bind="text: name"></b></p>
      <p>Capital: <i data-bind="text: capital"></i></p>
    </div>
    <p>Area: <i data-bind="text: area"></i> km2</p>
    <p>Population: <i data-bind="text: population"></i></p>
  </div>
</div>
<div class="dx-fieldset">
  <div class="dx-field">
    <div style="width: 70%" class="dx-field-label">Auto paging</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: autoPaging }"></div>
  </div>
  <div class="dx-field">
    <div style="width: 70%" class="dx-field-label">Show Next button</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: nextButton }"></div>
  </div>
</div>
autoPaging = ko.observable(true);
nextButton = ko.observable(false);

var nextItem;
//An object passed to the dataSource configuration option of the tile view.
listDataSource = DevExpress.data.createDataSource({
  load: function (loadOptions) {
    var dfd = new $.Deferred();
    $.get("/Content/data/states.txt", function (data) {
      var result = [];
      if (loadOptions.refresh)
        nextItem = 0;
      if (nextItem === data.length)
        dfd.resolve();
      var lastItem = data.length > nextItem + 10 ? nextItem + 10 : data.length;
      for (var i = nextItem; i < lastItem; i++)
        result.push(data[i]);
      nextItem = i + 1;
      dfd.resolve(result);
    }, "json");
    return dfd.promise();
  }
});

//Generates the path to the required image file
getImagePath = function (name) {
  return "/Content/images/doc/13_1/PhoneJS/flags/" + name.replace(" ", "") + ".gif";
};
body{
  text-align: center;
}
.listItem {
  text-align: left;
  padding: 5px;
}
.list{
  margin-bottom: 35px;
}

clickAction

An action performed when the widget is clicked.

Type: Action
Default Value: null

Show Example:
jQuery
<div style="margin: 10px;" data-bind="dxList: {
  dataSource: listDataSource,
  clickAction: processClick
}">
  <div data-options="dxTemplate:{ name:'group' }">
    <h1 data-bind="text: key"></h1>
  </div>
  <div class="listItem" data-options="dxTemplate:{ name:'item' }">
    <div style="display:inline-block; margin: 5px;">
      <img style="margin:5px;" data-bind="attr: { src: getImagePath(name) }" />
    </div>
    <div style="display:inline-block; margin: 5px;">
      <p style="font-size:larger;"><b data-bind="text: name"></b></p>
      <p>Capital: <i data-bind="text: capital"></i></p>
    </div>
    <p>Area: <i data-bind="text: area"></i> km2</p>
    <p>Population: <i data-bind="text: population"></i></p>
  </div>
</div>
processClick = function () {
  DevExpress.ui.dialog.alert("The widget has been clicked", "Action executed");
};

//An object passed to the dataSource configuration option of the tile view
listDataSource = DevExpress.data.createDataSource({
  load: function (loadOptions) {
    if (!loadOptions.refresh)
      return;
    var dfd = new $.Deferred();
    $.get("/Content/data/states.txt", function (data) {
      dfd.resolve(data);
    }, "json");
    return dfd.promise();
  }
});

//Generates the path to the required image file
getImagePath = function (name) {
  if (name === undefined)
    return;
  return "/Content/images/doc/13_1/PhoneJS/flags/" + name.replace(" ", "") + ".gif";
};
body{
  text-align: center;
}
.listItem {
  text-align: left;
  padding: 5px;
}

dataSource

A data source used to fetch data to be displayed by the dxList widget.

Type: Object
Default Value: null

The default template of a data source item object may contain the following fields.

  • html - specifies the html code inserted into the item element.
  • text - specifies the text inserted into the item element
  • key - specifies the name of the list items group. Use this field to specify a data source for a grouped list. See the dxList widget description for an example.

Refer to the Data-Bound Application tutorial for more information.

Show Example:
jQuery
<div data-bind="dxList: {
  pullRefreshEnabled:true,
  dataSource: listDataSource,
  height: '75%'
}">
    <div class="listItem" data-options="dxTemplate:{ name:'item' }">
    <div style="display:inline-block; margin: 5px;">
      <img style="margin:5px;" data-bind="attr: { src: getImagePath(name) }" />
    </div>
    <div style="display:inline-block; margin: 5px;">
      <p style="font-size:larger;"><b data-bind="text: name"></b></p>
      <p>Capital: <i data-bind="text: capital"></i></p>
    </div>
    <p>Area: <i data-bind="text: area"></i> km2</p>
    <p>Population: <i data-bind="text: population"></i></p>
  </div>
</div>
<div class="dx-fieldset">
  <div class="dx-field">
    <p>Population</p>
    <div data-bind="dxRangeSlider: { min: 0, max: 40000000, start: minPopulation, end: maxPopulation }"></div>
    <div style="text-align:left;">
      <p>min: <span data-bind="text: minPopulation"></span></p>
      <p>max: <span data-bind="text: maxPopulation"></span></p>
    </div>
  </div>
</div>
minPopulation = ko.observable(0);
maxPopulation = ko.observable(40000000);

//Executed after maxPopulation value has been changed
maxPopulation.subscribe(function () {
  listDataSource.load({ refresh: true });
})

//Executed after minPopulation value has been changed
minPopulation.subscribe(function () {
  listDataSource.load({ refresh: true });
})

//An object passed to the dataSource configuration option of the tile view
listDataSource = DevExpress.data.createDataSource({
  load: function (loadOptions) {
    if (!loadOptions.refresh)
      return;
    var dfd = new $.Deferred();
    $.get("/Content/data/states.txt", function (data) {
      dfd.resolve($.grep(data, function (e) {
        return e.population > minPopulation() && e.population < maxPopulation();
      }));
    }, "json");
    return dfd.promise();
  }
});

//Generates the path to the required image file
getImagePath = function (name) {
  return "/Content/images/doc/13_1/PhoneJS/flags/" + name.replace(" ", "") + ".gif";
};
body{
  text-align: center;
}
.listItem {
  border-radius: .5em;
  text-align: left;
  padding: 5px;
}

disabled

A Boolean value specifying whether or not a component can respond to user interaction.

Type: Boolean
Default Value: false

Create an observable variable and assign it to this option to specify the availability of the component at runtime.

Show Example:
jQuery
<div class="list" data-bind="dxList: { disabled: listDisabled, dataSource: listDataSource }">
  <div class="listItem" data-options="dxTemplate:{ name:'item' }">
    <p style="font-size:larger;"><b data-bind="text: name"></b></p>
    <p>Capital: <i data-bind="text: capital"></i></p>
  </div>
</div>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Disabled</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: listDisabled }"></div>
  </div>
</div>
listDisabled = ko.observable(false);

//An object passed to the dataSource configuration option of the tile view.
listDataSource = DevExpress.data.createDataSource({
  load: function (loadOptions) {
    if (!loadOptions.refresh)
      return;
    var dfd = new $.Deferred();
    $.get("/Content/data/states.txt", function (data) {
      dfd.resolve(data);
    }, "json");
    return dfd.promise();
  }
});
body{
  text-align: center;
}
.list{
  margin: 10px;
  height: 400px;
}

grouped

A Boolean value specifying whether or not to display a grouped list.

Type: Boolean
Default Value: false

If this option is set to 'true', the object assigned to the items option should include the key and items properties. The key property specifies the group caption in the list. The items property represents an array listing the group items.

Show Example:
jQuery
<div style="margin: 10px;" data-bind="dxList: {
  dataSource: listDataSource,
  grouped: showGroups,
  height: '80%'
}">
  <div data-options="dxTemplate:{ name:'group' }">
    <h1 data-bind="text: key"></h1>
  </div>
  <div class="listItem" data-options="dxTemplate:{ name:'item' }">
    <div style="display:inline-block; margin: 5px;">
      <img style="margin:5px;" data-bind="attr: { src: getImagePath(name) }" />
    </div>
    <div style="display:inline-block; margin: 5px;">
      <p style="font-size:larger;"><b data-bind="text: name"></b></p>
      <p>Capital: <i data-bind="text: capital"></i></p>
    </div>
    <p>Area: <i data-bind="text: area"></i> km2</p>
    <p>Population: <i data-bind="text: population"></i></p>
  </div>
</div>
<div class="dx-fieldset">
  <div class="dx-field">
    <div style="width: 70%" class="dx-field-label">Grouped</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: showGroups }"></div>
  </div>
</div>
showGroups = ko.observable(false);

//Executed after showGroups value has been changed
showGroups.subscribe(function () {
  listDataSource.load({ refresh: true });
})

//An object passed to the dataSource configuration option of the tile view
listDataSource = DevExpress.data.createDataSource({
  load: function (loadOptions) {
    if (!loadOptions.refresh)
      return;
    var dfd = new $.Deferred();
    $.get((showGroups() ? "/Content/data/statesGrouped.txt" : "/Content/data/states.txt"), function (data) {
      dfd.resolve(data);
    }, "json");
    return dfd.promise();
  }
});

//Generates the path to the required image file
getImagePath = function (name) {
  if (name === undefined)
    return;
  return "/Content/images/doc/13_1/PhoneJS/flags/" + name.replace(" ", "") + ".gif";
};
body{
  text-align: center;
}
.listItem {
  text-align: left;
  padding: 5px;
}

groupRender

A function rendering a group header.

Type: function
Default Value: null

The rendering function should have the following parameters and return an HTML string, element, or jQuery object representing the rendered group.

  • groupData - the data source element representing the rendered group
  • groupIndex - the index of the rendered group
  • groupElement - the HTML element containing the rendered group
Show Example:
jQuery
 <div id="listContainer"></div>
//An object passed to the dataSource configuration option of the tile view
listDataSource = DevExpress.data.createDataSource({
  load: function (loadOptions) {
    if (!loadOptions.refresh)
      return;
    var dfd = new $.Deferred();
    $.get("/Content/data/statesGrouped.txt", function (data) {
      dfd.resolve(data);
    }, "json");
    return dfd.promise();
  }
});

//A function used to render group captions
groupRenderer = function (groupData, groupIndex, groupElement) {
  var result = "<div style=\"display: inline-block\"><h1 style=\"color:red;\">" + groupData.key + "&nbsp;</h1></div>";
  result += "<div style=\"display: inline-block\">(" + groupData.items[0].name;
  if (groupData.items.length > 1)
    result += " - " + groupData.items[groupData.items.length - 1].name;
  result += ")</div>"
  return result;
};

//A function used to render items
itemRenderer = function (itemData, itemIndex, itemElement) {
  var result = "<p style=\"font-size:larger;\"><b>" + itemData.name + "</b></p>\
  Capital: <i>" + itemData.capital + "</i></p>";
  return result;
};

$(function () {
  $("#listContainer").dxList({
    dataSource: listDataSource,
    grouped: true,
    itemRender: itemRenderer,
    groupRender: groupRenderer
  })
});

body{
  text-align: center;
}
#listContainer{
  margin: 10px;
  text-align: left;
}

groupTemplate

The name of the template used to display a group header.

Type: String
Default Value: "group"

Show Example:
jQuery
<div data-bind="dxList: {
  dataSource: listDataSource,
  grouped: true,
  itemTemplate: 'stateItem',
  groupTemplate: 'statesGroup'
}">
  <div class="listItem" data-options="dxTemplate:{ name:'statesGroup' }">
    <div style="display: inline-block">
      <h1 style="color:red;" data-bind="text: key + '&nbsp;'"></h1>
    </div>
    <div style="display: inline-block" data-bind="text: getBoundaryItems($data)"></div>
  </div>
  <div class="listItem" data-options="dxTemplate:{ name:'stateItem' }">
    <p style="font-size:larger;"><b data-bind="text: name"></b></p>
    <p>Capital: <i data-bind="text: capital"></i></p>
  </div>
</div>
//An object passed to the dataSource configuration option of the tile view
listDataSource = DevExpress.data.createDataSource({
  load: function (loadOptions) {
    if (!loadOptions.refresh)
      return;
    var dfd = new $.Deferred();
    $.get("/Content/data/statesGrouped.txt", function (data) {
      dfd.resolve(data);
    }, "json");
    return dfd.promise();
  }
});

//Returns boundary items of a group
getBoundaryItems = function (groupData) {
  if (groupData.items.length > 1)
    return groupData.items[0].name + " - " + groupData.items[groupData.items.length - 1].name;
  return groupData.items[0].name;
};
body{
  text-align: center;
}
.listItem {
  border-radius: .5em;
  text-align: left;
  padding: 5px;
}

height

Specifies the height of the widget.

Type: Number|String|function
Default Value: undefined

The option can hold a value of the following types:

  • numeric - the height of the widget in pixels;
  • string - a CSS measurement of the widget height (e.g., "55px", "80%", "auto" and "inherit");
  • function - a function returning the widget height (e.g., height:function(){ return baseHeight - 10 + "%"; }).

itemClickAction

An action performed when a collection item is clicked.

Type: Action
Default Value: null

An object passed to the action function assigned to this option can have the following fields besides the basic field set.

  • itemData - contains an object representing the clicked item
  • itemElement - contains an html element representing the clicked item

itemHoldAction

An action performed when an item is being held for a specified time period.

Type: Action
Default Value: null

Show Example:
jQuery
<div style="margin: 10px;" data-bind="dxList: {
  dataSource: listDataSource,
  itemHoldAction: processItemHold,
  itemHoldTimeout: holdTimeout,
  height:'75%'
}">
  <div data-options="dxTemplate:{ name:'group' }">
    <h1 data-bind="text: key"></h1>
  </div>
  <div class="listItem" data-options="dxTemplate:{ name:'item' }">
    <div style="display:inline-block; margin: 5px;">
      <img style="margin:5px;" data-bind="attr: { src: getImagePath(name) }" />
    </div>
    <div style="display:inline-block; margin: 5px;">
      <p style="font-size:larger;"><b data-bind="text: name"></b></p>
      <p>Capital: <i data-bind="text: capital"></i></p>
    </div>
    <p>Area: <i data-bind="text: area"></i> km2</p>
    <p>Population: <i data-bind="text: population"></i></p>
  </div>
</div>
<p></p>
<div class="dx-fieldset">
  <div class="dx-field">
    <p>Hold timeout</p>
    <div data-bind="dxSlider: { min: 250, max: 2000, value: holdTimeout }"></div>
    <div style="text-align:left;">
      <p>Timeout: <span data-bind="text: holdTimeout"></span></p>
    </div>
  </div>
</div>
holdTimeout = ko.observable(750);

//The itemHold action function
processItemHold = function () {
  DevExpress.ui.dialog.alert("The item is being held during " + holdTimeout() / 1000 + "sec", "Action executed");
}

//An object passed to the dataSource configuration option of the tile view
listDataSource = DevExpress.data.createDataSource({
  load: function (loadOptions) {
    if (!loadOptions.refresh)
      return;
    var dfd = new $.Deferred();
    $.get("/Content/data/states.txt", function (data) {
      dfd.resolve(data);
    }, "json");
    return dfd.promise();
  }
});

//Generates the path to the required image file
getImagePath = function (name) {
  if (name === undefined)
    return;
  return "/Content/images/doc/13_1/PhoneJS/flags/" + name.replace(" ", "") + ".gif";
};
body{
  text-align: center;
}
.listItem {
  text-align: left;
  padding: 5px;
}

itemHoldTimeout

The time period in milliseconds before itemHoldAction execution.

Type: Number
Default Value: 750

Show Example:
jQuery
<div style="margin: 10px;" data-bind="dxList: {
  dataSource: listDataSource,
  itemHoldAction: processItemHold,
  itemHoldTimeout: holdTimeout,
  height:'75%'
}">
  <div data-options="dxTemplate:{ name:'group' }">
    <h1 data-bind="text: key"></h1>
  </div>
  <div class="listItem" data-options="dxTemplate:{ name:'item' }">
    <div style="display:inline-block; margin: 5px;">
      <img style="margin:5px;" data-bind="attr: { src: getImagePath(name) }" />
    </div>
    <div style="display:inline-block; margin: 5px;">
      <p style="font-size:larger;"><b data-bind="text: name"></b></p>
      <p>Capital: <i data-bind="text: capital"></i></p>
    </div>
    <p>Area: <i data-bind="text: area"></i> km2</p>
    <p>Population: <i data-bind="text: population"></i></p>
  </div>
</div>
<p></p>
<div class="dx-fieldset">
  <div class="dx-field">
    <p>Hold timeout</p>
    <div data-bind="dxSlider: { min: 250, max: 2000, value: holdTimeout }"></div>
    <div style="text-align:left;">
      <p>Timeout: <span data-bind="text: holdTimeout"></span></p>
    </div>
  </div>
</div>
holdTimeout = ko.observable(750);

//The itemHold action function
processItemHold = function () {
  DevExpress.ui.dialog.alert("The item is being held during " + holdTimeout()/1000 + "sec", "Action executed");
}

//An object passed to the dataSource configuration option of the tile view
listDataSource = DevExpress.data.createDataSource({
  load: function (loadOptions) {
    if (!loadOptions.refresh)
      return;
    var dfd = new $.Deferred();
    $.get("/Content/data/states.txt", function (data) {
      dfd.resolve(data);
    }, "json");
    return dfd.promise();
  }
});

//Generates the path to the required image file
getImagePath = function (name) {
  if (name === undefined)
    return;
  return "/Content/images/doc/13_1/PhoneJS/flags/" + name.replace(" ", "") + ".gif";
};
body{
  text-align: center;
}
.listItem {
  text-align: left;
  padding: 5px;
}

itemRender

A function used to render collection items.

Type: function
Default Value: null

The rendering function should have the following parameters, and return an HTML string, element, or jQuery object representing the rendered item.

  • itemData - an object representing the rendered item
  • itemIndex - an index of the rendered item
  • itemElement - a container element containing the rendered item

The following is an example of a function used to render an item.

Show Example:
jQuery
 <div id="listContainer"></div>
//An object passed to the dataSource configuration option of the widget
listDataSource = DevExpress.data.createDataSource({
  load: function (loadOptions) {
    if (!loadOptions.refresh)
      return;
    var dfd = new $.Deferred();
    $.get("/Content/data/states.txt", function (data) {
      dfd.resolve(data);
    }, "json");
    return dfd.promise();
  }
});

//A function used to render items
itemRenderer = function (itemData, itemIndex, itemElement) {
   var result = "<div style=\"display:inline-block; margin: 5px;\">\
  <img src=\"" + getImagePath(itemData.name) + "\"/>\
  </div>\
  <div style=\"display:inline-block; margin: 5px;\">\
  <p style=\"font-size:larger;\"><b>" + itemData.name + "</b></p>\
  Capital: <i>" + itemData.capital + "</i></p>\
  </div>";
   return result;
};

//Generates the path to the required image file
getImagePath = function (name) {
  if (name === undefined)
    return;
  return "/Content/images/doc/13_1/PhoneJS/flags/" + name.replace(" ", "") + ".gif";
};

$(function () {
  $("#listContainer").dxList({
    dataSource: listDataSource,
    itemRender: itemRenderer
  })
});

body{
  text-align: center;
}
#listContainer{
  margin: 10px;
  text-align: left;
}

itemRenderedAction

An action performed after a collection item is rendered.

Type: Action
Default Value: null

items

An array of items displayed by the widget.

Type: Array

You can use the dataSource option instead. Unlike the items option, the dataSource option can take on the DataSource configuration object as well as a simple array.

itemSwipeAction

An action performed when an item is swiped.

Type: Action
Default Value: null

Show Example:
jQuery
<div style="margin: 10px;" data-bind="dxList: {
  dataSource: listDataSource,
  itemSwipeAction: processItemSwipe
}">
  <div data-options="dxTemplate:{ name:'group' }">
    <h1 data-bind="text: key"></h1>
  </div>
  <div class="listItem" data-options="dxTemplate:{ name:'item' }">
    <div style="display:inline-block; margin: 5px;">
      <img style="margin:5px;" data-bind="attr: { src: getImagePath(name) }" />
    </div>
    <div style="display:inline-block; margin: 5px;">
      <p style="font-size:larger;"><b data-bind="text: name"></b></p>
      <p>Capital: <i data-bind="text: capital"></i></p>
    </div>
    <p>Area: <i data-bind="text: area"></i> km2</p>
    <p>Population: <i data-bind="text: population"></i></p>
  </div>
</div>
processItemSwipe = function (swipeOptions) {
  DevExpress.ui.dialog.alert("The \"" + swipeOptions.itemData.name + "\" item is swiped", "Action executed");
};

//An object passed to the dataSource configuration option of the tile view
listDataSource = DevExpress.data.createDataSource({
  load: function (loadOptions) {
    if (!loadOptions.refresh)
      return;
    var dfd = new $.Deferred();
    $.get("/Content/data/states.txt", function (data) {
      dfd.resolve(data);
    }, "json");
    return dfd.promise();
  }
});

//Generates the path to the required image file
getImagePath = function (name) {
  if (name === undefined)
    return;
  return "/Content/images/doc/13_1/PhoneJS/flags/" + name.replace(" ", "") + ".gif";
};
body{
  text-align: center;
}
.listItem {
  text-align: left;
  padding: 5px;
}

itemTemplate

The name of the template used to render widget items, or the function returning the template name.

Type: String|function
Default Value: "item"

Show Example:
jQuery
<div data-bind="dxList: {
  dataSource: listDataSource,
  itemTemplate: 'stateItem'
}">
  <div class="listItem" data-options="dxTemplate:{ name:'stateItem' }">
    <div style="display:inline-block; margin: 5px;">
      <img style="margin:5px;" data-bind="attr: { src: getImagePath(name) }" />
    </div>
    <div style="display:inline-block; margin: 5px;">
      <p style="font-size:larger;"><b data-bind="text: name"></b></p>
      <p>Capital: <i data-bind="text: capital"></i></p>
    </div>
    <p>Area: <i data-bind="text: area"></i> km2</p>
    <p>Population: <i data-bind="text: population"></i></p>
  </div>
</div>
//An object passed to the dataSource configuration option of the tile view
listDataSource = DevExpress.data.createDataSource({
  load: function (loadOptions) {
    if (!loadOptions.refresh)
      return;
    var dfd = new $.Deferred();
    $.get("/Content/data/states.txt", function (data) {
      dfd.resolve(data);
    }, "json");
    return dfd.promise();
  }
});

//Generates the path to the required image file
getImagePath = function (name) {
  return "/Content/images/doc/13_1/PhoneJS/flags/" + name.replace(" ", "") + ".gif";
};
body{
  text-align: center;
}
.listItem {
  border-radius: .5em;
  text-align: left;
  padding: 5px;
}

noDataText

The text displayed by the widget if the item collection is empty.

Type: String
Default Value: "No data to display"

pullRefreshEnabled

A Boolean value specifying whether or not the widget supports the "pull down to refresh" gesture.

Type: Boolean
Default Value: false

If the option is set to true, the list data is refreshed each time you pull down and release the list contents.

NOTE: The "pull down to refresh" gesture is not supported by desktop browsers and Windows Phone devices. You can use it only in mobile themes except the Windows Phone theme.

Show Example:
jQuery
<div class="list" data-bind="dxList: {
  dataSource: listDataSource,
  autoPagingEnabled: true,
  pullRefreshEnabled: pullRefresh,
  height: '75%'
}">
  <div class="listItem" data-options="dxTemplate:{ name:'item' }">
    <p style="font-size:larger;"><b data-bind="text: name"></b></p>
    <p>Capital: <i data-bind="text: capital"></i></p>
  </div>
</div>
<div class="dx-fieldset">
  <div class="dx-field">
    <div style="width: 80%" class="dx-field-label">Enable pull down to refresh</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: pullRefresh }"></div>
  </div>
</div>
pullRefresh = ko.observable(true);

var nextItem;
//An object passed to the dataSource configuration option of the tile view.
listDataSource = DevExpress.data.createDataSource({
  load: function (loadOptions) {
    var dfd = new $.Deferred();
    $.get("/Content/data/states.txt", function (data) {
      var result = [];
      if (loadOptions.refresh)
        nextItem = 0;
      if (nextItem === data.length)
        dfd.resolve();
      var lastItem = data.length > nextItem + 10 ? nextItem + 10 : data.length;
      for (var i = nextItem; i < lastItem; i++)
        result.push(data[i]);
      nextItem = i + 1;
      dfd.resolve(result);
    }, "json");
    return dfd.promise();
  }
});
body{
  text-align: center;
}
.listItem {
  text-align: left;
  padding: 5px;
}
.list{
  margin-bottom: 35px;
}

scrollByContent

A Boolean value specifying if the list is scrolled by content.

Type: Boolean
Default Value: true

scrollByThumb

A Boolean value specifying if the list is scrolled using the scrollbar.

Type: Boolean
Default Value: false

scrollingEnabled

A Boolean value specifying whether to enable or disable list scrolling.

Type: Boolean
Default Value: true

showNextButton

A Boolean value specifying whether the widget loads the next page automatically when you reach the bottom of the list, or when a button is clicked.

Type: Boolean
Default Value: false

If this option is set to true, the widget shows a "Next Page" button, and loads the next page of data when you click this button. Otherwise, the widget loads the data automatically, each time you reach the bottom of the list.

NOTE: The default value of this option is false if your application is running on a mobile platform. If you run the application on the desktop, the default value is true.

Show Example:
jQuery
<div class="list" data-bind="dxList: {
  dataSource: listDataSource,
  autoPagingEnabled: true,
  showNextButton: nextButton,
  height: '75%'
}">
  <div class="listItem" data-options="dxTemplate:{ name:'item' }">
    <div style="display:inline-block; margin: 5px;">
      <img style="margin:5px;" data-bind="attr: { src: getImagePath(name) }" />
    </div>
    <div style="display:inline-block; margin: 5px;">
      <p style="font-size:larger;"><b data-bind="text: name"></b></p>
      <p>Capital: <i data-bind="text: capital"></i></p>
    </div>
    <p>Area: <i data-bind="text: area"></i> km2</p>
    <p>Population: <i data-bind="text: population"></i></p>
  </div>
</div>
<div class="dx-fieldset">
  <div class="dx-field">
    <div style="width: 70%" class="dx-field-label">Show Next button</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: nextButton }"></div>
  </div>
</div>
nextButton = ko.observable(false);

var nextItem;
//An object passed to the dataSource configuration option of the tile view
listDataSource = DevExpress.data.createDataSource({
  load: function (loadOptions) {
    var dfd = new $.Deferred();
    $.get("/Content/data/states.txt", function (data) {
      var result = [];
      if (loadOptions.refresh)
        nextItem = 0;
      if (nextItem === data.length)
        dfd.resolve();
      var lastItem = data.length > nextItem + 10 ? nextItem + 10 : data.length;
      for (var i = nextItem; i < lastItem; i++)
        result.push(data[i]);
      nextItem = i + 1;
      dfd.resolve(result);
    }, "json");
    return dfd.promise();
  }
});

//Generates the path to the required image file
getImagePath = function (name) {
  return "/Content/images/doc/13_1/PhoneJS/flags/" + name.replace(" ", "") + ".gif";
};
body{
  text-align: center;
}
.listItem {
  border-radius: .5em;
  text-align: left;
  padding: 5px;
}
.list{
  margin-bottom: 40px;
}

showScrollbar

A Boolean value specifying if the widget scrollbar is visible.

Type: Boolean
Default Value: true

Show Example:
jQuery
<div class="list" data-bind="dxList: { showScrollbar: scrollbarVisible, dataSource: listDataSource }">
  <div class="listItem" data-options="dxTemplate:{ name:'item' }">
    <p style="font-size:larger;"><b data-bind="text: name"></b></p>
    <p>Capital: <i data-bind="text: capital"></i></p>
  </div>
</div>
<div class="dx-fieldset">
  <div class="dx-field">
    <div style="width:70%" class="dx-field-label">Show scroll bar</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: scrollbarVisible }"></div>
  </div>
</div>
scrollbarVisible = ko.observable(true);

//An object passed to the dataSource configuration option of the tile view.
listDataSource = DevExpress.data.createDataSource({
  load: function (loadOptions) {
    if (!loadOptions.refresh)
      return;
    var dfd = new $.Deferred();
    $.get("/Content/data/states.txt", function (data) {
      dfd.resolve(data);
    }, "json");
    return dfd.promise();
  }
});
body{
  text-align: center;
}
.list{
  margin: 10px;
  height: 400px;
}

visible

A Boolean value specifying whether or not the widget is visible.

Type: Boolean
Default Value: true

width

Specifies the width of the widget.

Type: Number|String|function
Default Value: undefined

The option can hold a value of the following types:

  • numeric - the widget width in pixels;
  • string - a CSS measurement of the widget width (e.g., "55px", "80%", "auto" and "inherit");
  • function - the function returning the widget width (e.g., width:function(){ return baseWidth - 10 + "%"; }).