New to Kendo UI for jQuery? Start a free 30-day trial

Selectable

configuration

If set to true the user would be able to select grid rows. By default selection is disabled.

Can also be set to the following string values:

"row" - the user can select a single row.
"cell" - the user can select a single cell.
"multiple, row" - the user can select multiple rows.
"multiple, cell" - the user can select multiple cells.

When the selectable property is set to "multiple, row" or "multiple, cell" the Grid cannot be scrollable on mobile devices as both are listening on the same event.

selectable

Boolean|String|Object

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  selectable: true
});
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  selectable: "multiple, row"
});
</script>

Check Selection for a live demo.

selectable.cellAggregates

Boolean|Array

If set to true all aggregates will be calculated and made available to the Status Bar. The cellAggregates property also accepts an array in case only some of the aggregates should be calculated.

The available aggregates are:

count - the count of all selected cells(excluding command/selectable/draggable column) but including template columns without fields.
max - for numeric cells - the biggest numeric value across all of the selected cells/rows.
min - for numeric cells - the smallest numeric value across all of the selected cells/rows.
sum - for numeric cells - the sum of all numeric values from the selected cells/rows.
average - for numeric cells - the average of all numeric values from the selected cells/rows.
earliest - for date cells.
latest - for date cells.
isTrue - for boolean cells - the count of all selected cells with value true.
isFalse - for boolean cells - the count of all selected cells with value false.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
      data: [
          { id: 1, name: "Jane Doe", age: 30 },
          { id: 2, name: "John Doe", age: 33 }
      ],
      schema: {
          model: {
              id: "id"
          }
      }
  },
  selectable: {
    mode: "multiple, row",
    cellAggregates: true
  },
  statusBarTemplate: ({aggregates}) => `Count: ${aggregates.count}, Max: ${aggregates.max}`
});
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
      data: [
          { id: 1, name: "Jane Doe", age: 30 },
          { id: 2, name: "John Doe", age: 33 }
      ],
      schema: {
          model: {
              id: "id"
          }
      }
  },
  selectable: {
    mode: "multiple, row",
    cellAggregates: ["sum", "count", "earliest", "isTrue", "max"]
  },
  statusBarTemplate: ({aggregates}) => `Count: ${aggregates.count}, Max: ${aggregates.max}`
});
</script>

selectable.checkboxSelection

Boolean

When set to true, the grid.selectable will not be initialized. Should be enabled when both checkbox selection for the Grid and cell aggregates are required.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { selectable: true },
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
      data: [
          { id: 1, name: "Jane Doe", age: 30 },
          { id: 2, name: "John Doe", age: 33 }
      ],
      schema: {
          model: {
              id: "id"
          }
      }
  },
  selectable: {
    mode: "multiple, row",
    cellAggregates: true,
    checkboxSelection: true
  },
  statusBarTemplate: ({aggregates}) => `Count: ${aggregates.count}, Sum: ${aggregates.sum}`
});
</script>

selectable.dragToSelect

Boolean

When set to true, the user can drag to select multiple Grid rows or cells.

Applies only for multiple row or multiple cell selection.

Default: true

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  selectable: {
    mode: "multiple, row",
    dragToSelect: false
  }
});
</script>

selectable.ignoreOverlapped

Boolean

When set to true, visually hidden elements that match by the filter option criteria but are overlapped by other elements that also can be selected, are ignored.

Applies only for multiple cell selection.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  selectable: {
    mode: "multiple, cell",
    ignoreOverlapped: true
  }
});
</script>

selectable.mode

String

Can be set to the following string values:

"row" - the user can select a single row.
"cell" - the user can select a single cell.
"multiple, row" - the user can select multiple rows.
"multiple, cell" - the user can select multiple cells.

When the selectable property is set to "multiple, row" or "multiple, cell" the Grid cannot be scrollable on mobile devices as both are listening on the same event.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  selectable: {
    mode: "multiple, row"
  }
});
</script>