Dao

My thanks to both of you, I'll try to insert this into my working project.

How? In the same event? What parameters do you call?

Hello! So I have now put my JS code in my grid: Ext Event --> cellClick and my console.log does get the icon clicked. But now, how do you call a Delphi/Unigui component from JavaScript? function cellclick(sender, td, cellIndex, record, tr, rowIndex, e, eOpts) { const noteIcons = document.querySelectorAll('.note'); //icons repeat themselves const heartIcons = document.querySelectorAll('.heart'); for(noteIcon of noteIcons){ noteIcon.addEventListener('click', function(ev){ console.log('clicked on note'); //I want to call my form1 here, sth like //Form1.Show; }) } for(heartIcon of heartIcons) { heartIcon.addEventListener('click', function(ev){ console.log('clicked on heart'); //I want to call my form2 here, sth like //Form2.Show }) } Everything I've tried got me an "undefined" Attached, a very simplified version of what I'm trying to do if it can help. test_JS.zip

But how do you manage to indicate that you clicked on ONE specific icon, not on the entire cell as a whole? How do I make it "read" inside the cell to get the different IDs and see which one was clicked? EDIT: I'm testing a different approach than OnSelectEvent in Delphi and trying to go now by Ext Event -> cellclick, I will update after this. So far it seems to be better but once my event was capture and I get my icon, how do I call it in the Delphi code in my form?

Hello Sherzod, I'm currently using a "onSelectCellEvent", but I can't manage to get the icons separately. So right now a click detects the cell as a whole. I have given a different id to my icons and I'm looking for something equivalent to this in Vanilla JS: //Note icon document.querySelector('#icon1').addEventListener('click', () => {//open window A}); //Heart icon document.querySelector('#icon2').addEventListener('click', () => {//open window B}); Is a similar approach possible? Or do I need to consider it differently? Thanks!

Hello! I'd like to know if you can split a cell in a uniStringGrid and to give each part a specific behaviour. The idea is that I have two icons in the same cell: Clicking on the note icon should lead to one window, while clicking the heart icon should lead to another, different one. Is it possible to achieve this in one cell, or do I need to obligatory have several columns? Thank you for your help.

Hi Sherzod. Don't what happened but the error doesn't pop up anymore. Thanks for your help! Is there any "official" doc regarding these kind of functions, like how do you build them? I see some examples here and there on the forums but I find myself unable to customize them because I can't find it documented anywhere...

Thank you @Sherzod. Tried it, but I get an Ajax error when trying to implement your code: Also if I may ask: how do you know what JS action to call? I've been trying with JSAssign/JSCall, and I see that you've gone to another approach with JSCall/JSCallDefer.

It's done. Any ideas for my layout resizing issue? Thanks

Sure: Professional edition, uni-1.90.0.1549

Hello! Is there any way to change the layout of a panel when the screen becomes smaller? I have a panel in my form whose layout is hbox. When my window size is 800px, I'd like the layout to set to vbox. I've tried something like: procedure TMainForm.UniFormScreenResize(Sender: TObject; AWidth, AHeight: Integer); begin if Awidth < 800 begin mypanel.layout := 'vbox'; //other layout adjustements end; end; But to no success. Do I have to do this with JS? If yes, how? I have also tried something like mypanel.jsInterface.jsAssign('layout', ['vbox']); //(also tried 'type' instead of 'layout') mypanel.jsInterface.jsCall('updateLayout, []); //also tried doLayout instead of updateLayout But it gives an error. Visually, I'm trying to achieve a layout like this: Thanks!

No, I'm really trying to keep it as simple as possible and I'm currently not using any JS, just playing with the Design

No, it's my own form

I'm playing with alignment and layout properties to test how they work and how they render on browser, because I want my app to be responsive (I've posted about this particular issue here http://forums.unigui.com/index.php?/topic/17018-mainform-resizing-to-screen-width-responsiveness/) For this I'm modifying Layout/ Layout Config / Layout Attribs properties of my form and sometimes gets the shown "Config option" error, that's why I think it could be the trigger but I don't know how to prevent it.

Another one of those errors appeared, and after a few manipulations, I suspect it may come from changing width and height in Layout Config -> width: 100%, height: 100% (this is to achieve resizing of screen to 100% but I don't know if it's the right way, as per another I made today) Any opinion? Thank you!