Working with GridJs Highlight feature

Working with GridJs Highlight feature

We support the following JS APIs for the Highlight feature

  • Enable highlight and set highlight style; all highlight APIs will take effect only after the highlight style is set in the active worksheet
xs.sheet.showHighlights(style)
 // the parameter is:
 style: the style for highlight, currently only supports color
 for example: {'color':'rgba(85, 57, 47, 0.08)'}
  • Update the highlight style set in the active worksheet
xs.sheet.updateHighlightStyle(style)
 // the parameter is:
 style: the style for highlight, currently only supports color
 for example: {'color':'rgba(85, 57, 47, 0.08)'}
  • Disable highlight in the active worksheet
xs.sheet.hideHighlights()
  • Add cell text to highlight in the active worksheet
xs.sheet.addHighlightText(row, col, startposition, endposition)
    // the parameters are:
	row: row index 
	col: column index
	startposition: highlight start position in cell text 
	endposition: highlight end position in cell text 
    // it supports multiple range positions inside one cell
  • Remove highlight for cell text in array in the active worksheet
xs.sheet.removeHighlightText(row, col, startposition, endposition)
    // the parameters are:
	row: row index 
	col: column index
	startposition: highlight start position in cell text 
	endposition: highlight end position in cell text
  • Get array for highlight for cell text in the active worksheet
xs.sheet.getHighlightTexts()
  • Add cell range to highlight in the active worksheet
xs.sheet.addHighlightRange(sri, sci, eri, eci)
    // the parameters are:
	sri: start row index of cell range
	sci: start column index of cell range
	eri: end row index of cell range
	eci: end column index of cell range
  • Remove highlight for cell range in array in the active worksheet
xs.sheet.removeHighlightRange(sri, sci, eri, eci)
     // the parameters are:
	sri: start row index of cell range
	sci: start column index of cell range
	eri: end row index of cell range
	eci: end column index of cell range
  • Get array for highlight for cell range in the active worksheet
xs.sheet.getHighlightRanges()
  • Set cell range to inverse highlight in the active worksheet
xs.sheet.setHighlightInverseRange(sri, sci, eri, eci)
    // the parameters are:
	sri: start row index of cell range
	sci: start column index of cell range
	eri: end row index of cell range
	eci: end column index of cell range
  • Remove highlight for inverse highlight in the active worksheet
xs.sheet.removeHighlightInverseRange()
  • Get inverse highlight cell range in the active worksheet
xs.sheet.getHighlightInverseRange()
  • Add shape to highlight array in the active worksheet
xs.sheet.addHighlightShape(shapeid)
    // the parameters are:
    shapeid: the id of the shape, can be found in xs.sheet.data.shapes
  • Remove highlight shape in array in the active worksheet
xs.sheet.removeHighlightShape(shapeid)
     // the parameters are:
    shapeid: the id of the shape, can be found in xs.sheet.data.shapes
  • Get array for highlight shape in the active worksheet
xs.sheet.getHighlightShapes()
  • Add TextBox to highlight; TextBox is a special kind of shape whose type property is "TextBox", in the active worksheet
xs.sheet.addHighlightTextBox(shapeid, startposition, endposition)
    // the parameters are:
    shapeid: the id of the shape, can be found in xs.sheet.data.shapes whose type is 'TextBox'
    startposition: highlight start position in the text of the TextBox
    endposition: highlight end position in the text of the TextBox
    // it supports multiple range positions inside one TextBox
  • Remove highlight range in the TextBox; TextBox is a special kind of shape whose type property is "TextBox", in the active worksheet
xs.sheet.removeHighlightTextBox(shapeid, startposition, endposition)
    // the parameters are:
    shapeid: the id of the shape, can be found in xs.sheet.data.shapes whose type is 'TextBox'
    startposition: highlight start position in the text of the TextBox
    endposition: highlight end position in the text of the TextBox
    // it supports multiple range positions inside one TextBox
  • Add image to highlight array in the active worksheet
xs.sheet.addHighlightImage(imageid)
    // the parameters are:
    imageid: the id of the image, can be found in xs.sheet.data.images
  • Remove highlight image in array in the active worksheet
xs.sheet.removeHighlightImage(imageid)
     // the parameters are:
    imageid: the id of the image, can be found in xs.sheet.data.images
  • Get array for highlight image
xs.sheet.getHighlightImages()
  • Set whether to highlight all objects in the active worksheet, including all shapes, images, and the entire worksheet area
xs.sheet.setHighlightAll(isHighlightAll, isRerender = true)
   // the parameters are:
   isHighlightAll: true or false, whether to highlight all
   isRerender: true or false, whether to re-render
  • Set custom image highlight function
xs.sheet.setCustomHighlightImgFunc(func)
   // the parameters are:
   func: the custom highlight image function; it shall take two parameters, the first is isHighlight, the second one is the Fabric image object 
   // we use Fabric.js to manage image objects; please refer to http://fabricjs.com/image-filters for more information
   // below is an example for the declared function: 
   const customHighlightImage = (isHighlight, imgObj) => {
            imgObj.filters[0] = isHighlight ? new fabric.Image.filters.Sepia() : false;
            imgObj.applyFilters();
        }
  • Clear highlight setting for the active worksheet
xs.sheet.clearHighlights()

Highlight for TextBox object

TextBox is a special kind of shape whose type property is "TextBox".
For example, the code below will show which shape is a TextBox:

for (let shape of xs.sheet.data.shapes) {
    if (shape.type === 'TextBox') {
        console.log(shape.id + ' is a textbox');
    }
}
  • Add highlight for TextBox object
addHighlight(startposition, endposition)
    // the parameters are:
    startposition: highlight start position in the TextBox
    endposition: highlight end position in the TextBox

// For example, we assume shape 0 is a TextBox object
const textbox = xs.sheet.data.shapes[0];
// First we shall add the highlight shape to enable highlighting for the TextBox shape object; it supports multiple range positions 
xs.sheet.addHighlightShape(textbox.id);
textbox.addHighlight(5, 10);
textbox.addHighlight(18, 28);
  • Remove highlight for TextBox object
removeHighlight(startposition, endposition)
    // the parameters are:
    startposition: highlight start position in the TextBox
    endposition: highlight end position in the TextBox

// For example, we assume shape 0 is a TextBox object
const textbox = xs.sheet.data.shapes[0];
textbox.removeHighlight(5, 10);
  • Get highlight for TextBox object
getHighlight()
    // For example, we assume shape 0 is a TextBox object
    const textbox = xs.sheet.data.shapes[0];
    textbox.getHighlight();

You can find more in our GitHub demo page: https://github.com/aspose-cells/Aspose.Cells.Grid-for-Java/blob/main/Examples.GridJs/src/main/resources/templates/index.html

Validation Input Settings How to Build a Collaborative Excel Editor with GridJs