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

Messages.details

configuration

Defines the text of the detail expand and collapse buttons that are shown within the Grid with stacked layout and detailTemplate initialized.

messages.details

Object

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    dataLayoutMode: "stacked",
    stackedLayoutSettings: {
      cols:[100, 200],
    },
    detailTemplate: ({ name, age }) => `<div>Name: ${name}</div><div>Age: ${age}</div>`,
    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"
        }
      }
    },
    messages: {
      details: {
        expand: "Open",
        collapse: "Close"
      }
    }
  });
</script>

messages.details.collapse

String

Defines the text of the detail collapse button that are shown within the Grid with stacked layout and detailTemplate initialized.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    dataLayoutMode: "stacked",
    stackedLayoutSettings: {
      cols:[100, 200],
    },
    detailTemplate: ({ name, age }) => `<div>Name: ${name}</div><div>Age: ${age}</div>`,
    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"
        }
      }
    },
    messages: {
      details: {
        collapse: "Close",
      }
    }
  });
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: ["edit", "destroy"] }
  ],
  dataSource: {
    data: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
    ],
    page: 2,
    pageSize: 10
  },
  noRecords: true,
  height: 200,
  messages: {
    noRecords: "There is no data on current page"
  }
});
</script>

messages.details.expand

String

Defines the text of the detail expand button that are shown within the Grid with stacked layout and detailTemplate initialized.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    dataLayoutMode: "stacked",
    stackedLayoutSettings: {
      cols:[100, 200],
    },
    detailTemplate: ({ name, age }) => `<div>Name: ${name}</div><div>Age: ${age}</div>`,
    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"
        }
      }
    },
    messages: {
      details: {
        expand: "Open",
      }
    }
  });
</script>