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