This is a migrated thread and some comments may be shown as answers.
Kendo Spreadsheet - Remove Selection Box from Sheet
3 Answers 80 Views
This is a migrated thread and some comments may be shown as answers.
Kelly
Top achievements
Rank 1
Kelly asked on 09 Feb 2018, 08:40 PM

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?

3 Answers, 1 is accepted

Sort by
0
Accepted
Neli
Telerik team
answered on 13 Feb 2018, 09:32 AM
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.
0
Kelly
Top achievements
Rank 1
answered on 03 May 2018, 09:08 PM

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

 

0
Neli
Telerik team
answered on 04 May 2018, 11:08 AM
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.
Asked by
Kelly
Top achievements
Rank 1
Answers by
Neli
Telerik team
Kelly
Top achievements
Rank 1
Share this question
or