Disable icons in toolbar

8 posts, 0 answers
  1. Hema
    Hema avatar
    20 posts
    Member since:
    Jul 2015

    Posted 24 Feb 2016 Link to this post

    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 )
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 26 Feb 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Adel Chenni
    Adel Chenni avatar
    7 posts
    Member since:
    Jan 2010

    Posted 12 May 2016 in reply to Alexander Valchev Link to this post

    Any way to change it after the spreadsheet has been initialized?
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 16 May 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Jeffrey
    Jeffrey avatar
    14 posts
    Member since:
    Aug 2016

    Posted 31 Dec 2017 in reply to Alexander Valchev Link to this post

    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

  6. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1201 posts

    Posted 02 Jan 2018 Link to this post

    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
    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.
  7. Jeffrey
    Jeffrey avatar
    14 posts
    Member since:
    Aug 2016

    Posted 02 Jan 2018 in reply to Veselin Tsvetanov Link to this post

    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


  8. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1201 posts

    Posted 04 Jan 2018 Link to this post

    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
    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.
Back to Top