Toolbar custom definition not implemented

4 posts, 0 answers
  1. Jan
    Jan avatar
    37 posts
    Member since:
    Apr 2017

    Posted 15 May Link to this post

    Hello,

    I want to define which buttons are displayed in the toolbar in which not. In Kendo its possible by passing arrays to the sections of the toolbar (Home, Insert, Data). In .NET Core I am configurating the toolbar in my CSHTML file and can only pass booleans to the sections i.e. .Toolbar(t => t.Home(true).Data(false).Insert(false))

    Btw. the documentation has a wrong description here: http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/SpreadsheetBuilder#methods-Toolbar(System.Action%3CKendo.Mvc.UI.Fluent.SpreadsheetToolbarSettingsBuilder%3E) because it says I should pass a boolean (maybe just copied from the .Toolbar() above).

    When I change the option after init in Javascript with "...options.toolbar.home = [['bold', 'italic'], 'format'];", the spreadsheet is not updated.

    I really need a solution for this asap.

  2. Ianko
    Admin
    Ianko avatar
    1729 posts

    Posted 17 May Link to this post

    Hello Jan,

    This is a logged bug, which you can monitor from here: https://github.com/telerik/kendo-ui-core/issues/2905

    For the time being, the only possible option to define the tools in the Toolbar is by destroying and recreating the Spreadsheet on the client:

    @(Html.Kendo().Spreadsheet()
        .Name("spreadsheet")
    )
      
    <script>
        $(document).ready(function () {
            var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
            var options = spreadsheet.options;
            spreadsheet.destroy();
            $("#spreadsheet").html("");
            $("#spreadsheet").kendoSpreadsheet($.extend({ toolbar: { insert: false } }), options);
        });
    </script>

    Regards,
    Ianko
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jan
    Jan avatar
    37 posts
    Member since:
    Apr 2017

    Posted 22 May Link to this post

    You have a syntax error in your code. Just for others who need this, here the correct workaround:

    @(Html.Kendo()
        .Spreadsheet()
        .Name("spreadsheet")
    )
     
    <script>
      $(function () {
        var $ss =  $('#spreadsheet');
        var ss = $ss.data('kendoSpreadsheet');
        var options = ss.options;
        ss.destroy();
        var ssNew = $ss.empty()
          .kendoSpreadsheet($.extend(options, {
            toolbar: {
              home: [['bold', 'italic', 'underline']],
              insert: false,
              data: false
            }
          }))
          .data('kendoSpreadsheet');
      });
    </script>
  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1268 posts

    Posted 24 May Link to this post

    Hello Jan,

    Thank you for pointing this out. We updated the workaround posted in the Github repo.

    Regards,
    Ivan Danchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top