Disable icons in toolbar

[Hema]

I would like to disable some icons like freeze panes, table icon, Data tab etc in the toolbar . How to do that in Kendo UI ? I only saw an option like toolbar : false for completely removing the toolbar ( not disabling some tabs and icons inside the toolbar )

[Alexander Valchev]

Hi Hema,

There is a gap in the documentation which we will try to fix as soon as possible.

Here is a quick explanation how to customize the toolbar:

$("#spreadsheet").kendoSpreadsheet({
  toolbar: {
    home: ["exportAs"], //define single tool
    insert: [[ "addRowBelow", "addRowAbove" ]], //define tool group
    data: false //disable tab
  }
});

In short if you want to remove a tool you have to list all the tools that should be visible.

The full list of tools is:

home: [
    "open",
    "exportAs",
    [ "cut", "copy", "paste" ],
    [ "bold", "italic", "underline" ],
    "backgroundColor", "textColor",
    "borders",
    "fontSize", "fontFamily",
    "alignment",
    "textWrap",
    [ "formatDecreaseDecimal", "formatIncreaseDecimal" ],
    "format",
    "merge",
    "freeze",
    "filter"
],
insert: [
    [ "addColumnLeft", "addColumnRight", "addRowBelow", "addRowAbove" ],
    [ "deleteColumn", "deleteRow" ]
],
data: [
    "sort",
    "filter",
    "validation"
]

I hope the information will help.

Regards,
Alexander Valchev
Telerik

 

 

[Adel Chenni]

Any way to change it after the spreadsheet has been initialized?

[Alexander Valchev]

Hello Adel,

There is no build-in way to modify the ToolBar configuration at runtime. One possible option is to use the setOptions method of the Spreadsheet to change the initial settings. This however will result in re-creating the widget with the new setting, hence rebinding the data, loosing the current state and etc.

Regards,
Alexander Valchev
Telerik

 

 

[Jeffrey]

Hello

Can you confirm if this is implemented on the MVC side?  It does not appear to be available.  

Further is there a way to add custom buttons to the toolbar?

Thank you

Jeff

[Veselin Tsvetanov]

Hello Jeff,

Specifying which will be the available tools with the Spreadsheet MVC helper is currently not supported. If you need to explicitly enable / disable some of the tools, you will need to initialize the widget with jQuery.

Appending a custom tool using the HTML helper is also not supported. If you think, that such option would add value to the widget, I would suggest you to cast your vote for the following Feature request. Meanwhile, you could still define a custom Toolbar button by initializing the widget with jQuery:

$("#spreadsheet").kendoSpreadsheet({
    toolbar: {
        home: [
            // for all available options, see the toolbar items configuration
            // http://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar#configuration-items
            {
                type: "button",
                text: "Custom",
                spriteCssClass: "k-icon k-i-cog",
                click: function() {
                    window.alert("custom tool");
                }
            }
        ]
    }
});

Regards,
Veselin Tsvetanov
Progress Telerik

[Jeffrey]

Hello,

That will work.  Is there a way to add to the quickaccess toolbar on initialization?

I would like to add a custom save button before the undo.

Thank you
Jeff

[Veselin Tsvetanov]

Hi Jeff,

I am afraid, that a custom button could not be placed on the quick access toolbar of the Spreadsheet through configuration. Nevertheless, you could manually add the required button using jQuery:

var spread = $("#spreadsheet").kendoSpreadsheet().data('kendoSpreadsheet');

 

var quickAccessToolbar = $('.k-spreadsheet-quick-access-toolbar');

var saveButton = $('<a href="#" title="Save" class="k-button k-button-icon" aria-label="Save"><span class="k-icon k-i-save"></span></a>');

var tabStripItems = $('.k-spreadsheet-tabstrip .k-tabstrip-items');

 

quickAccessToolbar.append(saveButton);

tabStripItems.css('padding-left', '126px');

 

$('a[aria-label="Save"]').on('click', function(e) {
   e.preventDefault();
   e.stopPropagation();



  var spreadsheet = $("#spreadsheet").data('kendoSpreadsheet');

  spreadsheet.saveAsExcel();

});

Here you could find a simple demo implementing the above suggestion.

Regards,
Veselin Tsvetanov
Progress Telerik