TileView Configuration

An object defining configuration options for the dxTileView 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 class="tileView" data-bind="dxTileView: {
  dataSource: tileViewDataSource,
  itemMargin: 5,
  baseItemHeight: 130,
  baseItemWidth: 180,
  activeStateEnabled: enableActiveState,
  height: '85%'
}">
    <div class="tile" data-options="dxTemplate:{name:'item'}">
        <p style="font-size:larger;"><b data-bind="text: name"></b></p>
    <img style="margin:5px;" data-bind="attr: { src: getImagePath(name) }" />
        <p>Capital: <i data-bind="text: capital"></i></p>
    </div>
</div>
<div 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
tileViewDataSource = 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;
}
.tile {
  border-radius: .5em;
  text-align: center;
  color: white;
  background: gray;
  padding: 5px;
}
.tileView{
  background-color: lightgray;
}

baseItemHeight

Specifies the height of the base tile view item.

Type: Number
Default Value: 100

The actual item height equals the heightRatio field value of an item multiplied by the value of this option.

Show Example:
jQuery
<div class="tileView" data-bind="dxTileView: { dataSource: tiles, baseItemHeight: baseHeight, baseItemWidth: baseWidth, listHeight: 300 }">
    <div class="tile" data-options="dxTemplate:{name:'item'}">
    <p data-bind="text: id"></p>
    </div>
</div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <p>Base item height = <span data-bind="text: baseHeight"></span></p>
    <div data-bind="dxSlider: { value: baseHeight, min: 10, max: 30 }"></div>
  </div>
  <div class="dx-field">
    <p>Base item width = <span data-bind="text: baseWidth"></span></p>
    <div data-bind="dxSlider: { value: baseWidth, min: 10, max: 30 }"></div>
  </div>
</div>
tiles = [
  { id: 1, heightRatio: 2, widthRatio: 3 },
  { id: 2, heightRatio: 2, widthRatio: 2 },
  { id: 3, heightRatio: 3, widthRatio: 3 },
  { id: 4, heightRatio: 2, widthRatio: 2 },
  { id: 5, heightRatio: 4, widthRatio: 3 },
  { id: 6, heightRatio: 2, widthRatio: 3 },
  { id: 7, heightRatio: 3, widthRatio: 2 },
  { id: 8, heightRatio: 3, widthRatio: 2 },
  { id: 9, heightRatio: 2, widthRatio: 4 },
  { id: 10, heightRatio: 4, widthRatio: 3 },
  { id: 11, heightRatio: 2, widthRatio: 2 },
  { id: 12, heightRatio: 3, widthRatio: 2 }
];
baseHeight = ko.observable(20);
baseWidth = ko.observable(20);
body{
  text-align: center;
}
.tile {
  border-radius: .5em;
  text-align: center;
  color: white;
  background: gray;
  padding: 10px;
}
.tileView{
  background-color: lightgray;
}

baseItemWidth

Specifies the width of the base tile view item.

Type: Number
Default Value: 100

The actual item width equals the widthRatio value of an item multiplied by the value of this option.

Show Example:
jQuery
<div class="tileView" data-bind="dxTileView: { dataSource: tiles, baseItemHeight: baseHeight, baseItemWidth: baseWidth, listHeight: 300 }">
    <div class="tile" data-options="dxTemplate:{name:'item'}">
    <p data-bind="text: id"></p>
    </div>
</div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <p>Base item height = <span data-bind="text: baseHeight"></span></p>
    <div data-bind="dxSlider: { value: baseHeight, min: 10, max: 30 }"></div>
  </div>
  <div class="dx-field">
    <p>Base item width = <span data-bind="text: baseWidth"></span></p>
    <div data-bind="dxSlider: { value: baseWidth, min: 10, max: 30 }"></div>
  </div>
</div>
tiles = [
  { id: 1, heightRatio: 2, widthRatio: 3 },
  { id: 2, heightRatio: 2, widthRatio: 2 },
  { id: 3, heightRatio: 3, widthRatio: 3 },
  { id: 4, heightRatio: 2, widthRatio: 2 },
  { id: 5, heightRatio: 4, widthRatio: 3 },
  { id: 6, heightRatio: 2, widthRatio: 3 },
  { id: 7, heightRatio: 3, widthRatio: 2 },
  { id: 8, heightRatio: 3, widthRatio: 2 },
  { id: 9, heightRatio: 2, widthRatio: 4 },
  { id: 10, heightRatio: 4, widthRatio: 3 },
  { id: 11, heightRatio: 2, widthRatio: 2 },
  { id: 12, heightRatio: 3, widthRatio: 2 }
];
baseHeight = ko.observable(20);
baseWidth = ko.observable(20);
body{
  text-align: center;
}
.tile {
  border-radius: .5em;
  text-align: center;
  color: white;
  background: gray;
  padding: 10px;
}
.tileView{
  background-color: lightgray;
}

bounceEnabled

