Kendo Spreadsheet - Remove Selection Box from Sheet in Kendo UI for jQuery

This is a migrated thread and some comments may be shown as answers.

Kendo Spreadsheet - Remove Selection Box from Sheet

3 Answers 80 Views

Spreadsheet

This is a migrated thread and some comments may be shown as answers.

3 Answers, 1 is accepted

Accepted

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.

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

});