[FREE] TableViewer - fully style customized to show table data

[elmachi130]

My apologies.
It's not because I want to do it in parts, but because I need the blocks this way to apply them in different circumstances.

Furthermore, a third option is needed: a checkbox in the header that selects all the boxes. But I will implement that once I understand the second option.

For example, in this case, I don't know whether to add the selected element to a list after the selection.

Or during the selection.

Because after the selection, it adds the values ​​but doesn't update them.

Unless I add a restriction to prevent repetition.

[elmachi130]

This is my project for selecting multiple rows, but I'm having these issues:

See the third search in the video.

*I need to uncheck the box to clear the color of the selected row and remove it from the list. (The problem is that the same content is added when I check the box.)

*Finally, I need to prevent any selection in the header.

The header should be static.

tvchxhighlight_2.aia (202.3 KB)

[elmachi130]

It looks good

I just need to select everything with the (todo) button.

TIMAI2
You could take a look at it
And if you could help me with the button that selects everything, I would appreciate it.
Regards

tvchxhighlight_2 (1).aia (203.5 KB)

[TIMAI2]

You should have everything you need to figure out what to do.

[elmachi130]

I can install this text without the pop-up table.

But the idea is for it to appear in the table for a more aesthetically pleasing look.

[TIMAI2]

Maybe this extension instead ?

[FREE] Image List Viewer Extension - A Fully Customizable List View with Title, Subtitle, Image and Checkbox

Since this is an extension it is a non visible component. Drag it on your screen and in blocks you can see the functions and events.

[elmachi130]

I'm not yet proficient with Table Viewers and I don't want to start with another one.

I just want something like RunJS that selects everything.
Here, it only selects the first row. I need it to select all of them.

[TIMAI2]

Iterate over all the rows in the table, they all have ids.

Have you looked at the source code block (use Do It in companion app) which will show you all the html/css for the table.

[elmachi130]

Yes, of course, when I click the (all) button, it automatically selects the first row.

[elmachi130]

What do you think?
TIMAI2
Is it possible?

[TIMAI2]

@elmachi130

Is it possible?

Yes, anything is possible

[elmachi130]

Based on this app, could you provide me with an example in

(RunJS)

[TIMAI2]

Is this what you wanted (never sure, you forever keep changing your mind)

function setAllChxAndHighlightAllRows() {  
var chx = document.querySelectorAll('input[type="checkbox"]');   
for (let i = 0; i < chx.length; i++) {      
document.getElementById("r" + [i+1] + "c3").innerHTML = '<input type="checkbox" checked/>';
document.getElementById("tr" + [i+1]).style.backgroundColor = 'palegreen';    
} }  
setAllChxAndHighlightAllRows();

[elmachi130]

@TIMAI2

¿Esto es lo que querías?

No matter how hard I try, nothing happens.

Did you run it?

[TIMAI2]

It needs a slight delay. Run the JS in the OnShowTable event.

(or as I showed in a previous post, from a button click event)

[patel]

In the attached file there is a shopping list to which you can add, remove and move items, can you improve the code? I put the datafile in media for use with companion.
SpesaTableviewerJS.aia (34.7 KB)

[TIMAI2]

Could be easier with a couple of listviews and spinners ?

shoppinglist.aia (5.6 KB)

[patel]

I think so, see my aia. Thank you
shoppinglistLV.aia (8.2 KB)
Can I reduce the line spacing ?

[TIMAI2]

Might become more difficult to accurately select an item if any smaller ?

[patel]

I would reduce the line spacing, not the font size