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