Posted 31 July 2023, 3:32 pm EST - Updated 31 July 2023, 3:37 pm EST
Resize a cell using a custom CellType
Posted by: grapecity on 31 July 2023, 3:32 pm EST
-
grapecity
-
ankit.kumar
Posted 1 August 2023, 1:52 am EST
Hi,
As per my understading, you have created a custom cell type from HyperLink and you want to autoFit the column. You could either use the autoFitColumn() method if you want to autofit using the APIs or you could click the column resize handler for which you want to resize.
In both the cases, the column is autofit based on what is shown in the cell and not on the underlying value.
If you still face any issues, kindly share us a minimal working sample. You could also modify the above sample and share it with us replicating the issue. Also, please let us know if we are missing anything.
Reference:
autoFitColumn method: https://www.grapecity.com/spreadjs/api/v15/classes/GC.Spread.Sheets.Worksheet#autofitcolumn
Regards,
Ankit
-
grapecity
Posted 1 August 2023, 3:33 pm EST
Hi,
Thanks for the answer.
We tried this solution without success.
I’ll give you more details and context.We bind data with the bind() method and, to avoid a loss of performance, we suspend the paint of the active sheet during the operation with the suspendPaint() method.
However, the custom type must paint the cell after the bind, so we’re trying to find a solution without having to remove the suspendPaint() from the code.
I’ve prepared a small sample reproducing the problem at the following address :
https://jscodemine.grapecity.com/sample/G7u3gEauF0Sdqdv4Df1gzA/Thank you,
Best regards.
-
ankit.kumar
Posted 2 August 2023, 8:03 am EST
Hi,
The Cell’s width is judged by the value of the cell. In the sample, that you have shared, the underlying values of the cells are the long hyperlinks, but shown differently in the cells because you have overridden the paint method.
For example, for the Cell C2, the underlying value is ** href=“http://thisisalongurlforthesample.com” target=_blank>38332** but the cell shows the value 38332.
When you autoFit the column, it fits the width according to the underlying value and not for the value that is shown in the cell. Therefore, it causes the unexpected behavior.
For your use case, you need to also override the getAutoFitWidth method and return the correct widths. Refer to the following code snippet and the sample:
getAutoFitWidth(value, text, cellStyle, zoomFactor, context) { const httpLink = this.extractLink(value); const getValue = (index) => (httpLink && httpLink[index] ? httpLink[index] : value); return ( context.col === 0 ? super.getAutoFitWidth(text, text, cellStyle, zoomFactor, context) : context.col === 1 ? super.getAutoFitWidth(getValue(0), text, cellStyle, zoomFactor, context) : context.col === 2 ? super.getAutoFitWidth(getValue(1), text, cellStyle, zoomFactor, context) : super.getAutoFitWidth(value, text, cellStyle, zoomFactor, context) ); }References:
getAutoFitWidth method: https://www.grapecity.com/spreadjs/api/v16/classes/GC.Spread.Sheets.CellTypes.HyperLink#getautofitwidth
Regards,
Ankit
-
grapecity
Posted 2 August 2023, 8:55 am EST
Hi,
Thanks for the answer.
I confirm that solution works for us.Best regards.
-
grapecity
Posted 4 December 2023, 2:41 pm EST
Hi, In the solution sample *https://jscodemine.grapecity.com/share/HE6NpMLBqUagra-jQYzqGw/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}
*
If you examine closely, you will notice that the tooltip on the hyperlink cell shows incorrect data.
Also the data in the tooltip changes as you scroll in the sheet (when there is a scrollbar, resize the window to get the scrollbar) -
ankit.kumar
Posted 6 December 2023, 4:32 am EST
Hi,
I was able to replicate the issue with the sample and the latest version of SpreadJS. I am not sure if its an issue with the sample or an issue with the SpreadJS.
I have escalated it to the concerned dev team for further investigation. The internal tracking id for the same is: SJS-21737. I will let you know when there is further info on this from the dev team.
Regards,
Ankit
-
ankit.kumar
Posted 11 December 2023, 7:27 am EST
Hi,
There was an implementation issue. You need to handle the processMouseEnter and then update the tooltip. Kindly refer to the following code snippet and the sample:
class HyperlinkCellType extends GC.Spread.Sheets.CellTypes.HyperLink { getAutoFitWidth(value, text, cellStyle, zoomFactor, context) { const httpLink = this.extractLink(value); const getValue = (index) => (httpLink && httpLink[index] ? httpLink[index] : value); return ( context.col === 0 ? super.getAutoFitWidth(text, text, cellStyle, zoomFactor, context) : context.col === 1 ? super.getAutoFitWidth(getValue(0), text, cellStyle, zoomFactor, context) : context.col === 2 ? super.getAutoFitWidth(getValue(1), text, cellStyle, zoomFactor, context) : super.getAutoFitWidth(value, text, cellStyle, zoomFactor, context) ); } paint(ctx, value, x, y, w, h, style, context) { if (value) { const httpLink = this.extractLink(value); if (httpLink) { super.text(httpLink[1]); super.linkToolTip(httpLink[1]); console.log(context); console.log(httpLink[1]); super.target(GC.Spread.Sheets.CellTypes.HyperLinkTargetType.blank); super.onClickAction((context) => { var cellContent = context.sheet.getCell(context.row, context.col, context.sheetArea).value(); var link = this.extractLink(cellContent); window.open(link[0]); }); super.paint(ctx, httpLink[1], x, y, w, h, style, context); } else { var textCellType = new GC.Spread.Sheets.CellTypes.Text(); textCellType.paint(ctx, value, x, y, w, h, style, context); } } } extractLink(value) { const linkRegex = /<a href="([^"]+)"/g; const matches = value.toString().match(linkRegex); if (matches && matches.length > 0) { const hrefRegex = /href="([^"]+)"/; const match = hrefRegex.exec(matches[0]); const innerHtmlLink = this.extractInnerHTML(value); if (match && innerHtmlLink) { const urlAndText = []; urlAndText[0] = match[1]; urlAndText[1] = innerHtmlLink; return urlAndText; } } // If no <a href> is found, check for http or https links const httpLinkRegex = /(http|https)[^\s]+/g; const httpMatches = value.toString().match(httpLinkRegex); if (httpMatches && httpMatches.length > 0) { const urlAndText = []; urlAndText[0] = httpMatches[0]; urlAndText[1] = httpMatches[0]; return urlAndText; } return null; } extractInnerHTML(value) { const linkRegex = /<a[^>]*>([^<]+)<\/a>/g; const matches = value.match(linkRegex); if (matches) { return matches[0].replace(/<a[^>]*>/, "").replace(/<\/a>/, ""); } return value; } }Regards,
Ankit
-
grapecity
Posted 19 December 2023, 4:57 pm EST - Updated 19 December 2023, 5:02 pm EST
Hi Ankit, thanks for the updated solution. I tested and it works as expected.
There is one issue with the tooltip though related to the positioning. If the tooltip does not fit within the sheet, it results in tooltip being cropped and also additional scrollbars appear.
I have attached a screenshot of the issues.
It would be nice if you can advise a fix where the tooltip is always fully visible and the scrollbars don’t appear. -
ankit.kumar
Posted 21 December 2023, 6:05 am EST - Updated 21 December 2023, 6:10 am EST
Hi,
This is the expected behavior as the tooltip is shown slightly right to the cell position. You could use the SpreadJS API to get the tooltip element and adjust its height.
For example, kindly refer to the following sample: https://jscodemine.grapecity.com/share/WJrz_rbEO02O6kjvIpm6hA/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}
In the sample, I have adjusted the tooltip’s left position inside the processMouseEnter method. You could refer to all the methods available in the HyperLink Class: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.CellTypes.HyperLink
Regards,
Ankit
-
grapecity
Posted 22 December 2023, 4:45 pm EST - Updated 22 December 2023, 4:50 pm EST
Hi, thanks for the update, I have tested the solution. It works in some cases, but not in others. For example itr works when you are moving down in the cells, but when you move up it does not work as shown in the attached image.
The reason is that **processMouseEnter **is fired as soon as the mouse enters the cell, however the tooltip is not shown until the mouse is over the hyperlink, even though the mouse is already inside the cell.
-
ankit.kumar
Posted 12 February 2024, 6:13 pm EST
Hi,
The mentioned issue has been fixed in the latest version of SpreadJS V17.0.3. Now, the devs have added the class “gc-spread-hyperlink-celltype-tooltip” to the hyperlink celltype tooltip element to locate and customize.
Also, the devs have suggested to use the processMouseMove instead of the processMouseEnter event, here is the updated code:
processMouseMove(hitInfo) { // Set linkToolTip const { sheet, row, col } = hitInfo; let value = sheet.getValue(row, col); if (value) { const httpLink = this.extractLink(value); if (httpLink) { super.linkToolTip(httpLink[1]); } } // Invoke processMouseMove method of super class super.processMouseMove.call(this, hitInfo); if (hitInfo.isReservedLocation) { // Get the Tooltip Element var element = spreadHostEl.querySelector(".gc-spread-hyperlink-celltype-tooltip"); if (element) { var rightPosition = element.offsetLeft + element.offsetWidth; let spreadHostElRightPos = spreadHostEl.offsetLeft + spreadHostEl.offsetWidth; if (rightPosition > spreadHostElRightPos) { // Adjust the Left and Right of the Tooltip Element element.style.left = (element.offsetLeft - (rightPosition - spreadHostElRightPos)) + "px"; } } } }You may refer to the following sample here at: https://jscodemine.grapecity.com/share/qk6JnHezXE2BxrP3yT3gnw/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}
Let me know if you still face the issue.
Regards,
Ankit
