Hiding or Disabling Action Buttons in the Sheet Bar

Updated on Dec 10, 2025

Environment

Product	Kendo UI for jQuery Spreadsheet
Version	2025.3.825

Description

I want to restrict users from interacting with the action buttons in the sheet bar of the Kendo UI for jQuery Spreadsheet. The goal is to allow users to navigate sheets but prevent actions such as adding sheets or accessing sheet menus.

This knowledge base article also answers the following questions:

• How can I hide buttons in the sheet bar?
• How can I disable action buttons in the Kendo UI Spreadsheet sheet bar?
• How do I prevent interaction with the sheet bar buttons in Kendo UI for jQuery Spreadsheet?

Solution

Hiding the Buttons

To hide the action buttons in the sheet bar, apply the following CSS rules:

css

.k-spreadsheet-sheets-bar .k-spreadsheet-sheet-add {
    display: none !important;
}

.k-spreadsheet-sheets-bar .k-spreadsheet-sheets-menu {
    display: none !important;
}

.k-spreadsheet-sheets-bar .k-menu-button {
    display: none !important;
}

Disabling the Buttons

To disable the buttons without hiding them, use the following CSS rules:

css

.k-spreadsheet-sheets-bar .k-spreadsheet-sheet-add,
.k-spreadsheet-sheets-bar .k-spreadsheet-sheets-menu,
.k-spreadsheet-sheets-bar .k-menu-button {
    pointer-events: none;
    opacity: 0.5;
}

This prevents user interaction with the buttons while keeping them visible in a disabled state.

Below is a runnable example;

  <style>
      .k-spreadsheet-sheets-bar .k-spreadsheet-sheet-add,
      .k-spreadsheet-sheets-bar .k-spreadsheet-sheets-menu,
      .k-spreadsheet-sheets-bar .k-menu-button {
        pointer-events: none;
        opacity: 0.5;
      }
    </style>
    <div id="example">
      <div id="spreadsheet" style="width: 100%"></div>
      <script>
        $(function () {
          $("#spreadsheet").kendoSpreadsheet({          
            sheets: [
              {
                name: "Food Order",
              },
              {
                name: "Drinks Order"
              }
            ],
          });          
        });
      </script>
    </div>

See Also

• Kendo UI for jQuery Spreadsheet Documentation