Customize Spreadsheet Toobar for Kendo().Spreadsheet in Dotnet Core App

1 Answer 179 Views
Spreadsheet
Daniel
Top achievements
Rank 1
Iron
Daniel asked on 09 May 2022, 01:12 PM | edited on 09 May 2022, 09:21 PM

I am using @Html.Kendo().Spreadsheet() on a Razor page in a DotNet Core App. I want to Configure which options are available on the Toolbar and add a Custom one. I see from an older question from 2017, adding a Custom button was not supported back then. Has that changed?

 

Can someone point me to the appropriate documentation for that please.

 

 

1 Answer, 1 is accepted

Sort by
1
Accepted
Aleksandar
Telerik team
answered on 12 May 2022, 07:07 AM

Hello Daniel,

The Tools on the SpreadsheetToolbar can be customized via the .Toolbar configuration option. You can enable/disable the Home, Insert and Data tabs or use the .Clear() method for any of the tab's configuration and add the desired tools:

.Toolbar(t =>
{
	t.Home(h =>
	{
                h.Clear();
		h.ExportAs();
	});
        t.Data(false);
        t.Insert(false);
})

The above snippet will configure a Toolbar, only with the Home Tab available and containing only the ExportAs button. You can review the available configurations for each of the tabs  in the Spreadsheet API section.

Creating a custom command for the Spreadsheet Toolbar using the HTML Helpers or the Tag Helpers is still not supported. There is a Feature Request on the item and I will urge you to vote on it, if you desire to see such an option available in the future. If implementing a custom command is mandatory for the scenario you have this can be achieved by initializing the Spreadsheet using Kendo UI for jQuery and defining the custom command as demonstrated in the third example in the API section of the documentation.

Regards,
Aleksandar
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Daniel
Top achievements
Rank 1
Iron
commented on 12 May 2022, 10:35 AM

Aleksandar, I would not need a custom command if I could somehow trap the button events of the Comment dialog on the toolbar.  Is there a way to do that?
Aleksandar
Telerik team
commented on 17 May 2022, 05:04 AM

Daniel, there is no configuration available that would allow you to define a click handler for those buttons. The possible approach that I can think of is using jQuery to find the buttons and attach click handlers to them:

$("[data-tool='insertComment']").click(function(){
      	setTimeout(function(){
          var buttonElements = $(".k-spreadsheet-insert-comment").find(".k-action-buttons").children();
          $(buttonElements[0]).click(()=> alert("Remove clicked"))
          $(buttonElements[1]).click(()=> alert("OK clicked"))
          $(buttonElements[2]).click(()=> alert("Cancel clicked"))
        })
      })

Here is a sample dojo.

Tags
Spreadsheet
Asked by
Daniel
Top achievements
Rank 1
Iron
Answers by
Aleksandar
Telerik team
Share this question
or