Jump to content

Can you split a cell in two? uniStringGrid


Dao

Recommended Posts

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:

capture.png.b73d942c2481f08cfd06e9dffe185c1a.png

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

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

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

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

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

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

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...