A Boolean value specifying whether to enable or disable the bounce-back effect.

Type: Boolean
Default Value: true

If the option is set to true, you can scroll the widget content even if you have reached the boundary. But when you release the content, it returns to the bound position. If the option value is false, you can scroll the widget content until you reach the boundary.

Show Example:
jQuery
<div class="tileView" data-bind="dxTileView: {
  dataSource: tileViewDataSource,
  itemMargin: 5,
  baseItemHeight: 130,
  baseItemWidth: 180,
  bounceEnabled: enableBounce,
  height: '85%'
}">
  <div class="tile" data-options="dxTemplate:{name:'item'}">
    <p style="font-size:larger;"><b data-bind="text: name"></b></p>
    <img style="margin:5px;" data-bind="attr: { src: getImagePath(name) }" />
    <p>Capital: <i data-bind="text: capital"></i></p>
  </div>
</div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div style="width:70%" class="dx-field-label">Bounce enabled</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: enableBounce }"></div>
  </div>
</div>
enableBounce = ko.observable(true);

//An object passed to the dataSource configuration option of the tile view
tileViewDataSource = 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;
}
.tile {
  border-radius: .5em;
  text-align: center;
  color: white;
  background: gray;
  padding: 5px;
}
.tileView{
  background-color: lightgray;
}

clickAction

An action performed when the widget is clicked.

Type: Action
Default Value: null

Show Example:
jQuery
<div class="tileView" data-bind="dxTileView: {
  dataSource: tileViewDataSource,
  itemMargin: 20,
  baseItemHeight: 130,
  baseItemWidth: 180,
  clickAction: processClick
}">
  <div class="tile" data-options="dxTemplate:{name:'item'}">
    <p style="font-size:larger;"><b data-bind="text: name"></b></p>
    <img style="margin:5px;" data-bind="attr: { src: getImagePath(name) }" />
    <p>Capital: <i data-bind="text: capital"></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
tileViewDataSource = 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;
}
.tile {
  border-radius: .5em;
  text-align: center;
  color: white;
  background: gray;
  padding: 5px;
}
.tileView{
  background-color: lightgray;
}

dataSource

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

Type: Object
Default Value: null

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

  • text - specifies the text inserted into the item element
  • heightRatio - used as a multiplier for the baseItemHeight option value (for the purpose of obtaining the actual item height)
  • widthRatio - used as a multiplier for the baseItemWidth option value (for the purpose of obtaining the actual item width)

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

Show Example:
jQuery
<div class="tileView" data-bind="dxTileView: {
  dataSource: tileViewDataSource,
  itemMargin: 10,
  baseItemHeight: 150,
  baseItemWidth: 200,
  height: '75%'
}">
    <div class="tile" data-options="dxTemplate:{name:'item'}">
    <div class="inlineElement">
          <img data-bind="attr: { src: getImagePath(name) }"/>
    </div>
    <div class="inlineElement">
          <b style="font-size: larger;" data-bind="text: name"></b>
    </div>
    <p>&nbsp;</p>
        <p>Area: <i data-bind="text: area"></i> km2</p>
        <p>Population: <i data-bind="text: population"></i></p>
        <p>Capital: <i data-bind="text: capital"></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 (newValue) {
  tileViewDataSource.load();
})

//Executed after minPopulation value has been changed
minPopulation.subscribe(function (newValue) {
  tileViewDataSource.load();
})

//An object passed to the dataSource configuration option of the tile view
tileViewDataSource = 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;
}
.tile {
  border-radius: 5px;
  text-align: center;
  color: white;
  background: gray;
  padding:5px;
}
.tileView{
  background-color: lightgray;
}
.inlineElement{
  display: inline-block;
  margin: 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="tileView" data-bind="dxTileView: {
  dataSource: tileViewDataSource,
  itemMargin: 5,
  baseItemHeight: 130,
  baseItemWidth: 180,
  disabled: tileViewDisabled,
  height: '85%'
}">
  <div class="tile" data-options="dxTemplate:{name:'item'}">
    <p style="font-size:larger;"><b data-bind="text: name"></b></p>
    <img style="margin:5px;" data-bind="attr: { src: getImagePath(name) }" />
    <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: tileViewDisabled }"></div>
  </div>
</div>
tileViewDisabled = ko.observable(false);

//An object passed to the dataSource configuration option of the tile view
tileViewDataSource = 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;
}
.tile {
  border-radius: .5em;
  text-align: center;
  color: white;
  background: gray;
  padding: 5px;
}
.tileView{
  background-color: lightgray;
}

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

itemMargin

Specifies the distance in pixels between adjacent tiles.

Type: Number
Default Value: 20

Show Example:
jQuery
<div class="tileView" data-bind="dxTileView: {
  dataSource: tiles,
  baseItemHeight: 50,
  baseItemWidth: 50,
  listHeight: 250,
  itemMargin: margin
}">
    <div class="tile" data-options="dxTemplate:{name:'item'}">
    <p data-bind="text: id"></p>
    </div>
