I wasn't thinking about a js component, but something like a js script associated to views. Maybe a script on the root, like message handlers, or something like that.
And js scripts in the library as well, that you could call from the special view js script...
that would make you think it is tied to only the view, but it wouldnt be.
a system.perspective.javescript("string") could be intersting though, if it sort of knows which compontnnet triggered it, would reduce the need of finding it in the document. but it would not work as easy as that
Oh, but it greatly reduces IA's support surface. Probably a huge win for IA.
4 Likes
yeah no need to pay javascripters, just tag me for free 
7 Likes
@victordcq FWIW, I'm a huge fan of your work.
6 Likes
Someone reminded me of this so i wipped something up
focusRow.zip (37.1 KB)
had to use html parsing for " (&q uot;) because it was doig annyoing with the escaped characters xd (the disadvantage of parsing a string to js xd)
code = """<img style='display:none' src='/favicon.ico' onload=\"
document.querySelector('#"""+value.id+""" [data-row-id=""""+str(value.number)+""""]').scrollIntoView();
document.querySelector('#"""+value.id+""" [data-row-id=""""+str(value.number)+""""] .content').click();
\"></img>""".replace("\n", "").replace("\t", "")
return code
(vitualized must be off)
4 Likes
Legend!
1 Like
Thanks for uploading that. I feel like I made every mistake along the way to getting this working but now know just enough to be dangerous now 
To clarify, this method requires that you make create a domId value in the table's meta properties which is then referenced in the markdown code along with the source of row selection (you also have to turn off the escapeHtml on the markdown component and also turn off virtualized in the table props). Am I missing anything?
i think thats it yes, i had made a demo view.
you probably want to make this conditional if nothing is selected
1 Like
Hooooow would you do this when virtualised is on? I have to have it on cause the table has so many rows it's super slow if it's off 
Alright alright, i'll use some mutation magic.
Just be sure the row number exists else it will keep searching for it xd
Here you go 
(this code only works on virtualised grids)
(nobody really cares if this is clean code or not so just puting in some empty try cacthes to keep it running xd)
(it assumes all the rows have the same height)
code = """<img style='display:none' src='/favicon.ico' onload=\"
const heightRow = document.querySelector('#"""+value.id+""" .tr-group.ia_table__rowGroup.ia_table__body__rowGroup').offsetHeight;
const heightScroll = heightRow * """+value.number+""";
const grid = document.querySelector('#"""+value.id+""" .ReactVirtualized__Grid');
const callbackScrollOnce = (mutationList, observer) => {
try{
document.querySelector('#"""+value.id+""" [data-row-id=""""+str(value.number)+""""]').scrollIntoView();
document.querySelector('#"""+value.id+""" [data-row-id=""""+str(value.number)+""""] .content').click();
observer.disconnect();
} catch (error) {}
};
const observerScroll = new MutationObserver(callbackScrollOnce);
const scrollListener = document.querySelector('#"""+value.id+""" .ReactVirtualized__Grid__innerScrollContainer');
observerScroll.observe(scrollListener, { attributes: false, childList: true, subtree: true });
grid.scrollTo(0,heightScroll);
try{
document.querySelector('#"""+value.id+""" [data-row-id=""""+str(value.number)+""""]').scrollIntoView();
document.querySelector('#"""+value.id+""" [data-row-id=""""+str(value.number)+""""] .content').click();
} catch (error) {}
\"></img>""".replace("\n", "").replace("\t", "")
return code
2 Likes
Looking forward to trying this out next week when I'm back (or earlier more than likely if I'm honest.. haha)! Our client will be super happy to have this working!
Oops, forgot to say thanks!
1 Like
I just tested it, very nice!! One small thing is that it doesn't scroll to the right position if some of the rows aren't the default single-line height (e.g. their cell contents length has increased the height of the row).
I try to avoid this anyway in this table though so shouldn't be an issue. Thanks again!
Yes. Its not really possible to know how hieght every row since they havent been rendered yet, so the only way i see this possible is to just do this. Using the height of the first found rendered row.
const heightScroll = heightRow * """+value.number+""";
i did put in an other scroll into view to try find it again if its close enough, but the virtualised table only renders a couple rows out of view, so this might not work with very varient rows.
1 Like
i guess it could be possible to make a smarter way to find it if it uses a couple of steps in between (ex after the first scroll to height, if it doesnt find the correct row number, check which rownumbers are in view and see how much you are short and adjust height to that...
but that is a whole lot of work for somehting that wont be smoot and very confusing to watch the grid go up and down untill it finds the row xd
Got a request for a slight modification @victordcq:
I have a table with subviews.
Using the below code in markdown still scrolls to the correct table row, however it no longer selects the row. Could you have a look? Also, bonus points if you can open the subview too?
code = """<img style='display:none' src='/favicon.ico' onload=\"
document.querySelector('#"""+value.id+""" [data-row-id=""""+str(value.number)+""""]').scrollIntoView();
document.querySelector('#"""+value.id+""" [data-row-id=""""+str(value.number)+""""] .content').click();
\"></img>""".replace("\n", "").replace("\t", "")
return code
with subviews you can use this, last line opens the subview;)
remember that for this version of the code, virtualized has to be off.
i did post a version with mutation observers ifyou dont want to use virtualized
code = """<img style='display:none' src='/favicon.ico' onload=\"
document.querySelector('#"""+value.id+""" [data-row-id=""""+str(value.number)+""""]').scrollIntoView();
document.querySelectorAll('#"""+value.id+""" [data-row-id=""""+str(value.number)+""""] .content')[1].click();
document.querySelector('#"""+value.id+""" [data-row-id=""""+str(value.number)+""""] .expand-subview').click();
\"></img>""".replace("\n", "").replace("\t", "")
return code
1 Like