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

ColumnMenu.messages

configuration

The text messages displayed in the column menu. Use it to customize or localize the column menu messages.

columnMenu.messages

Object

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  columnMenu: {
    messages: {
      columns: "Choose columns",
      filter: "Apply filter",
      sortAscending: "Sort (asc)",
      sortDescending: "Sort (desc)"
    }
  },
  sortable: true,
  filterable: true,
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
</script>

columnMenu.messages.apply

String

The text of the button which applies the columns filter.

The button is visible when the column menu componentType is set to modern or tabbed.

Default: "Apply"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "id", width:200 },
    { field: "name", width:400 },
    { field: "age", width:400 }
  ],
  columnMenu: {
    componentType: "modern",
    messages: {
      apply: "Apply Columns"
    }
  },
  sortable: true,
  dataSource: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
  ]
});
</script>

columnMenu.messages.autoSizeAllColumns

String

The text of the autosize single column option.

The autosize option is visible when the column menu componentType is set to tabbed.

Default: "Autosize All Columns"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "id", width:200 },
    { field: "name", width:400 },
    { field: "age", width:400 }
  ],
  columnMenu: {
    componentType: "tabbed",
    autoSize: true,
    messages: {
      autoSizeAllColumns: "Custom Autosize all columns"
    }
  },
  sortable: true,
  dataSource: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
  ]
});
</script>

columnMenu.messages.autoSizeColumn

String

The text of the autosize single column option.

The autosize option is visible when the column menu componentType is set to tabbed.

Default: "Autosize This Column"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "id", width:200 },
    { field: "name", width:400 },
    { field: "age", width:400 }
  ],
  columnMenu: {
    componentType: "tabbed",
    autoSize: true,
    messages: {
      autoSizeColumn: "Custom Autosize this column"
    }
  },
  sortable: true,
  dataSource: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
  ]
});
</script>

columnMenu.messages.buttonTitle

String

The title of the button that displays the ColumnMenu.

The {0} argument represents the field name

Default: "{0} edit column settings"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name", width:400 },
    { field: "age", width:400 }
  ],
  columnMenu: {
    messages: {
      buttonTitle: "{0} Column Menu"
    }
  },
  sortable: true,
  dataSource: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
  ]
});
</script>

columnMenu.messages.clear

String

The text of the Clear button in the column menu in mobile Grid.

Default: "Clear"

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    mobile: true,
    columns: [
      { field: "id", width:200 },
      { field: "name", width:400 },
      { field: "age", width:400 }
    ],
    toolbar: [
      { name: "columns" }
    ],
    columnMenu: {
      messages: {
        clear: "Custom Clear Text"
      }
    },
    dataSource: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
    ]
  });
</script>

columnMenu.messages.clearAllFilters

String

The text of the clearAllFilters button in the global column menu.

Default: "Clear All Filters"

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "id", width:200 },
      { field: "name", width:400 },
      { field: "age", width:400 }
    ],
    toolbar: [
      { name: "columns" }
    ],
    columnMenu: {
      clearAllFilters: true,
      messages: {
        clearAllFilters: "Custom Clear All Filters Message"
      }
    },
    filterable: true,
    dataSource: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
    ]
  });
</script>

columnMenu.messages.column

String

The text of the column label in the column menu in mobile Grid.

Default: "Column"

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    mobile: true,
    columns: [
      { field: "id", width:200 },
      { field: "name", width:400 },
      { field: "age", width:400 }
    ],
    toolbar: [
      { name: "columns" }
    ],
    columnMenu: {
      messages: {
        column: "Custom Column label"
      }
    },
    dataSource: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
    ]
  });
</script>

columnMenu.messages.columnVisibility

String

The text of the column visibility menu item in the global column menu.

Default: "Column Visibility"

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "id", width:200 },
      { field: "name", width:400 },
      { field: "age", width:400 }
    ],
    toolbar: [
      { name: "columns" }
    ],
    columnMenu: {
      messages: {
        columnVisibility: "Custom Column Visbility Message"
      }
    },
    filterable: true,
    dataSource: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
    ]
  });
</script>

columnMenu.messages.columns

String

The text message displayed for the column selection menu item.

Default: "Columns"

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

columnMenu.messages.filter

String

The text message displayed for the filter menu item.

Default: "Filter"

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

columnMenu.messages.groupColumn

String

The text message that is displayed for the Group column menu item.

