Kendo Spreadsheet - Remove Selection Box from Sheet

[Kelly]

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?

[Neli]

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

[Kelly]

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");
            });
        });
    });
});

 

[Neli]

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