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 )
7 Answers, 1 is accepted
0
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:
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:
I hope the information will help.
Regards,
Alexander Valchev
Telerik
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Adel Chenni
Top achievements
Rank 1
answered on 12 May 2016, 02:08 PM
Any way to change it after the spreadsheet has been initialized?
0
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
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Jeffrey
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 31 Dec 2017, 03:38 PM
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
0
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:
Regards,
Veselin Tsvetanov
Progress Telerik
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
Try our brand new, jQuery-free Angular components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.
0

Jeffrey
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 02 Jan 2018, 02:02 PM
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
0
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:
Here you could find a simple demo implementing the above suggestion.
Regards,
Veselin Tsvetanov
Progress Telerik
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
Try our brand new, jQuery-free Angular components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.