</div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <p>Item margin = <span data-bind="text: margin"></span></p>
    <div data-bind="dxSlider: { value: margin, min: 0, max: 50 }"></div>
  </div>
</div>
tiles = [
  { id: 1, heightRatio: 1, widthRatio: 1 },
  { id: 2, heightRatio: 1, widthRatio: 1 },
  { id: 3, heightRatio: 1, widthRatio: 1 },
  { id: 4, heightRatio: 1, widthRatio: 1 },
  { id: 5, heightRatio: 1, widthRatio: 1 },
  { id: 6, heightRatio: 1, widthRatio: 1 },
  { id: 7, heightRatio: 1, widthRatio: 1 },
  { id: 8, heightRatio: 1, widthRatio: 1 },
  { id: 9, heightRatio: 1, widthRatio: 1 },
  { id: 10, heightRatio: 1, widthRatio: 1 },
  { id: 11, heightRatio: 1, widthRatio: 1 },
  { id: 12, heightRatio: 1, widthRatio: 1 },
  { id: 13, heightRatio: 1, widthRatio: 1 },
  { id: 14, heightRatio: 1, widthRatio: 1 },
  { id: 15, heightRatio: 1, widthRatio: 1 },
  { id: 16, heightRatio: 1, widthRatio: 1 },
  { id: 17, heightRatio: 1, widthRatio: 1 },
  { id: 18, heightRatio: 1, widthRatio: 1 },
  { id: 19, heightRatio: 1, widthRatio: 1 },
  { id: 20, heightRatio: 1, widthRatio: 1 },
];
margin = ko.observable(20);
body{
  text-align: center;
}
.tile {
  border-radius: .5em;
  text-align: center;
  color: white;
  background: gray;
  padding: 10px;
}
.tileView{
  background-color: lightgray;
}

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.

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.

itemTemplate

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

Type: String|function
Default Value: "item"

listHeight

The maximum total height, in pixels, of tile view elements located in a single column.

Type: Number|String
Default Value: 500

Show Example:
jQuery
<div class="dx-fieldset">
  <div class="dx-field">
    <p>List height = <span data-bind="text: maxListHeight"></span></p>
    <div data-bind="dxSlider: { value: maxListHeight, min: 50, max: 350 }"></div>
  </div>
</div>
<div class="tileView" data-bind="dxTileView: {
  dataSource: tiles,
  baseItemHeight: 50,
  baseItemWidth: 50,
  listHeight: 250,
  listHeight: maxListHeight
}">
    <div class="tile" data-options="dxTemplate:{name:'item'}">
    <p data-bind="text: id"></p>
    </div>
</div>
tiles = [
  { id: 1, heightRatio: 1, widthRatio: 1 },
  { id: 2, heightRatio: 1, widthRatio: 1 },
  { id: 3, heightRatio: 1, widthRatio: 1 },
  { id: 4, heightRatio: 1, widthRatio: 1 },
  { id: 5, heightRatio: 1, widthRatio: 1 },
  { id: 6, heightRatio: 1, widthRatio: 1 },
  { id: 7, heightRatio: 1, widthRatio: 1 },
  { id: 8, heightRatio: 1, widthRatio: 1 },
  { id: 9, heightRatio: 1, widthRatio: 1 },
  { id: 10, heightRatio: 1, widthRatio: 1 },
  { id: 11, heightRatio: 1, widthRatio: 1 },
  { id: 12, heightRatio: 1, widthRatio: 1 },
  { id: 13, heightRatio: 1, widthRatio: 1 },
  { id: 14, heightRatio: 1, widthRatio: 1 },
  { id: 15, heightRatio: 1, widthRatio: 1 }
];

maxListHeight = ko.observable(200);
body{
  text-align: center;
}
.tile {
  border-radius: .5em;
  text-align: center;
  color: white;
  background: gray;
  padding: 10px;
}
.tileView{
  background-color: lightgray;
}

noDataText

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

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

showScrollbar

A Boolean value specifying whether or not to display a scrollbar.

Type: Boolean
Default Value: false

Show Example:
jQuery
<div class="tileView" data-bind="dxTileView: {
  dataSource: tileViewDataSource,
  itemMargin: 20,
  baseItemHeight: 130,
  baseItemWidth: 180,
  showScrollbar: scrollBarVisible,
  height: '80%'
}">
  <div class="tile" data-options="dxTemplate:{name:'item'}">
    <p style="font-size:larger;"><b data-bind="text: name"></b></p>
    <img style="margin:5px;" data-bind="attr: { src: getImagePath(name) }" />
    <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(false);

//An object passed to the dataSource configuration option of the tile view
tileViewDataSource = 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;
}
.tile {
  border-radius: .5em;
  text-align: center;
  color: white;
  background: gray;
  padding: 5px;
}
.tileView{
  background-color: lightgray;
}

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