Default: "Group column"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" },
    { field: "unitPrice" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages", unitPrice: 2.5 },
    { productName: "Coffee", category: "Beverages", unitPrice: 3.0 }
  ],
  groupable: true,
  columnMenu: {
    messages: {
      groupColumn: "Group by this column"
    }
  }
});
</script>

columnMenu.messages.lock

String

The text message displayed in the column menu for locking a column.

Default: "Lock Column"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { locked: true, field: "id", width:200 },
    { field: "name", width:400 },
    { field: "age", width:400 }
  ],
  columnMenu: {
    messages: {
      lock: "Pin this column"
    }
  },
  sortable: true,
  dataSource: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
  ]
});
</script>

columnMenu.messages.moveNext

String

The text message that is displayed for the Move to next position column menu item.

Default: "Move next"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" },
    { field: "unitPrice" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages", unitPrice: 2.5 },
    { productName: "Coffee", category: "Beverages", unitPrice: 3.0 }
  ],
  columnMenu: {
    messages: {
      moveNext: "Move Right"
    }
  }
});
</script>

columnMenu.messages.movePrev

String

The text message that is displayed for the Move to previous position column menu item.

Default: "Move previous"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" },
    { field: "unitPrice" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages", unitPrice: 2.5 },
    { productName: "Coffee", category: "Beverages", unitPrice: 3.0 }
  ],
  columnMenu: {
    messages: {
      movePrev: "Move Left"
    }
  }
});
</script>

columnMenu.messages.reset

String

The text of the button which resets the columns filter.

The button is visible when the column menu componentType is set to modern or tabbed.

Default: "Reset"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "id", width:200 },
    { field: "name", width:400 },
    { field: "age", width:400 }
  ],
  columnMenu: {
    componentType: "modern",
    messages: {
      reset: "Reset Columns"
    }
  },
  sortable: true,
  dataSource: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
  ]
});
</script>

columnMenu.messages.setColumnPosition

String

The text message displayed in the column menu for the column position item.

Default: "Set Column Position"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "id", width: 800 },
    { field: "name", width: 400, sticky: true, stickable: true },
    { field: "age", width: 800 }
  ],
  columnMenu: {
    messages: {
      setColumnPosition: "Change Position"
    }
  },
  dataSource: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
  ]
});
</script>

columnMenu.messages.settings

String

The text message displayed in the menu header (available in mobile mode only).

Default: "Column Settings"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  columnMenu: {
    messages: {
      settings: "Column Options",
    }
  },
  mobile: "phone",
  height: 550,
  sortable: true,
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
</script>

columnMenu.messages.sortAscending

String

The text message displayed for the menu item which performs ascending sort.

Default: "Sort Ascending"

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

columnMenu.messages.sortDescending

String

The text message displayed for the menu item which performs descending sort.

Default: "Sort Descending"

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

columnMenu.messages.stick

String

The text message displayed in the column menu for sticking a column.

Default: "Stick Column"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "id", width: 800 },
    { field: "name", width: 400, sticky: true, stickable: true },
    { field: "age", width: 800 }
  ],
  columnMenu: {
    messages: {
      stick: "Stick this column"
    }
  },
  dataSource: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
  ]
});
</script>

columnMenu.messages.ungroupColumn

String

The text message that is displayed for the Ungroup column menu item.

Default: "Ungroup column"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" },
    { field: "unitPrice" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages", unitPrice: 2.5 },
    { productName: "Coffee", category: "Beverages", unitPrice: 3.0 }
  ],
  groupable: true,
  columnMenu: {
    messages: {
      ungroupColumn: "Remove grouping"
    }
  }
});
</script>

columnMenu.messages.unlock

String

The text message displayed in the column menu for unlocking a column.

Default: "Unlock Column"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { locked: true, field: "id", width:200 },
    { field: "name", width:400 },
    { field: "age", width:400 }
  ],
  columnMenu: {
    messages: {
      unlock: "Unpin this column"
    }
  },
  sortable: true,
  dataSource: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
  ]
});
</script>

columnMenu.messages.unstick

String

The text message displayed in the column menu for unsticking a column.

Default: "Unstick Column"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "id", width: 800 },
    { field: "name", width: 400, sticky: true, stickable: true },
    { field: "age", width: 800 }
  ],
  columnMenu: {
    messages: {
      unstick: "Unstick this column"
    }
  },
  dataSource: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
  ]
});
</script>