hover over grid field to see all contents, or a better idea.

[dzimmerman]

We currently have a grid that contains some columns that have notes, these notes vary in length and the user has to constantly adjust the field margin. or maybe a way to word wrap.. i am open to ideas.

[Johnny Major]

In a grid column, you can enable text wrapping via the formatting options "Wrap Cell";

Screenshot 2024-05-10 at 10.03.26 AM.png

[dzimmerman]

on some of my fields i have custom formatting

return v.substr(2,v.length); I am doing a sub string so the first 2 positions dont show on the grid (using for setting the field color)...i loose my custom formatting when i have the text wrap on... is there a way to do this in the custom formatting... or...

[Johnny Major]

You would need to add a style of white-space, which would need to be applied to a div or span

Example

return `<span style="white-space:normal;">${v}</span>`;

Based on your response, here is an example

return `<span style="white-space:normal;">${v.substr(2,v.length)}</span>`;

[dzimmerman]

okay one other question, the user wants to take it one step further and word wrap every so many characters...ie 50 is that possible

[Johnny Major]

Instead of implementing white-space style, you would have to apply logic to insert a break after every 50 characters

Example:

const wrapByNbrChars = function(text, maxChars) {
    let wrappedText = '';
    for (let i = 0; i < text.length; i += maxChars) {
        wrappedText += `${text.substring(i, i + maxChars)}<br>`;
    }
    return wrappedText;
};

return wrapByNbrChars(v, 50);

[dzimmerman]

morning, i added the code you suggested however, i am unable to get it working.. how would i debug the issue...isnt there some type of log command

[Johnny Major]

You can add a debugger statement to your code and use developer tools to step through the source.

[dzimmerman]

see attached. its like it is displaying ONLY the first 50 characters and not breaking and wrapping to the next line.

[Johnny Major]

Right before calling the method "wrapByNbrChars," do a console.log that will display the value of v and the length of v in the console. Do you see any over 50 and if so what does the cell for that look like in your grid?

Example

console.log(v, v.length);

[dzimmerman]

i have a note about 150 characters... when it comes into here...v = the first 50 characters, and the length = 49

debugger;
console.log(v, v.length);
const wrapByNbrChars = function(text, maxChars) {
let wrappedText = '';
for (let i = 0; i < text.length; i += maxChars) {
wrappedText += `${text.substring(i, i + maxChars)}<br>`;
}
return wrappedText;
};

return wrapByNbrChars(v, 50);

[Johnny Major]

Valence doesn't limit the number of characters returned for a column in a table. Was the table column size recently changed? If you preview your data source, do you not see the full note? If you have changed the column in your table, I would recommend resaving your data source and grid.

[dzimmerman]

okay i see what is going on...thanks.

[Johnny Major]

Great! For others to possibly benefit from this thread, what was the issue? Why was the grid column getting a shorter value than what was actually in the underlying table/column?

[dzimmerman]

i was moving the one column into another column that was shorter. :(