-
Notifications
You must be signed in to change notification settings - Fork 128
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Not rendering newlines in DataGridCell #497
Comments
Hey @timheuer! I'm circling back to old issues this week and have some updates and a question! Currently, it looks like data grid cells have a CSS declaration that might be causing this issue. Each cell is set with With that said, extra newlines are added when this value is present (for a yet-to-be-determined reason) and results in a cell that has more spacing/padding than it should. Given the following code: <vscode-data-grid id="default-grid" grid-template-columns="1fr 1fr 1fr 1fr" aria-label="Default"></vscode-data-grid> const defaultDataGrid = document.getElementById("default-grid") as DataGrid;
defaultDataGrid.rowsData = [
{
column1: "Cell Data\nHello world",
column2: "Cell Data",
column3: "Cell Data",
column4: "Cell Data",
},
// More data...
]; vscode-data-grid-cell {
white-space: pre-line;
} The following output is produced: A question for you: I'll try and experiment with all of this a bit more, but I've realized it would really help to have more details on how you're trying/hoping to implement and use this kind of functionality. Specifically, how will newlines get added? Will it be like I've demonstrated above (i.e. adding intentional newline characters to strings), or be the result of user interaction/editing, since I know you've been working on an editable data grid for a while correct, or something else entirely? |
The newlines would likely mostly be editing by interacting normally with keystrokes, e.g., "return" key activity. |
Okay cool, and to extra extra clear those interactions are enabled with the The casual update is I resolved the extra spacing issue, but if newlines will mainly come as a result of |
Correct. |
Okay, so I thinkkkk I may have something that works, but I would love a sanity check to make sure I haven't missed anything, especially in the editable data grid category. I created a demo extension that shows off these changes using the editable-data-grid sample extension as a starting point. If you have some time next week to test it out and see if there are any glaring issues I'd greatly appreciate that. We could even hop on a call to really chat through the details and potentially save some async back and forth if you have the time. Regardless, let me know and have a great weekend! |
@hawkticehurst - looks good! spent about 7 minutes typing around, etc. -- like you note the arrow keys not being able to navigate the cursor while in edit. is the resulting new line saving as |
This is the part of the solution (and Scenario 1:
|
One more update before the weekend, I finally figured out how to prevent the FAST data-grid arrow key behavior when in cell edit mode! I updated the demo app with the change, so feel free to check it out (see the I'll also update the actual |
@timheuer okay another interesting update. I've been updating the editable data grid sample today with the new features (i.e. render new line with Namely, without the CSS changes only If you have some cycles to try this out, I'd love your feedback on whether this might be a better/more consistent solution for your needs. The important parts are:
function handleKeydown(e: KeyboardEvent, cell: DataGridCell) {
if (!cell.hasAttribute("contenteditable") || cell.getAttribute("contenteditable") === "false") {
if (e.key === "Enter") {
// Enable cell edit mode
e.preventDefault();
setCellEditable(cell);
}
} else {
if (e.key === "Enter" && e.shiftKey) {
// When in cell edit mode do nothing, let default behavior execute –– render newline
} else if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowDown") {
// When in cell edit mode, arrow keys will move the cursor
// This will stop event propagation so that the underlying FAST
// data-grid arrow events are not triggered
e.stopPropagation();
} else if (e.key === "Enter" || e.key === "Escape") {
// Exit cell edit mode
e.preventDefault();
syncCellChanges(cell);
unsetCellEditable(cell);
}
}
} The only drawback of this solution is that you cannot get a string predefined string to render a newline when using the |
Thanks, I think |
Okay got it! Thanks for the extra context, I'll take a look at your extension tomorrow and go from there |
I think I might be hitting same/variation as #484 when the content being rendered from the data source has newlines.
Example content:
How it is rendered in the cell:
Expected rendering in the cell:
The text was updated successfully, but these errors were encountered: