New to Telerik UI for ASP.NET Core? Download free 30-day trial

ASP.NET Core ToolBar API

Loading Demo...

EXAMPLE

VIEW SOURCE
EDIT IN
- Telerik REPL

Also available for:

var toolBarInstance; window.demoComponentProperties = { sections: [ { label: 'Get selected action', controls: [ { type: 'button', label: 'Get selected action', onClick: function () { kendo.alert( toolBarInstance .getSelectedFromGroup('player') .text() ); } } ] }, { label: 'Show / Hide', controls: [ { type: 'button', label: 'Toggle player controls', onClick: function () { var buttonGroup = $('#playerControls'); buttonGroup.is(':visible') ? toolBarInstance.hide(buttonGroup) : toolBarInstance.show(buttonGroup); } }, { type: 'button', label: 'Toggle Repeat', onClick: function () { var repeatButton = $('#repeat'); repeatButton.is(':visible') ? toolBarInstance.hide(repeatButton) : toolBarInstance.show(repeatButton); } } ] }, { label: 'Enable / Disable', controls: [ { type: 'button', label: 'Enable / Disable Repeat', onClick: function () { var repeatButton = $('#repeat'); toolBarInstance.enable( repeatButton, repeatButton.hasClass('k-disabled') ); } } ] }, { label: 'Add', controls: [ { type: 'button', label: 'Add new button', onClick: function () { toolBarInstance.add({ type: 'button', text: 'New Button', id: 'newButton', togglable: true }); } }, { type: 'button', label: 'Add new SplitButton', onClick: function () { toolBarInstance.add({ type: 'splitButton', text: 'New SplitButton', menuButtons: [ { text: 'Option 1' }, { text: 'Option 2' } ] }); } }, { type: 'button', label: 'Add new ButtonGroup', onClick: function () { toolBarInstance.add({ type: 'buttonGroup', buttons: [ { text: 'Left' }, { text: 'Middle' }, { text: 'Right' } ] }); } } ] }, { label: 'Remove', controls: [ { type: 'textbox', name: 'itemId', label: 'Item ID', defaultValue: '#delete' }, { type: 'button', label: 'Remove by ID', onClick: function (values) { toolBarInstance.remove(values.itemId); } } ] } ] }; (typeof KendoLicensing === 'object' && KendoLicensing.setScriptKey('141j041f611f063e0837023e133i0i490g310c3a18445h425d38613961385b325e385e475i185j0g4f064706200a1j3b1j3a5f3159345b4550494k3h5k3a5k3b1j054g022900231a23141j3a5h3b5j365e3f5g475e435c435i47001d382k5b17602f46295j104b0c451e5147105j2b370f4d29064h1h56450g5j24331b4j27391k600d512k5g10611g59382j4j2a5d26402f412k4g2906532c4h25112e491f55044i4006511e3a1h3g143d1b4e2d063500404h25501b3a2k43295i124c2g501b114b275a1a5j0i3h2i440g37243d0f372b5j0h385a0g432h3316340h4d032705531e3a0c2e5d0c564711532f0b370234265g12322h4d2f5a2f4f1b504b115i274401410g1f5003375c2f5422173j064d10471a3f5k1f3e5j0k3f1f4d1643033b295k2f6112461b4d3k1739012a5h033b2f57184h103d601j492k0c460g3b09315d303j03285k1k5j05392857183i063k1k4j1e51193h0k57183k20165a1k35024k1f5a2g0f3311402j572a5k3d11332438184a0k23034h0c2i56452h5f1c60381c401a361k3d1g4d450k5g26432a3k0257115b294b2j4a4j3k52023i215h264j205h0b5i244j215415244b06273j213j30411855095237580235501i4i2c07601f5a1e461743083e06340a4g12244327572e0d4h2237054f1g3f023g103g1g521e55482g5b1a5k1i4e0g5k153f5f0j5i2f434f0a4k033e5j285e35572b5f3c5j15471d440a310g5i125b1d4k204600500h3c5k1i4f0f2g3d0k4e3j304k16220k5d1k17450d2a311c3k0b3d043k21310k5g322h5f1625125g3d5h1e54145k3h2052165d155k095706512806263823402i5f223g13512e4e1143054b065422482h3j2g5b34064f244k4b141k602i081g57174004390d3c0c4g1b0d472945203j4c0c3b1i404f2b540k5j1242552550492f5b183f1g3c0d430g412f48283321490b4407421f0i3c1d434g402f5c144a213i4g223e19441d4j1d5818404d2e5a12613f032d3406280a6121600d3d552955'));window._wrappersMetadata = Object.freeze({"name":"@progress/kendo-ui","productCode":"UIASPCORE","productName":"Telerik UI for ASP.NET Core","version":"2026.3.1015","licensingDocsUrl":"https://www.telerik.com/aspnet-core-ui/documentation/installation/activating-your-license/setting-up-your-license"});kendo.syncReady(function(){jQuery("#ToolBar").kendoToolBar({"items":[{"buttons":[{"group":"player","id":"play","togglable":true,"text":"play"},{"group":"player","id":"pause","selected":true,"togglable":true,"text":"pause"},{"group":"player","id":"stop","togglable":true,"text":"stop"}],"id":"playerControls","type":"buttonGroup"},{"id":"repeat","text":"repeat","togglable":true,"type":"button"},{"id":"save","menuButtons":[{"id":"favourites","text":"Add to favourites"},{"id":"later","text":"Listen later"},{"id":"download","text":"Download"}],"text":"Save","type":"splitButton"},{"id":"delete","text":"Delete","type":"button"}]});});

Description

The Telerik for ASP.NET Core ToolBar component comes with an extensive set of API configurations.

The current demo shows how to configure the add, destroy, enable, getSelectedFromGroup, hide, remove, show, and toogle methods of the ToolBar.

You can check the full list of the supported API configurations in the ASP.NET Core ToolBar API reference documentation.

Additional Apps

This ToolBar example is part of unique collection of hundreds of ASP.NET Core demos, with which you can see all Telerik ASP.NET Core components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for ASP.NET Core or ThemeBuilder.

ASP.NET Core ToolBar API

Description

Additional Apps

Support & Learning Resources

Additional Resources