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

Messages

configuration

Defines the text of the command buttons that are shown within the Grid. Used primarily for localization.

messages

Object

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: ["edit", "destroy"] }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  toolbar: ["create", "save", "cancel"],
  messages: {
    commands: {
      cancel: "Cancel changes",
      canceledit: "Cancel",
      create: "Add new record",
      destroy: "Delete",
      edit: "Edit",
      save: "Save changes",
      select: "Select",
      update: "Update"
    }
  }
});
</script>

messages.ai

Object

Defines the text configurations for the ai features. Used primarily for localization.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [
     { field: "name" },
     { field: "age" },
     { command: "destroy" }
   ],
   dataSource: [
     { name: "Jane Doe", age: 30 },
     { name: "John Doe", age: 33 }
   ],
   toolbar: ["aiAssistant"],
   filterable: true,
   ai: {
      service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
   },
   messages: {
    ai: {
      success: "Operation successful.",
      error: "Operation not successful.",
      outputPlaceholder: "Currently there is no output available"
    }
   },
   height: 550
});
</script>

messages.applyButtons

Object

Defines the text of the apply buttons that are shown within the Grid Toolbar tools. Used primarily for localization.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: ["edit", "destroy"] }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  toolbar: ["columnChooser"],
  sortable: true,
  groupable: true,
  filterable: true,
  messages: {
    applyButtons: {
      columnChooserApply: "Apply columns",
    }
  }
});
</script>

messages.clearButtons

Object

Defines the text of the clear buttons that are shown within the Grid Toolbar tools. Used primarily for localization.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: ["edit", "destroy"] }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  toolbar: ["sort", "filter", "group"],
  sortable: true,
  groupable: true,
  filterable: true,
  messages: {
    clearButtons: {
      clearFiltering: "Remove filters",
      clearSorting: "Unsort all",
      clearGrouping: "Ungroup all",
    }
  }
});
</script>

messages.commands

Object

Defines the text of the command buttons that are shown within the Grid. Used primarily for localization.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: ["edit", "destroy"] }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  toolbar: ["create", "save", "cancel"],
  messages: {
    commands: {
      cancel: "Cancel changes",
      canceledit: "Cancel",
      create: "Add new record",
      destroy: "Delete",
      edit: "Edit",
      save: "Save changes",
      select: "Select",
      update: "Update"
    }
  }
});
</script>

messages.details

Object

Defines the text of the detail expand and collapse buttons 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",
        collapse: "Close"
      }
    }
  });
</script>

messages.expandCollapseColumnHeader

String

Allows the customization of the text in the column header for the expand or collapse columns. Sets the value to make the widget compliant with the web accessibility standards.

Default: ""

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
    data: [
      { name: "Jane Doe", age: 30, city: "London" },
      { name: "John Doe", age: 33, city: "Berlin" }
    ]
  },
  detailInit: function (e) {
    e.detailCell.text("City: " + e.data.city);
  },
  height: 200,
  messages: {
    expandCollapseColumnHeader: "E/C"
  }
});
</script>

messages.filterCellTitle

String

The text that will be used for the title attribute of all filter cells belonging to a filter row in the Grid.

Default: "filter cell"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "name" }, { field: "age" }],
   dataSource: [{ name: "Jane Doe", age: 30 }],
   filterable: {
     mode: "row"
   },
   messages: {
     filterCellTitle: "Filter this column"
   }
});
</script>

messages.groupingHeaderLabel

String

The text that will be used for the aria-lable attribute of the grouping header of the Grid.

Default: "grid grouping header"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "name" }, { field: "age" }],
   dataSource: [{ name: "Jane Doe", age: 30 }],
   groupable: true,
   messages: {
     groupingHeaderLabel: "Drag column headers here to group by column"
   }
});
</script>

messages.noRecords

String

Defines the text of the "noRecords" option that is rendered when no records are available in current view. The "noRecords" options should be set to true.

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

String

The text that will be used for the aria-lable attribute of the ToolBar of the Grid.

Default: "grid toolbar"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "name" }, { field: "age" }],
   dataSource: [{ name: "Jane Doe", age: 30 }],
   toolbar: ["create", "excel"],
   messages: {
     toolbarLabel: "Grid action toolbar"
   }
});
</script>

Related Members