Kendo Spreadsheet - Remove Selection Box from Sheet

4 posts, 1 answers
  1. Kelly
    Kelly avatar
    2 posts
    Member since:
    Jan 2015

    Posted 09 Feb 2018 Link to this post

    By default the Kendo Spreadsheet selects cell A1 when the spreadsheet is loaded. I'd like to change this behavior so that there is no default selection. If a user clicks on the sheet then I want the selection functionality to behave normally.

    I don't see any unselect or deselect options. Is this possible with the Spreadsheet object? If not, is there any sort of workaround to temporarily remove the selection box and column/row highlights?

  2. Answer
    Neli
    Admin
    Neli avatar
    289 posts

    Posted 13 Feb 2018 Link to this post

    Hi Kelly,

    The described behavior is not supported out-of the-box.

    In order to achieve the desired result I would suggest you to do the following:
    When the Spreadsheet is loaded, you can remove the class which marks the active cell:
    var activeCell = $('#spreadsheet').find('.k-spreadsheet-active-cell');
    $(activeCell).removeClass('k-spreadsheet-active-cell');

    This will remove the border around the cell, but not the point for dragging, that is on the right bottom of the cell. To remove also the point, you can add a temporary class as follows:
    var selection = $('#spreadsheet').find('.k-single-selection'); 
    $(selection).addClass('temp');

    Also, you should add the following style:
    <style>
      .temp::after{
        content: none !important;   
      }
    </style>

    You can subscribe to the select event of the widget. In the select event handler, you can remove the 'temp' class from the spreadsheet. This way, the point will be visible again:
    select:function(){
      var temp = $('#spreadsheet').find('.temp');
    $(temp).removeClass('temp');
    },

    I hope that the linked Dojo example will be helpful.

    Regards,
    Neli
    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.
  3. Kelly
    Kelly avatar
    2 posts
    Member since:
    Jan 2015

    Posted 03 May 2018 in reply to Neli Link to this post

    Thanks for the ideas. There were a few quirks with your setup. With the following JavaScript I was able to take care of some edge cases and improve the UX a bit.

    <style>
        .hideSheetSelectionWrapper {
            display: none;
        }
        .k-selection-partial-placeholder {
            /* Intentionally Empty */
        }
    </style>

     

    // Remove default highlight in cell A1 of all spreadsheets.
    // Run this before document.ready for better UX.
    $("div.k-spreadsheet").each(function () {
        var partialSelection = $(this).find(".k-selection-partial");
        partialSelection.removeClass("k-selection-partial");
        partialSelection.addClass("k-selection-partial-placeholder");
     
        var selectionWrapper = $(this).find(".k-selection-wrapper");
        selectionWrapper.addClass("hideSheetSelectionWrapper");
    });
     
    $(document).ready(function () {
        // Need to confirm that default highlight is removed after page is loaded.
        $("div.k-spreadsheet").each(function () {
            var partialSelection = $(this).find(".k-selection-partial");
            partialSelection.removeClass("k-selection-partial");
            partialSelection.addClass("k-selection-partial-placeholder");
     
            var selectionWrapper = $(this).find(".k-selection-wrapper");
            selectionWrapper.addClass("hideSheetSelectionWrapper");
     
            // Re-establish highlight settings when user clicks on spreadsheet.
            $(this).find(".k-spreadsheet-pane").each(function () {
                $(this).click(function (e) {
                    $(this).find(".k-selection-wrapper").removeClass("hideSheetSelectionWrapper");
                    $(this).find(".k-selection-partial-placeholder:not(.k-selection-partial)").addClass("k-selection-partial").removeClass("k-selection-partial-placeholder");
                });
            });
        });
    });

     

  4. Neli
    Admin
    Neli avatar
    289 posts

    Posted 04 May 2018 Link to this post

    Hello Kelly,

    I am glad to hear that the issue is resolved. 
    I would like to thank you for the feedback and for sharing your solution with us, it is very much appreciated.

    Regards,
    Neli
    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