How to insert JS code in pascal ?

[Luciano França]

This example how could I do ?

I tried this but it doesn't work

 With UniDBTreeGrid1.ClientEvents.ExtEvents do begin
  Clear;

  Add('function store.load(sender, records, successful, operation, eOpts)');
  Add('{  var me=sender;  me.remoteSort=false; ');
  Add('  me.sort({property:0, direction:"ASC"}); }');
 End;

 

[Sherzod]

Hello, 

Can you please specify first, which edition and build of UniGUI are you using? 

[Luciano França]

2 hours ago, Sherzod said:

Hello, 

Can you please specify first, which edition and build of UniGUI are you using? 

 

I'm testing the latest trial version

Edited December 30, 2022 by luapfr

[Sherzod]

On 12/31/2022 at 2:29 AM, luapfr said:

I'm testing the latest trial version

Recently started evaluating uniGUI again!?

[Luciano França]

Yes I have an old account

now I have just joined the unigui team with the purchase of a Unigui Professional license.

I'm sorry but I use Google translator

let's go to the question how could I do it by pascal code ?

 

 

With UniDBTreeGrid1.ClientEvents.ExtEvents do begin
  Clear;

  Add('function store.load(sender, records, successful, operation, eOpts)');
  Add('{  var me=sender;  me.remoteSort=false; ');
  Add('  me.sort({property:0, direction:"ASC"}); }');
 End;

[Sherzod]

19 hours ago, luapfr said:

now I have just joined the unigui team with the purchase of a Unigui Professional license.

Hello, thank you.

19 hours ago, luapfr said:

let's go to the question how could I do it by pascal code ?

With UniDBTreeGrid1.ClientEvents.ExtEvents do begin
  Clear;

  Add('function store.load(sender, records, successful, operation, eOpts)');
  Add('{  var me=sender;  me.remoteSort=false; ');
  Add('  me.sort({property:0, direction:"ASC"}); }');
 End;

What exactly do you want to achieve?

[Luciano França]

I want to put a JS code by pascal but I can't.

this my attempt fails
the only way I can put a JS code is in Designer mode

[Sherzod]

45 minutes ago, luapfr said:

the only way I can put a JS code is in Designer mode

Use it in the form's OnCreate event.

[Luciano França]

32 minutes ago, Sherzod said:

Use it in the form's OnCreate event.

I just tried and the page just keeps loading...

  something is wrong please see my code

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
 With UniDBTreeGrid1.ClientEvents.ExtEvents do begin
  Clear;

  Add('function store.load(sender, records, successful, operation, eOpts)');
  Add('{  var me=sender;  me.remoteSort=false; ');
  Add('  me.sort({property:0, direction:"ASC"}); }');
 End;
end;

 

[Sherzod]

UniDBGrid1.ClientEvents.ExtEvents.Values['store.load'] := 'function store.load(sender, records, successful, operation, eOpts){var me=sender; me.remoteSort=false; me.sort({property:0, direction:"ASC"});}';

 

[Luciano França]

8 hours ago, Sherzod said:

UniDBGrid1.ClientEvents.ExtEvents.Values['store.load'] := 'function store.load(sender, records, successful, operation, eOpts){var me=sender; me.remoteSort=false; me.sort({property:0, direction:"ASC"});}';

 

How could I do if the component is created in RunTime

See this code below does not work
 

procedure TMainForm.UniBitBtn1Click(Sender: TObject);
Var UniDBTreeList: TUniDBTreeGrid;
begin

 UniDBTreeList := TUniDBTreeGrid.Create(Self);

 UniDBTreeList.DataSource := DataSource2;

 UniDBTreeList.ClientEvents.ExtEvents.Values['store.load'] :=
  'function store.load(sender, records, successful, operation, eOpts){var me=sender; me.remoteSort=false; me.sort({property:0, direction:"ASC"});}';

 With UniDBTreeList do Begin
  Parent := Self;
  Left := 27;
  Top := 48;
  Width := 250;
  Height := 250;
  Hint := '';
  Font.Color := clBlack;
  Font.Height := -15;
  Font.Name := 'Arial';
  ParentFont := False;
  LoadMask.Message := 'Loading data...';
  UseArrows := True;
  IdParentField := 'PARENTID';
  IdField := 'ID';

  with Columns.Add as TUniBaseDBGridColumn do Begin
   FieldName := 'MENU_ITEM';
   Title.Caption := 'Menu';
   Title.Font.Charset := ANSI_CHARSET;
   Title.Font.Height := -15;
   Title.Font.Name := 'Arial';
   Width := 421;
   Font.Charset := ANSI_CHARSET;
   Font.Color := clBlack;
   Font.Height := -15;
   Font.Name := 'Arial';
   ReadOnly := True;
  end;
 end;
end;

 

[Sherzod]

Hello, 

Can you make a simple testcase to check, and attach here?

[Luciano França]

Attached example using a TClientDataSet

UniGui ExtEvents.7z

[Sherzod]

18 minutes ago, luapfr said:

UniGui ExtEvents.7z 32.89 kB · 0 downloads

Thanks. We will check.

[Sherzod]

55 minutes ago, luapfr said:

UniGui ExtEvents.7z 32.89 kB · 0 downloads

Try this approach for now:

  //UniDBTreeList.ClientEvents.ExtEvents.Values['store.load'] :=
  // 'function store.load(sender, records, successful, operation, eOpts){var me=sender; me.remoteSort=false; me.sort({property:0, direction:"ASC"});}';

  UniDBTreeList.JSInterface.JSAddElListener('load', 'store', UniDBTreeList.JSInterface.JSFunction('', 'var me=this; me.remoteSort=false; me.sort({property:0, direction:"ASC"});'));

 

[Luciano França]

46 minutes ago, Sherzod said:

Try this approach for now:

  //UniDBTreeList.ClientEvents.ExtEvents.Values['store.load'] :=
  // 'function store.load(sender, records, successful, operation, eOpts){var me=sender; me.remoteSort=false; me.sort({property:0, direction:"ASC"});}';

  UniDBTreeList.JSInterface.JSAddElListener('load', 'store', UniDBTreeList.JSInterface.JSFunction('', 'var me=this; me.remoteSort=false; me.sort({property:0, direction:"ASC"});'));

 

 

It works Much obliged.

[artem_niko]

On 1/2/2023 at 10:12 PM, Sherzod said:

UniDBGrid1.ClientEvents.ExtEvents.Values['store.load'] := 'function store.load(sender, records, successful, operation, eOpts){var me=sender; me.remoteSort=false; me.sort({property:0, direction:"ASC"});}';

 

Hello!

Is this code is correct for UniForm (create dynamically)?:

procedure TUniFrame1.DynamForm;
var
  f: TUniForm;
begin
  f:=TUniForm.Create(UniApplication);
  f.ClientEvents.ExtEvents.Values['window.show']:=
      'function window.show(sender, eOpts) {' +
      'var el = sender.getE1(); ' +
      'el.setOpacity(0); ' +
      'el.fadeIn({duration: 1000});}';
end;

 

[Sherzod]

Hello,

1 hour ago, artem_niko said:

f.ClientEvents.ExtEvents.Values['window.show']:=

Yes.

But it's wrong here:

1 hour ago, artem_niko said:

getE1

getEl

[artem_niko]

4 minutes ago, Sherzod said:

But it's wrong here

Why? What right?

[Sherzod]

10 hours ago, artem_niko said:

What right?

 

10 hours ago, Sherzod said:

getEl