Dao Posted June 18, 2021 Share Posted June 18, 2021 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. Link to comment Share on other sites More sharing options...
Sherzod Posted June 18, 2021 Share Posted June 18, 2021 1 hour ago, Dao said: Clicking on the note icon should lead to one window, while clicking the heart icon should lead to another, different one. Hello, Are you currently detecting a click in at least one of the icons? Link to comment Share on other sites More sharing options...
Dao Posted June 18, 2021 Author Share Posted June 18, 2021 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! Link to comment Share on other sites More sharing options...
Sherzod Posted June 18, 2021 Share Posted June 18, 2021 1 minute ago, Dao said: Is a similar approach possible? Well, yes, you can try using this approach I think. Link to comment Share on other sites More sharing options...
Dao Posted June 18, 2021 Author Share Posted June 18, 2021 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? Link to comment Share on other sites More sharing options...
Dao Posted June 21, 2021 Author Share Posted June 21, 2021 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 Link to comment Share on other sites More sharing options...
Sherzod Posted June 21, 2021 Share Posted June 21, 2021 Hello, You need to use ajaxRequest... Link to comment Share on other sites More sharing options...
Dao Posted June 21, 2021 Author Share Posted June 21, 2021 How? In the same event? What parameters do you call? Link to comment Share on other sites More sharing options...
Hayri ASLAN Posted June 21, 2021 Share Posted June 21, 2021 5 hours ago, Dao said: How? In the same event? What parameters do you call? Hello In your example please delete the code in ClientEvents and onDrawCell. Please use below code. procedure TMainForm.UniFormCreate(Sender: TObject); var I: Integer; begin for I := 0 to 5 do begin UniStringGrid1.Cells[1, i+1] := '<div id="note'+IntToStr(I)+'" style="cursor:pointer;" onclick="javascript:ajaxRequest('+UniStringGrid1.JSName+', ''OnNoteClick'', {recno: '+IntToStr(I)+'})">'+ '<i class="fas fa-sticky-note"></i>'+ '</div><hr/>'+ '<div id="heart'+IntToStr(I)+'" style="cursor:pointer;" onclick="javascript:ajaxRequest('+UniStringGrid1.JSName+', ''OnHeartClick'', {recno: '+IntToStr(I)+'})">'+ '<i class="fas fa-heart"></i>'+ '</div>'; end; end; procedure TMainForm.UniStringGrid1AjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings); begin if EventName='OnNoteClick' then ShowMessage('Note Clicked. Row : '+Params['recno'].AsString) else if EventName='OnHeartClick' then ShowMessage('Heart Clicked. Row : '+Params['recno'].AsString); end; Link to comment Share on other sites More sharing options...
Dao Posted June 21, 2021 Author Share Posted June 21, 2021 My thanks to both of you, I'll try to insert this into my working project. Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now